GO Blog

Banyak Blogger menyediakan tutorial untuk menyesuaikan widget Populer post standar Blogger dengan CSS. Menurut pendapat saya, widget Popular post dapat membantu pembaca untuk memilih
artikel yang paling tren di blog tertentu. Selain itu, widget Populer post juga dapat disesuaikan agar lebih menarik perhatian dari para pengunjung. Jadi, di sini saya akan memberikan Anda Kode CSS untuk menambahkan widget Populer Posting agar lebih indah dengan efek galeri geser otomatis.

Seperti biasa, Anda dapat melihat screenshot demo yang disediakan di bawah ini untuk widget Populer postnya.


Harap dicatat: widget ini memiliki lebar yang tidak dapat di letakkan dalam kolom sidebar, kecuali sobat bisa mengedit css widget ini. saran saya, buatkan satu kolom widget di bawah header atau footer untuk menempatkannya, namun jika template sobat sudah memiliki kolom tersebut dan memiliki lebar minimal 960px widget ini langsung bisa di gunakan.

langsung saja kita mulai.

1. Buka Blogger Dashboard »Template
2. Backup Template Blogger Anda sebelum melakukan perubahan
3. Klik pada Edit HTML
4. Tekan Ctrl + F dan cari kode di bawah ini ▼

]]></b:skin>

Sekarang copy & paste kode di bawah ini tepat di atas/sebelum ]]> </ b: skin> [gunakan Ctrl + F untuk menemukan kode].

#gallery {
    position: relative;
    margin: 0 35px 20px;
    width: 590px;
    height: 126px;
    background: #ffffff;
}
#gallery .belt {
    position: absolute;
    top: 0;
    left: 0;
    list-style-type: none;
}
#gallery .panel {
    float: left;
    margin: 20px;
    width: 84px;
    height: 86px;
    background: url(http://s23.postimg.org/cgryfolqv/PP_Galllery_Slider_Lab_Strike.png)
    bottom center no-repeat;
    overflow: hidden;
}
#gallery .panel img {
    float: left;
    border: 1px solid #DDD;
    margin: 5px;
    width: 72px;
    height: 72px;
    background: #FFF;
    padding: 0px;
}
#gallery .panel img:hover {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Penting: Jika lebar templat blog anda (960px) sampai 1200px, ubah dimensi popular post css [590px & 126px] dengan lebar: 640px & height: 126px.

Tekan Ctrl + F lagi dan untuk mencari tag  </ head>, lalu copy & paste kode di bawah ini tepat di atas/sebelum tag tersebut. teliti dengan benar jika sobat menggunakan browser google crome.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js'
type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup( {
    galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000;
},
panelbehavior: {
    speed: 500, wraparound:true, persist:true;
},
defaultbuttons: {
    enable: true, moveby: 2,
leftnav: ["http://i48.tinypic.com/rmu550.png", -40, 36],
rightnav: ["http://i50.tinypic.com/161l1n9.png", 2, 36];
},
contenttype: ["external"];
})//]]>
</script>

Ada 2 gambar [ navigasi kiri & kanan ] dalam kode jQuery diatas [warna biru]. Jadi, pastikan untuk meng-upload gambar ini di server Anda sendiri. supaya jika hosting gambar ini dihapus anda tidak menemui masalah, dan punya cadangan. Anda juga dapat mengubah gambar-gambar ini dengan gambar yang Anda inginkan sendiri.

Nah, sekarang saatnya untuk menambahkan Populer posting widget gallary tepat di atas posting blog Blogger Anda, contoh yang saya sertakan. namun jika sobat berkenan di tempat lain monggo silahkan. Cari <b:section class='main' id='main' showaddelement='yes'> ATAU <b:section class='main' id='main' showaddelement='no'> dan sisipkan potongan kode berikut di bawah/setelah kode tersebut.

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='http://s24.postimg.org/hhzch1t7l/blank_image.png'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div>
</b:if>
</b:includable>
</b:widget>

Kustomisasi: Anda dapat menghapus fragmen kode [yang saya beri warna] jika Anda ingin populer posting widget galeri ditampilkan di halaman posting blog Anda juga. Tapi lebih baik untuk menampilkan widget ini di halaman muka blog Anda.

Preview template Blogger Anda dan jika tidak terjadi kesalahan klik Simpan template dan Anda berhasil menambahkan CSS Gaya Populer posting widget ke blog Anda. Silakan berbagi komentar, dan juga menghubungi saya jika Anda menghadapi kesulitan saat berhadapan dengan potongan kode, terima kasih ...!