Tampilkan postingan dengan label Blogger's. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger's. Tampilkan semua postingan
Kode Warna (HTML Color Code)

Kode Warna (HTML Color Code)




Untuk mengambil kode HTML dari warna yang sobat inginkan, silahkan soba klik Menu Gir Warna yang berputar, setelah itu sobat perhatikan kotak yang berwarna yang berada di sebelah kanan Gir tersebut. Disana terdapat kode seperti ini :#660099, #47006B, #EABFFE, dan #D580FE, itu adalah kode warnanya, jadi sobat blogger tinggal copy paste kode tersebut di blog sobat.

Profesional Design Blog AboutMe

Apa yang baru didalamnya?

Desain ini meliputi 4 fitur yang paling penting yaitu:

  1. Semua Widget Blogger dibawah judul Pos dan di bagian bawah disimpan tersembunyi
  2. Tiga Baris keren yang menjelaskan konsep seluruh situs anda yaitu 1 - Bio Anda, 2 - Tujuan Blog dan 3 - Penutup.
  3. Pidato Voice Pasif digunakan untuk membuat benda terlihat profesional
  4. Ini Memuat dalam detik


Jika Anda pikir Anda benar-benar membutuhkannya seperti itu maka saya yakin Anda akan senang untuk membaca tutorial di bawah ini.

Cara membuat halaman "About Us" desain baru


Dibawah Ini scripnya silahkan copas bagi yang membutuhkan

<div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px"> <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div> <div style="text-align: justify"><font color="#666666"> ADD PARAGRAPH-1 TEXT HERE </font></div> </div> <div style="text-align: justify">&#160;</div> <div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px"> <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div> <div style="text-align: justify"><font color="#666666"> ADD PARAGRAPH-2 TEXT HERE </font></div> </div> <div style="text-align: justify">&#160;</div> <div style="border: #686868 5px solid; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px"> <div style="text-align: justify"><img style="display: inline; float: right" align="right" src="ADD IMAGE LINK HERE" width="128" height="128" /></div> <div style="text-align: justify"><font color="#666666"> ADD PARAGRAPH-3 TEXT HERE </font></div> </div> <div style="text-align: justify">&#160;</div>


Memasang Lagu di Blog Autoplay Via SoundCloud

Sudah lama tidak post , heheh , ok langsung saja , di sini mungkin sudah banyak yang bisa memasang lagu di blog , tapi tidak sedikit juga yang belum bisa , begini caranya :

  • Masuk ke sini dulu SoundCloud
  • Lalu Klik Sign Up bagi yang belum punya akun [daftar menggunakan akun fb juga bisa]
  • lalu jika sudah kita upload lagu kita , bisa juga dengan mancari nya , tapi biar tidak COPAS mending upload manual saja :) 
Lihat Screenshoot Dibawah ini
  • Lalu akan Muncul "Choose File" , kalau sudah selesai Upload , akan seperti ini
Lihat Screenshoot Dibawah ini

  • Edit Sesuai Keinginan , Dan Save
Lihat Screenshoot Dibawah ini

  • Nanti Muncul Tampilan Seperti ini
Lihat Screenshoot Dibawah ini
  • Pilih Share - lalu edit Widget
Lihat Screenshoot Dibawah ini

  • Akan Muncul tampilan Seperti ini , Kita pilih FLASH lalu sesuaikan dengan keinginan mu, lalu Copas kode yang untuk BLOGSPOT

Lihat Screenshoot Dibawah ini

Sekarang di SoundCloud sudah beres , kita tinggal pasang di blog caranya :

  1. Masuk ke blogger masing-masing
  2. Pilih Tata Letak 
  3. Lalu Tambah Gadget
  4. Pilih yang Html/ javascript
Lihat Screenshoot Dibawah ini

 5. Buka dan paste code mu di sana dan Save
Lihat Screenshoot Dibawah ini


Cukup Mudah kan ?, Bagi yang tidak mau repot Upload Lagu , bisa Search Langsung kok , atau bisa juga make lagu Dewa 19- Risalah hati  kalau masih bingung silahkan Berkomentar dengan Sopan dan Santun ,

Widget Related Post Unik Dengan Summary (Deskripsi+Image)


