Cara Buat Artikel/Popular Post-Gambar/Thumbnails di Blog

Cara Buat Artikel / Popular Post dengan Modifikasi Gambar / Thumbnails sendiri di Blog Mas Bos, yang dapat berganti-ganti setiap hover cursor / kursor menempel / mengarah ke Judul Posting / Link Post. Hal ini juga cukup mempercantik tampilan pada blogger/website Mas Bos yang senag dengan utak-atik kode HTML khususnya para pembuat jasa website.

Bukannya bermaksud menggurui, hanya ingin berbagi keindahan dalam tampilan website kita, yang saya pakai di blog ini pada bagian sidebar.




Langsung saja ke langkah-langkah dibawah ini :

1. Login ke blogger.com ID Mas Bos.

2. Klik Template » Edit HTML » Lanjutkan » Centang Kotak Expand Template Widget .

3. Masukkan kode HTML sebelum / diatasnya kode : ]]></b:skin>

Gunakan Ctrl + F untuk mempercepat pencarian dan meletakkan kode di bawah ini :

<style>
.popular-posts ul {padding-left:0px;}
.popular-posts ul li {background:#1D1E28 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgg2E5kNM0KIP15NcBtZ_JJ5gEneJT5IhxriU-m5jsKaaCe9O1kZXJc4U7Scr3ELJBU-viWzrtrMq9k301VfIAS3Oxx2DIqymbJdPj2-Fk35erKjuD_yLYCmMZDj1RNEe-VAaoQ2J5bug/s1600/rb+cancel+icon...jpg) no-repeat scroll 3px 5px;
list-style-type: none;font-size:9.5px;color:#F0E68C;text-align:justify;line-height:1.04em;
margin: 0 0 5px 0px; margin:5px;
padding: 5px 5px 5px 35px !important;
}
.popular-posts ul li:hover {
background:#1D1E28 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUKbhLhgUBzufZAvtk0LXCJLrdcF2K7OwRv0XcBfbuNTDsNoje8HKEZAaI-mb0Ll_6cU8Mosv2wwA6Bhk8ks0g7rQbB-M94Czs0ZXkDh-IxclzhvEbXbd47OPjkQV6CNXCGcjELATc3o/s1600/rb+mark+icon...jpg) no-repeat scroll 3px 5px;
}
.popular-posts ul li a:link {font-size:11.5px;align:left;line-height:1.06em;
text-decoration:none;
}
</style>

Keterangan : Pada tulisan berwarna merah diatas dapat Mas Bos ganti/rubah dengan pilihan Logo/Gambar/Avatar/Thumbnails karya sendiri yang telah di upload pada bawaan Blogger.com / pada posting di bawah judul, sebelah kanan persis tulisan "Link" atau upload di imgur.com free/gratis tanpa login.

4. Selanjutnya klik Tata Letak » Tambahkan Gadget » HTML/JavaScript

5. Masukkan kode HTML di bawah ini :

<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol style="text-transform: capitalize;">');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2Fhttp://tutor26.blogspot.com&num=10" type="text/javascript"></script>

Keterangan : untuk angka yang berwarna merah dapat diganti/dirubah diatas, dapat pula dirubah pada seting no.6.
6. Sekali lagi klik Tata Letak » Tambahkan Gadget » Entri Populer dan edit pilihan sesuai selera Mas Bos.
7. Lalu klik "Simpan" untuk no.3, 5 dan 6.
8. Silahkan ber-Do'a dan lihat hasilnya.

Semoga bermanfaat (",)

Kembali ke Menu Tutorial Blogspot