Halo teman Blanter, sudah lebih dari sebulan aku tidak update postingan di blog ini, beberapa alasan yang menciptakan aku tidak dapat update alasannya ialah dalam sebulan tadi aku sedang berguru untuk mempersiapkan UTS 😏 dan juga menuntaskan pesanan jasa redesign, selain itu ada beberapa project template yang memang masih tahap pembuatan.
Oke, kini kita lanjut ke pembahasan mengenai tutorial cara memasang widget popular post di bawah postingan atau di atas footer, pertanyaan ini beberapa kali sering muncul dalam dialog aku dan juga halaman out of topic, 😄 hambatan yang berdasarkan aku sulit untuk mempublikasikan tutorial ini alasannya ialah untuk menjelaskan posisi tata letak widget masih sulit alasannya ialah setiap template berbeda-beda instruksi dasar. 😕
Jika teman memakai template dengan ukuran wrapper yang berbeda dengan blog ini, maka teman harus menyesuaikan ukuran popular post ini atau dapat juga dengan menambah list dari 6 menjadi 7. Untuk Responsive tentu saja widget ini sudah 100% Responsive, jikalau di smartphone widget ini akan berubah otomatis menjadi 2 kolom.
Tertarik untuk membuatnya? 😀
Langkah Pertama : Masuk ke Blogger > Edit HTML > Letakan instruksi di bawah ini sempurna di bawah instruksi
]]></b:skin> atau di atas instruksi </head><b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style type='text/css'> /* Popular Post Grid by IDBLANTER.COM */ #indexpopular ul li:hover .item-title a{color:#07ACEC!important} #indexpopular ul{margin:0!important;padding:0!important} #indexpopular ul li{width:150px;float:left;height:150px;border-radius:4px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);padding:10px!important;margin-right:10px;margin-bottom:15px} #indexpopular .item-thumbnail{margin:0} #indexpopular img{width:180px;height:100px} #indexpopular .item-title{text-align:center;height:40px;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;float:left;overflow:hidden} #indexpopular h2{text-align:center;background:#07acec;color:#fff;font-family:'Roboto',sans-serif;width:200px;padding:10px;margin:10px auto;text-transform:uppercase;border-radius:3px;font-size:15px} </style> </b:if> </b:if> Langkah Kedua : Sobat hanya perlu meletakan widget popular post di atas instruksi
<footer atau lihat gambar :
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <b:section class='indexpopular' id='indexpopular' maxwidgets='1' showaddelement='yes'> <b:widget id='PopularPosts16' locked='false' title='Popular Of The Week' type='PopularPosts' version='1'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>6</b:widget-setting> <b:widget-setting name='showThumbnails'>true</b:widget-setting> <b:widget-setting name='showSnippets'>false</b:widget-setting> <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 170, "1:1") : data:post.thumbnail' var='image'> <img alt='Popular Posts' border='0' expr:src='data:image'/> </b:with> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div class='clear'/> </b:if> </li> </b:loop> </ul> </div> </b:includable> </b:widget> </b:section> <div class='clear'/> </b:if></b:if> Simpan Template.
Popular Post ini hanya muncul di halaman index dan homepage, semoga muncul di halaman postingan silahkan teman hapus instruksi berikut ini :
dan jangan lupa untuk menghapus instruksi penutupnya.
Popular Post ini hanya muncul di halaman index dan homepage, semoga muncul di halaman postingan silahkan teman hapus instruksi berikut ini :
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'>dan jangan lupa untuk menghapus instruksi penutupnya.
</b:if> </b:if> Lihat Juga : Membuat Grid Recent Post Berdasarkan Label di Blog
Jika ada pertanyaan perihal problem tata letak widget popular post atau cara merubah warna, silahkan corat-coret di kolom komentar. 😁
Itulah tutorial yang dapat aku bagikan kali ini, semoga bermanfaat untuk teman semua. 😊
Sumber https://www.idblanter.com