Widget Related Post Unik Dengan Summary (Deskripsi+Image)
Widget Related Post Unik Dengan Summary (Deskripsi+Image) - Hallo selamat malamsahabat kucoba! Malam ini kang salman akan mengenalkan sebuah widget blog terbaru untuk artikel berkaitan. Berbeda dengan versi sebelumnya yang pernah kang salman ulas yaitu Related Post With Icon for Blogger danMembuat Related Post Dengan Fungsi Scroll. Kali ini widgetnya banar-benar unik dimana pengunjung tidak hanya melihat judul atau fotonya saja tetapi mereka juga bisa membaca sekilas terlebih dahulu sebelum memutuskan untuk mengklik link / artikel tersebut.

Demonya seperti ini:


Sebenarnya widget ini lebih tepat di katakan label thumb.
Mau Tau Cara Pasangnya?
Langsung aja:

Langkah1:
1. Login Blogger  >  Rancangan >  Edit Template  >  Copy kode berikut dan simpan di atas </head>

<style>
#related_posts {
}
#related_posts h4 {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    color: #333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    margin: 0 0 5px;
    padding: 5px 10px;
background:#ccc;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 0px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #ccc;
background:#f0f0f0;
margin: 0 0 5px;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #ccc;
width: 55px;
height: 55px;
background:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 165;
var morelink = "readmore";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]>
</script>
Langkah 2
Simpan kode ini di bawah <data:post.body/>

<div id="related_posts">
<h4>Related Posts</h4>
<script src="/feeds/posts/default/-/Widget?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50" type="text/javascript">
</script>
<ul id="relpost_img_sum"><script type="text/javascript">
relatpost();
</script> </ul>
</div>

Keterangan:
Tulisan warna merah adalah nama label yang ingin di tampilkan.

var relmaxposts = jumlah artikel yang di tampilkan
var numchars = panjang summary (deskrisi yang di tampilkan)

width: 55px; = ukuran gambar
height: 55px; = ukuran gambar

Cara paling mudah adalah dengan mengcopy semua kode di atas ke dalam widget di sidebar kita
1. Pilih Rancangan > Tambah Widget  >  Pilih HTML/Javascript
2. Paste semua kode di atas baik langkah1 dan langkah2
3. Simpan widget dan lihat hasilnya.

Semoga bermanfaat dan silakan komentar sesuai topik.

Penulis: Widget Related Post Unik Dengan Summary (Deskripsi+Image)
Kang Salman

Cara Membuat Recent Post dengan Thumbnail


Cara Membuat Recent Post dengan Thumbnail - Cara/trik mudah menjadikan recent post tampil dengan thumbnail atau cara membuat recent post/artikel terbaru muncul dengan gambar atau cara gampang memunculkan recent post dengan thumbnail.
Recent Post dengan Thumbnail
Setelah sebelumnya saya membahas artikel mengenai cara membuat recent post berjalan di blog, maka di postingan kali ini saya akan mengulas artikel mengenai trik membuat recent post dengan gambarTutorial ini sedikit mirip tapi berbeda. Nah langsung saja berikut cara mudah menjadikan recent post tampil dengan thumbnail:

  1. Login ke blogger sobat
  2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
  3. Dan taruh script dibawah ini kedalamnya
    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";
    imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";
    imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";
    imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";
    imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
    showRandomImg = true;
    boxwidth = 230;
    cellspacing = 8;
    borderColor = "#ffffff";
    bgTD = "transparent";
    thumbwidth = 40;
    thumbheight = 40;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://amronbadriza.blogspot.com/";
    </script>
    <script src="http://amronbadriza.googlecode.com/files/recent_posts_thumbnail.js" type="text/javascript"></script>
  4. Ganti yang berwarna merah dengan alamat blog kamu lalu simpan.
Oke, sekian dulu postingan mengenai cara membuat recent post dengan thumbnail. Semoga bermanfaat.

Referensi: http://infonetmu.blogspot.com/2012/01/cara-membuat-recent-post-dengan.html


Source: http://www.amronbadriza.com/2012/10/cara-membuat-recent-post-dengan.html#ixzz2Key3g2va
Membuat Daftar Isi Berdasarkan Kategori

Membuat Daftar Isi Berdasarkan Kategori


Cara Membuat Daftar Isi Berdasarkan Kategori - Daftar isi merupakan daftar yang menampilkan beberapa isi/judul dari sebuah artikel dari blog, Dalam Daftar Isi dapat mempermudah pengunjung untuk mencari artikel yang ingin visitor di carinya untuk daftar isi kita juga dapat mempermudah visitor untuk mencari artikel lama, mempermudah mencari artikel dan visitor semakin betah jika artikel di daftar isi tersebut bermanfaat

