Popular Posts dengan Satu Gambar Thumbnail Keren - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Popular Posts dengan Satu Gambar Thumbnail Keren, saya telah menyediakan Tutorial Blog lengkap seperti Popular Posts dengan Satu Gambar Thumbnail Keren . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

Cara Membuat Widget Popular Posts dengan Satu Gambar Thumbnail Keren.

SEBELUMNYA CB sudah share beberapa tampilan atau desain widget Popular Posts keren lainnya. Kali ini CB share lain model popular post atau posting terpopuler laiinya seperti gambar berikut ini:

Live DEMO

Keren 'kan? Popular post di atas menampilkan satu gambar thumbnail. Lainnya judul doang, namun dipercantik juga dengan angka (nomor).

Cara Pasang Popular Posts dengan Satu Gambar Thumbnail Keren

Begini cara memasang Popular Posts dengan Satu Gambar Thumbnail Keren di sidebar blog Anda dengan desain tampilan seperti di atas.

1. Template > Edit HTML

2. Copas kode berikut ini di atas kode ]]></b:skin>

#PopularPosts1 h2{background:#3b5998}
.PopularPosts .widget-content{padding:0;box-sizing:border-box}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:#1a1a1a}
.PopularPosts .widget-content ul li{margin:0;padding:10px 0 10px 60px;position:relative;overflow:hidden;border-top:1px solid #fafafc}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:15px;font-weight:400}
.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}
.PopularPosts .widget-content ul li img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}
.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}
.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0,0,0,.7);z-index:1}
.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}
.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}
.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}
.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fff;font-size:38px;line-height:1;z-index:2}
.sidebar .PopularPosts .item-title a{color:#fff;text-decoration:none}
.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}

3. Pasang kode JavaScript berikut ini di atas </body>
Kode ini harus dipasang agar gambar thumbnail-nya tidak buram (blur).

<script type='text/javascript'>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(//s72-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('PopularPosts1', 300);
//]]>
</script>

4. Save Template!

5. Silakan centang image thumbnail di widget populer post Anda untuk menampilkan gambarnya. 

Demikian cara memasang atau menampilkan Popular Posts dengan Satu Gambar Thumbnail Keren.

Good Luck & Happy Blogging! (www.contohblog.com).*

Demikianlah Artikel Popular Posts dengan Satu Gambar Thumbnail Keren

Sekian Tutorial dari Blogrenanda Popular Posts dengan Satu Gambar Thumbnail Keren, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

Popular Posts dengan Satu Gambar Thumbnail Keren

Anda sedang membaca artikel Popular Posts dengan Satu Gambar Thumbnail Keren dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2017/01/popular-posts-dengan-satu-gambar.html Semoga artikel ini bisa bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: