Membuat Popular Posts Vertikal with Thumbnail Responsive Great!

cara membuat popular post with thumbnail vertikal responsif great for blogger!!

TutorialMixs - Selamat malam sobat blogger, pada kesempatan ini, aku mo coba share kembali bagaimanakah cara membuat Popular Posts dengan image Vertikal.. sungguh widget ini sangat menarik dan sangat pas jika kita tambahkan pada blog kita.. penampilannya yang elegan dengan di tampilkannya juga tool tips di dalamnya..

jika kepingin lihat demonya silahkan kunjungi link berikut

jika berkenan mau memakai widget ini silahkan ikutin tutorial berikut. jadi tutorial ini juga aku adopsi dari webnya mba arlinadzgn.com jadi jika kepeingin mengunjungi langsung ke mbloknya mbak arlina monggo saya persilahkan..

oke langsung saja berikut langkah-langkahnya:
Nb: karena ini sudah masuk pada otak atik script sobat, kalau yang masih pemula seperti saya, silahkan di back-up terlebih dahulu html sobat, kalau yang sudah mahir silahkan abaikan saja himbauan ini.

silahkan masuk di template sobat, lalu klik edit htmlnya
kalau sudah silahkan letakkan kode css di bawah, dan tempatkan pada html CSS (tetapi sebelumnya kode script untuk css Popular Posts yang lama di hapus dulu dan ganti dengan kode berikut yah..)

/* CSS cara membuat popular post image thumbnail vertikal
http://www.arlinadzgn.com/2015/09/widget-popular-post-dengan-3-style.html */
#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:700;font-size:18px;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 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{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 .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 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}
/* CSS cara membuat popular post image thumbnail vertikal end */

setelah kode css pertama di terapkan, lanjutkan ke pencarian kode </body> dengan menekan ctrl-F dan ketik </body>, lalu inputkan kode di bawah ini tepat di atas kode </body>

<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>

lalu save..
selesai sudah untuk langkah edit htmlnya, lalu lanjutkan ke langkah berikut ini
masuk ke Tata-Letak >> Tambahkan Gadget >> Configurasi Entry Populer
atau ikutin langkah image berikut:

Langkah popular post cara2

lalu lanjut ke langkah di bawah ini:

tutorial popular post cara3

untuk langkah image di atas, jika anda menginginkan perubahan sesuai keinginan anda silahkah
dan selesailah tutorial bagaimana cara membuat popular post with thumbnail vertikal ini, semoga menjadi manfaat soobat blogger
terima kasih