Nah bagi anda yang ingin membuat daftar isi di blog,silahkan anda ikuti tutorialnya di bawah ini :

  1.Masuk ke akun blogger anda
  2.Lalu buat entri baru dan pilih modus HTML
  3.Copy kode di bawah ini :


GANTI :
http://x-maty.blogspot.com/ dengan URL blog anda

  4.Simpan !
Mengganti Warna Background Blog Dengan Gambar

Mengganti Warna Background Blog Dengan Gambar


Cara Mengganti Warna Background Blog Dengan Gambar - Mungkin untuk yang pertama kali terjun di dunia blog pasti belum bisa mengganti warna background atau mengganti background dengan gambar, Sebenarnya cara ini sangat mudah sekali bagi blogger karna hanya mengganti warna background saja, ya tapi berhubung anda belum bisa mengganti latar belakang blog, maka saya akan memberikan tutorialnya di bawah ini :

Cara Mengganti Background Blog
  1.Masuk Ke Akun Blogger Anda Anda
  2.Pilih ke menu Template
  3.Kemudian klik Edit HTML
  4.Centang Expand Widget Template
  5.Kemudian cari kode yang mirip di bawah ini :


ganti kode  #FFF dengan kode warna yang anda inginkan, Anda juga dapat memilih kode warna di sini
  6.Simpan !

Cara Mengganti Background Blog Dengan Gambar
Caranya sangat mudah
cukup berikan url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNJUNFK0OcWHKsKz4_yWHo6CjLrlBfzCK83AvHRURzIv8d0Yz5ZQbGnwbWoiSMexJGt2y5b7u2rLCe0rBcvfDF1mtdq-VSh-R7qy44j0SJT_5cynwsVG0PkBVVQGpXtB9rbgNFHVtrME/s1600/bg-banner-pattern.gif ) di sebelah background:#FFF

Contoh :

7.Selesai.....

Membuat Komentar Admin Berbeda di Blog

Cara Membuat Komentar Admin Berbeda di Blog - Warna Komentar Admin Berbeda - Kotak Komentar Admin Berbeda - Pada kali ini saya akan memberikan cara untuk mempercantik komentar pada blog kita, untuk membuat komentar admin berbeda dengan visitor caranya sangat mudah sekali dan sangat simple untuk tutorial ini juga dapat memberikan warna dan memprindah tampilan komentar blog anda.Untuk contoh komentar admin berbeda bisa anda lihat di bawah ini

Nah bagi anda yang sudah tidak sabar lagi untuk melihat tutorial cara membuat komentar admin berbeda bisa anda lihat di sini :

Cara Membuat Komentar Admin Berbeda di Blog
   1.Masuk Ke Akun Blogger Anda Anda
   2.Pilih ke menu Template
   3.Kemudian klik Edit HTML
   4.Centang Expand Widget Template
   5.Kemudian cari kode </body> 
   6.Lalu copas/copy paste script di bawah ini,Lalu letakan di atas atau sebelum kode  </body> 




 7.Simpan !

Tambahan :
Jika ingin mengubah warna background dan border, silahkan ganti kode  #1919B3 dengan kode warna yang anda sukai, Untuk melihat kode warna HTML bisa anda lihat di sini
Untuk mengganti tulisan admin silahkan hapus/ganti kode  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXnsolVo7jsjrKJdR6b590PR2gVo-F5jvVxZ_ul_FsJIka4COQOdrJ2gpcCH7udzWrXYdieA3g6HBqzEoahi1LybUKKbQSPGRcrCWb1okAHNdIFT9Tw5hErviY4kyVdV8ZPwoLajsIwo/s1600/admin2.png
Membuat/Bikin Spoiler di Blog

Membuat/Bikin Spoiler di Blog

Anda pasti tahu mengenal spoilerkan ? spoiler biasanya di temukan di forum-forum seperti kaskus,spoiler juga bisa menghemat tempat dan bisa menyembunyikan konten seperti foto,teks dll dengan sistem buka tutup
Untuk contoh spoilernya bisa anda lihat di bawah ini :
SEXY GIRL:
Cara Membuat Spoiler di Postingan Blog
   1.Login ke akun blogger anda
   2.Pilih Entri Baru/New Post
   3.Lalu pilih mode Edit HTML
  4.Copy paste kode di bawah ini  taruh pada mode Edit HTML



  5.Selesai dech.....

