Cara Memasang Widget Popular Post Circle Style

Untuk Kesempatan kali ini, saya ingin membagikan bagaimana "Cara Memasang Widget Popular Post Circle Style" di blog. Seperti kita ketahui widget Popular Post salah satu widget wajib yang harus ada di blog, apalagi jika anda ingin mendaftar ke Google Adsense.

Untuk Cara Pemasangannya, silahkan anda ikuti langkah-langkahnya berikut ini : 

• Pertama masuk dulu ke blogger.com
• Lalu pilih Tema
• Klik Edit HTML
• Pastekan kode berikut ini diatas kode ]]></b:skin>

#PopularPosts1 { max-width: 300px} #PopularPosts1 dd { float: left; border-bottom: none; margin: 8px 8px 0 8px; background: none; display: block; padding: 0} #PopularPosts1 img { width:75px;height:75px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;} #PopularPosts1 img:hover { width:77px;height:77px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center; cursor: pointer;-webkit-box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6; -moz-box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6; box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6;}

• Lalu cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>  sampai dengan  </b:widget>
• Hapus kode diatas, lalu ganti dengan kode berikut ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/> </h2> </b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <dd> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/></a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/></a> </div> </div> <div style='clear: both;' /> <b:else/> <!-- (4) Show snippets and thumbnails --> <b:if cond='data:post.thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://3.bp.blogspot.com/-yIv8Rn_rvvA/T6-sigEHCYI/AAAAAAAABvY/BepU32JUC5g/s1600/helperblogger-default-image.jpg' width='60px'/></a> </b:if> </b:if> </b:if> </dd> </b:loop> </ul> <div class='clear' /> <b:include name='quickedit' /> </div> </b:includable> </b:widget>

Jika sudah tinggal anda simpan, lalu lihat hasilnya.

Demikian tutorial kali ini, jika ada masalah silahkan tanyakan di kolom komentar.
Jika artikel ini bermanfaat silahkan share di media sosial milik kalian.