Widget Popular Post Yang Di Modifikasi. Part. 1

Modifikasi Widget Popular Post

Demo 

Banyak cara untuk 'memanipulasi' pengunjung agar mau tertarik untuk berlama-lama mampir lalu buka sana buka sini *smile, misalnya dengan memasang Widget Popular Post lalu memberi judul yang agak lebay-lebay misalnya 'Top Ten', 'Yang Terhot Minggu Ini', 'Rugi Lho kalau Tidak Klik' dst....., ngomongnya makin ngaco heheh..., kembali ke Laptop.  

Sebenarnya Widget Popular Post bawaan blogger sudah cukup menarik karena memakai fitur thumbnail dan summary tapi begitulah kerjaannya para master selalu saja menciptakan hal-hal yang menarik, misalnya untuk tutorial kali ini, Widget Popular Post Yang Di Modifikasi. Part. 1 yang sumber tutorialnya saya ambil dari maskolis sang pencipta template saya. 

Kata maskolis, Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal.  *akhir kutipan

Sebelumnya tambahkan Widget Popular Post dan Setting terlebih dahulu seperti pada gambar dibawah ini.

Berikan centang pada thumbnail dan jangan mencentang snippet, jumlah artikel yang akan ditampilkan terserah sobat batas maksimalnya adalah 10 seperti yg sudah kita ketahui bersama.

Cara membuatnya.

1. Login ke Akun blogger

2. Klik Template

3. Klik Edit HTML

4. Klik Proceed
5. Centang Expand Widget Templates

6. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)

7. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin> 

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none} .PopularPosts ul{padding:5px 0} .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0} .PopularPosts .item-content{position:relative;float:left;margin:0} .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px} .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)} .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden} .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

img{width:110px;height:110px, adalah panjang dan lebar gambar thumbnail silahkan sobat atur sesuai lebar sidebar template.

8. Langkah selanjutnya, Cari kode berikut,  

<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'><li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (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 --> <div class='item-content'> <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 class='item-snippet'><data:post.snippet/></div></div><div style='clear: both;'/> </b:if> </b:if> </li></b:loop> </ul><b:include name='quickedit'/> </div></b:includable></b:widget>

9. Setelah dapat ganti kode tersebut dengan kode dibawah ini,
 

<b:widget id='PopularPosts1' locked='false' title='Most Product View' 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'><li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (3) Show only thumbnails --> <div class='item-content'> <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 --> <div class='item-content'> <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 class='item-snippet'><data:post.snippet/></div></div><div style='clear: both;'/> </b:if> </b:if> </li></b:loop> </ul><b:include name='quickedit'/> </div></b:includable></b:widget>

10. Kik Pratinjau, kalau tidak terjadi kesalahan lalu klik save template dan lihat penampakannya.