Cara Memodifikasi Post Untuk Template Galleri
Saya
akan mengulas satu persatu fitur yang ada pada template demo sebelum
nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau
membuat template sendiri dengan modifikasi widget default yang yang
sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi
kali ini adalah Popular Post, sebuah widget yang berfungsi untuk
menampilkan postingan atau artikel mana yang paling banyak diminati para
pengunjung. Secara default widget Popular Post ini sudah menarik karena
sudah ada fitur thumbnail dan summary. Tapi menurut saya sih
kondisional, widget itu bisa langsung dipasang pada blog yang lebih
banyak menggunakan artikel daripada gambar, jika widget default itu
dipasang pada blog yang bertipe gallery sepertinya kurang cocok.
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. Jika anda tertarik, berikut ini cara membuatnya :
DEMO
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. Jika anda tertarik, berikut ini cara membuatnya :
- Login ke Blogger dengan akun Anda
- Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
- Lalu masukkan kode berikut ini diatas ]]></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)}Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
- Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
- Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :
Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
- Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), 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> - Setelah ketemu, ganti dengan kode berikut 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> - Terakhir, save templates lihat hasilnya.
Modifikasi
widget Popular Post dari blogger ini tidak hanya untuk blog gallery
saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti
yang terlihat di sidebar pada blog ini. Demikian tadi tutorial
memodifikasi tampilan Popular Post untuk template Gallery jika masih ada
yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf
kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan
semoga bermanfaat\