Ngalor Ngidul: Dasar

Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

Sabtu, Juni 16, 2012 Kelulut Klanceng 21

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s1600/pop+sc.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz1ASQmJ4Uc8uZ9U3PpW4G5VnjIxuglmP19M2EBby8JdOK7_CzAbBhA1jhTIORnXb4EJs_hdcBSuKXRB8j1BSDtOSSaa_7lmYM4y-hGVKzohxzH9Y2tYnBCAnkzDhniJOrMfP3ouGeus/s320/pop+sc.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery" width="313" /></a></div><div style="text-align: justify;">Setelah sebelumnya pernah membahas <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>, </i>kali ini kita akan mencoba memodifikasi Popular Post dengan Thumbnail Bentuk Grid atau Gallery. Keuntungan dari cara ini adalah kita bisa sedikit menghemat space atau ruang di blog.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Sistem atau <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong> ini sebenarnya sama saja dengan dengan <i><a href="http://realfa84.blogspot.com/2012/01/cara-membuat-popular-post-dengan.html" target="_blank">Cara membuat Popular Post dengan Thumbnail Horizontal</a>. </i>Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Berikut ini adalah Langkah-langkah untuk <strong>Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery</strong>:</div>1. Seperti biasa masuk kedashboard => Design => Edit Html.<br />
2. Cari kode ]]</b:skin><br />
3. Letakkan kode CSS dibawah ini di atasnya.<br />
<blockquote class="tr_bq">.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}<br />
.sidebar .popular-posts ul{margin:0;padding:2px;}<br />
.PopularPosts .widget-content ul li {padding: .1em 0;}<br />
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}<br />
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}<br />
.PopularPosts .item-thumbnail {margin: 0;}<br />
.sidebar .PopularPosts .item-title {display: none;}</blockquote>4. Save template.<br />
5. Kembali ke Dashboard => Design => Add Element.<br />
6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFQoUdhHP1h9RZZmExCwCkaQpI1DNybJ-2KzENUKgpl8M82kl__4Iadvyppk6oHeO_age5HAA7JUb8uVKzrsGbBbGTO6p810Nx7T-hlCI4bLNZnJLRVNbX_8TzgcK99KirnaDTsvM2-c/s1600/popular+setting.PNG" title="Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery" /></a></div><blockquote class="tr_bq">1. Hilangkan ceklist pada snippet.<br />
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.</blockquote></div>

Setelah sebelumnya pernah membahas Cara membuat Popular Post dengan Thumbnail Horizontal , kali ini kita akan mencoba memodifikasi Popular P...