Membuat popular Post Dengan Thumbnail Keren

Widget popular post kali ini menurut saya cukup keren, awalnya bentuk popular post ini disediakan dan sudah diterapkan dibanyak template AM...

https://nandanetwork.blogspot.com/2017/10/membuat-popular-post-dengan-thumbnail.html

Widget popular post kali ini menurut saya cukup keren, awalnya bentuk popular post ini disediakan dan sudah diterapkan dibanyak template AMP. Dan beberapa waktu lalu, arlinadzgn Menerapkannya ditemplate baru miliknya yaitu "Simplify premium v4", Widged popular post ini menampilkan gambar postingan selain itu yang membuatnya menjadi tampak lebih keren adalah juga memberikan efek Hover yang responsive.

Kemudian, widged ini menampilkan tampilan yang bagus dan enak dilihat oleh para pengunjung dan mungkin mereka bisa betah dengan tampilan ini.
Untuk membuat widged popular post ini cukup mudah, berikut tutorial membuat popular post widget keren dengan thumbnail dan efek hover responsive.

Cara membuat popular post dengan thumbnail responsive

1. Masuk Ke Template > Edit HTML 
2. Cari kode </style> atau ]]></b:skin> kemudian  tempelkan kode dibawah ini tepat diatas kode tersebut

/* CSS Popular Post Thumbnail */
#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img {
    width: 318px;
    height: auto;
}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail {
    margin: 0px;
    width: 103%;
    height: 180px;
    overflow: hidden;
    display: block;
}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

3. Kemudian copy kode dibawah ini dan letakkan tepat diatas kode </body>
 <script type='text/javascript'>
//<![CDATA[
// Popular Post Thumbnail
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina 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,130)});
//]]>
</script>

4. Dan Simpan Template

Langkah selanjutnya ialah memasang widget popular post tersebut diblog, caranya
1. Buka Tata Letak > Add new widget > Tambahkan widget popular post dan lakukan Setting seperti gambar dibawah

Kemudian Save dan lihat blog anda.

Mudah bukan? jika ada pertanyaan jangan lupa sampaikan semoga saya bisa membantu. Terimakasih dan jangan lupa untuk follow blog ini untuk mendapatkan tutorial menarik lainnya segera Dan share kepada teman-teman anda.

COMMENTS

BLOGGER: 2
Loading...
Nama

APK,2,Auto visitor,1,BackLink,3,Blog,52,Blogger,28,Browser,13,Eng,7,Feature,1,Font Awesome,1,Gadget,4,Ind,44,Info,40,Internet,7,JQuery,8,Layanan,5,Motifasi,7,News,9,Online Money,2,Pendidikan,2,Pengelolaan,8,Plugin,3,Review,3,SEO,31,Template,9,Tips,30,Tutorial,43,Video,2,Widget,9,
ltr
item
Nanda Network: Membuat popular Post Dengan Thumbnail Keren
Membuat popular Post Dengan Thumbnail Keren
https://3.bp.blogspot.com/-KEP_Jq0kpK4/WMpoj02MMjI/AAAAAAAACXo/c1QjWkT2ue0gIdapcOPqKp5UcVSeNO99QCLcB/s640/Cara%2BMembuat%2BPopular%2BPost%2BDengan%2BThumbnail.png
https://3.bp.blogspot.com/-KEP_Jq0kpK4/WMpoj02MMjI/AAAAAAAACXo/c1QjWkT2ue0gIdapcOPqKp5UcVSeNO99QCLcB/s72-c/Cara%2BMembuat%2BPopular%2BPost%2BDengan%2BThumbnail.png
Nanda Network
https://www.nandanetwork.com/2017/10/membuat-popular-post-dengan-thumbnail.html
https://www.nandanetwork.com/
https://www.nandanetwork.com/
https://www.nandanetwork.com/2017/10/membuat-popular-post-dengan-thumbnail.html
true
772157882416128223
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy