3 Widget Popular Post Dengan Satu Gambar

3 Widget Popular Post dengan Satu Gambar - Berbicara widget terkenal post ini memang tidak ada habisnya, para pendesain blog menyulap widget terkenal post menjadi lebih unik dan menarik. Salah satu Widget Entry Popular Post yang unik dan menarik perhatian yakni Widget Popular Post dengan Satu Gambar.

Widget ini menampilkan satu gambar atau thumbnail besar artikel terkenal kau disertai dengan judul postingan, tampilan popular post ini sangat menarik, kemungkinan yang terjadi artikel tersebut dapat menjadi sentra perhatian para pengunjung setia Blog kau untuk membuka halaman artikel tersebut.

Terkait :

Untuk kau yang tertarik ingin memasang widget Popular Post ini, kau dapat mengikuti panduannya di bawah ini step by step. Langsung saja ke topik inti yakni tutorial pemasangan ke-2 Widget Popular Post dengan Satu Gambar ini.

Langkah Pemasangan 1

1. Login ke akun Blogger memakai email dan kata sandi kamu
2. Setelah berhasil masuk kedashbord blog, kau pilih Layout/Tata letak
3. Kemudian klik tambah gadget
4. Langkah selanjutnya, kau pilih Entry Popular

5. Klik tombol simpan

Setelah widget berhasil di buat, langkah berikunya yaitu menambahkan instruksi ke dalam template kamu.

Langkah Pemasangan 1 (pemasangan kode)

Widget Popular Post dengan Satu Gambar 1

1. Masih keadaan login di akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.

<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

4. Tahap berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.

/* Popular Post One Image1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.2em;font-weight:700; background-color: rgba(32, 32, 32, 0.77);width: 173px;height: 50px;padding: 10px 24px;color:#fff}

5. Simpan Template

Hasil dari instruksi diatas

Widget Popular Post dengan Satu Gambar 2

1. Login ke akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.

<script type='text/javascript'>
//<![CDATA[
var newidth=295;var neweight=170;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

4. langkah berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.

/* Popular Post One Image2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px;width:100%}
.PopularPosts .item-thumbnail{margin:0;border:4px double #ddd;}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;font-weight:400;font-size:14px;}
.PopularPosts .item-title a:hover{color:#FCA13A}
.PopularPosts .item-snippet{font-size:14px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px solid #ddd}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:170px;margin-bottom:10px;font:13px Arial;width:100%;}
.PopularPosts img{padding:0;height: 130px;width: 100%;}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0;list-style-type: none;}

5. Simpan Template

Hasil dari instruksi diatas

Widget Popular Post dengan Satu Gambar 3

1. Login ke akun Blogger
2. Silahkan kau pilih Tempalte, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body>, copy script di bawah ini dan pastekan diatasnya.

<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

4. Berikutnya, kau cari kode ]]></b:skin>, kemudian kau salin instruksi di bawah ini dan pastekan diatasnya.

/* Popular Post One Image3 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}

Hasil dari instruksi diatas

Silahkan kau pilih salah satu terkenal post yang kau sukai, untuk dipasangkan di blog atau web kamu. Demikian tutorial cara menciptakan widget popular post dengan satu gambar, sekian dari saya Happy Blogging.

Sumber http://www.websiteedukasi.com/