MODIFIKASI POPULAR POST
Pada kesempatan kali ini saya akan membuat tutorial tentang cara modifikasi popular post.
Cara ini bermula saya pikirkan ketika ada seorang teman saya Bernama marno purnomo mengomentari popular post yang saat ini ada pada widget DemoBlogspot,kata teman saya popular post abang Kok Masih standar aja Kenapa G nyoba2 style yang baru.
Trus saya jawab…. Memang masalhnya apa kalau popular postnya Standard…???? Lagipula popular post bukanlah faktor penentu dalam menentuka kualitas Blog atau web.
Nah teman saya malah jawab lagi : ya….. buat gaya gayaan aja bang,kan biar Widgetnya kelihatan lebih Rapi dan dinamis.
saya jawab lagi : Hehhehehehe Cuma Gitu aja....... Entar deh saya nyoba and Makasih juga atas sarannya,
Mungkin Percakapan dengan teman saya sampai di sini aja kali yaa...??
Entar tutoriaL Modifikasi widgetnya G selesai-selasai... hehehhehehe......!!!
Entar tutoriaL Modifikasi widgetnya G selesai-selasai... hehehhehehe......!!!
Kembali ketopik sebelumnya Tentang cara modifikasi popular post. Dan untuk langkah pertama yang harus di lakukan adalah.. :
- Login ke blogger anda
- Masuk ke menu tempalate
- Klik edit HTML dan jangan lupa centang expand widget templates Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atas ]]></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)}
Catatan : untuk tanda yang saya beri warna Merah adalah Tinggi dan Lebar Gambar thumbanil.
- Jika sudah,cari lagi kode yang ada di bawah ini jika tidak ketemu cari yang agak mirip
<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>
- Dan jika sudah ketemu kode yang ada diatas,silahkan anda hapus dan danti dengan kode yang ada di bawah 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>
- Jika sudah selesai mengganti kodenya Simpan template
- Dan langkah untuk selanjutnya adalah masuk ke menu Tata Letak Kemudain Edit pengaturan Gadget popular post seperti pada gambar di bawah ini :
- Setelah itu simpan dan lihat perubahannya pada Blog anda.
Tambahkan Komentar