Membuat Widget Perlabel Image Thumbnail Di Blog

DEMO SHOW

Membuat Widget Perlabel Image Thumnbnail Di Blog | kali ini saya akan coba membagikan sedikit pengetahuan saya dalam dunia blogging.
saya sendiri belajar blogging baru-baru ini jadi pengetahuan saya tentang blog atau ngeblog masih sangat minim. nah untuk tutor kali ini saya dapatkan dari seocips.com. di sini saya akan coba membagikannya lagi. tutorial yang saya dapatkan. berminat untuk memasangnya di blog kamu???????, jika berminat silahkan ikuti tutorialnya di bawah ini.

Membuat Widget Perlabel Image Thumbnail Di Blog

1. Masuk ke Blogger>Tema>Edit Html Pastekan CSS berikut tepat sebelum kode ]]><b:skin>atau</style>Untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

pada keyboard kamu


img.label_thumb{ float:left; padding:5px; border:1px solid #8f8f8f; 
background:#D2D0D0; margin-right:10px; height:55px; width:55px; } 
img.label_thumb:hover{ background:#f7f6f6; }      .label_with_thumbs { 
float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; 
adding: 0; } ul.label_with_thumbs li { padding:8px 0; min-height:65px; 
margin-bottom:10px; } .label_with_thumbs a {} .label_with_thumbs strong 
{}

Selanjutnya silahkan kamu pastekan Script di bawah ini tepat sebelum kode </head>

 <script src='https://cdn.rawgit.com/Brando07/share/newbe/perlabel-SEOCIPS.js' type='text/javascript'></script>

Silahkan kamu Simpan Tema/Save

Memasang Widget Perlabel Image Thumnbnail Di Blog

Untuk memasang widget ini kamu bisa menampilkannya di mana saja, misalkan pada area Sidebar ataupun Footer itu terserah kamu, dengan posisi yang cukup menarik bagi kamu, biasanya widget ini populernya di pasang pada bawah area postinga homepage.
oky untuk memasangnya silahkan kamu ikuti tutorialnya di bawah ini.
1. Masuk terlebih dahulu ke menu Tata Letak blogger
2. Pilih Tambahkan Widgte/Gadget > Html, lalu masukan Html di bawah ini pada area Html widget tadi.

<div style="overflow:hidden; width:100%px; height:auto; padding:10px;
 border:1px dotted #ddd; background-color:#fff"><script 
type='text/javascript'>var numposts = 4;var
 showpostthumbnails = true;var displaymore = false;var displayseparator =
 false;var showcommentnum = false;var showpostdate = false;var 
showpostsummary = true;var numchars = 50;</script><script 
type="text/javascript" src="http://www.iddzgn.blogspot.com/feeds/posts/default/-/Widget%20Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>

Ganti Link yang saya beri tanda dengan link blog kamu untuk menampilkan widget tertentu silahkan kamu ganti Widget%20Blog dengan label widget yang ingin kamu tampilkan.

Terakhir silahkan kamu klik Save/Simpan
oky mungkin itu saja untuk tutorial kali ini. sampe ketemu lagi di lain waktu