Cara Memasang Widget Popular Post di bawah Postingan Artikel

Hallo blogger, Apa kabar? Semoga baik-baik saja ya, Pada kesempatan kali ini admin akan berbagi tips ngeblog panduan memasang widget popular post dibawah postingan artikel teman-teman.

Seperti yang kita ketahui widget popular post menjadi salah satu widget yang wajib kamu pasang di blog kamu, Tujuanya untuk memberitahu pengunjung bahwa artikel itulah yang paling banyak dibaca pengunjung sehingga secara otomatis pageview kamu akan bertambah dan jika pageview pertambah penghasilan adsensepun juga bertambah.

Kalau biasanya widget popular post diletakan di samping sidebar, maka kali ini saya ingin memberikan tutorial Cara Memasang Widget Popular Post di bawah Postingan Artikel, Kurang lebih hasilnya akan seperti pada gambar dibawah ini.

Widget popular post dibawah postingan artikel ini sudah 100% responsive, Jika blog dibuka dengan smartphone maka widget popular post akan berubah menjadi dua kolom.

 Cara Memasang Widget Popular Post di bawah Postingan

• Masuk kehalaman dasboard blogger kamu.
• Kemudian pilih Tema >> Lalu Pilih Edit HTML
• Kemudian letakan kode dibawah ini tepat dibawah code ]]></b:skin> atau di atas code </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <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>

• Kemudian kamu hanya perlu meletakan widget poular post tepat di atas code Footer untuk lebih detailnya lihat pada gambar dibawah ini. 
  

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <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 != &quot;&quot;'><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 ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'> <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, &quot;1:1&quot;) : 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>

• Sampai saat ini sebenarnya udah selesai, Namun widget ini nanti hanya akan muncul pada halaman index dan homepage
• Agar widget popular post mau muncul dihalaman postingan kamu hanya perlu menghapus kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'>

• Kemudian hapus juga kode penutup dibawah ini.

</b:if> </b:if>

• Selesai.
• Sumber :Idblanter

Sekian informasi kali ini, Jika ada pertanyaan-pertanyaa silahkan kirimkan pertanyaan kamu di kolom komentar dibawah. Terimakasih telah membaca artikel Cara Memasang Widget Popular Post di bawah Postingan Artikel

Agen Ponsel

Nama Saya Zainul Akbar Saya Lahir Di kota Magetan.Saya hanyalah orang biasa yang menyukai sesuatu yang berhubungan dengan internet dan android.

Share this post

Link will be apear in 15 seconds.

Well done! you have successfully gained access to Decrypted Link.