Widget Share Media Sosial di Blog


Cara Memasang Widget Share Media Sosial di Blog dengan Float | Bos Tutorial - Cara Memasang Widget Share Media Sosial di Blog dengan Float. Sebelumnya Bos Tutorial membagikan Cara Membuat-Memasang Spoiler di Blog. Kini akan membagikan Tutorial bagaimana Cara Memasang Widget Share Media Sosial di Blog dengan Float.
Saya pernah berjanji akan memberikan tutorial apa-apa saja yang terkandung di dalam blog ini, baik tanmpilan blog maupun widget-widget yang ada.

Cara Memasang Widget Share Media Sosial di Blog dengan Float
Tutorial Cara Memasang Widget Share Media Sosial di Blog dengan Float tidak lah susah. Tutorial ini berasal dari hasil pencarian yang bos tutorial temukan, dan bos tutorial praktekkan dan berhasil ditampilkan di blog ini. Saya akan mencoba membagikan tutorialnya yah. Oh iya, Cara Memasang Widget Share Media Sosial di Blog dengan Float juga merupakan Cara Mempercantik Tampilan Blog.

Beginilah Cara Memasang Widget Share Media Sosial di Blog dengan Float.
1. Seperti biasa, bukalah Akun Blog anda sendiri yah.
2. Masuklah ke rancangan / template blog anda pada Tata Letak.
3. Pilih elemen Add Widget atau Tambah Gadget Baru, lalu pilih Add HTML/Javascript.

4. Simpan Gadget yang ditambahkan. Lalu simpan Template blog anda.
5. Selesai dan lihat hasilnya.

Membuat Scrollbar di Posting

Kalau sebelumnya saya membahas tentang bagaiman cara membuat scrollbar di dalam postingan, sekarang kita akan membuatnya pada postingannya langsung.caranya hampir sama dengan triks yang lain ya dengan menambahkan script pada css, jika anda penasaran langsung aja :
1. login terlebih dahulu
2. masuk ke tata letak >> Edit html 
3. beri tanda centang pada Expan Widget Template
4. carilah code seperti berikut:



5. tambah code diatas dengan code berikut::





6.maka hasilnya akan menjadi seperti berikut





7. jika sudah simpan template
8. maka hasilnya akan seperti gambar berikut:




Navigasi Halaman Bernomor/Paging

Setelah lama saya mencari akhirnya dapat juga, jika biasanya pada halaman pada blog sobat hanya ada older post ternyata itu bisa di ganti dengan halaman bernomor seperti gambar berikut:


penasaran bagaiman cara membuatnya, langsung aja :
yang paling penting anda harus login dulu
2. masuk ke tata letak (layout) >> element halaman
3. tambah gedget >> pilih HTML/java script
4. copas dan code berikut:




5. text yang First Last Previous Nextbisa anda ganti dengan tetx seperti: first menjadi home,

next menjadi lanjut, Previous menjadi kembali last menjadi terakhir

6. letakkan di bawah posting blog seperti gambar berikut:


7. simpan template, lihat hasilnya . . .
































sumber:http://devit1104.blogspot.com
Membuat efek bintang bertaburan

Membuat efek bintang bertaburan

  1. Login ke Blog 
  2. Rancangan/TataLetak/Layout
  3. Tambah Gadget
  4. Pilih HTML/Javascrips
  5. Masukkan kode dibawah ini :  

6. Simpan Template,dan jangan beri nama di witged agar tidak merusak tampilan template.
7.  Selesai.
Menghilangkan tanggal pada posting blog

Menghilangkan tanggal pada posting blog

Cara menghilangkan tanggal pada posting blog


1.Login blog
2.Rancangan/Tataletak
3.Edit HTML
4.Lalu cari kode berikut h2.date-header Setelah ketemu,masukkan kode berikut visibility: hidden;
5. Sperti Biasa Jika Sobat merasa kesulitan dalam mencari kode h2.date-header maka segera gunakan jurus Ctrl+F dan letakan kode tersebut
Sehingga menjadi seperti kode dibawah ini :

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;

6. Pratinjau terlebih dahulu,jika sudah tidak ada kesalahan..baru di SAVE

Kategori

Kategori