√5 Tampilan Style Widget Popular Post Blogger

---

Widget Popular Post blogger merupakan salah satu widget blogger yang berfungsi untuk memberikan informasi kepada pengunjung blog tentang artikel blog yang sering dikunjungi atau artikel yang populer yang ada di blog kamu. Selain sebagai widget blog fungsi lain dari widget popular post ini banyak digunakan untuk memperkuat backlink internal.

Popular post banyak digunakan pada hampir semua content management sistem (cms) website blog. Dengan memasang widget popular post kamu bisa menampilkan kepada pengunjung tentang daftar artikel terbaik yang kamu miliki dan artikel mana saja yang sedang trending di blog kamu.

DAFTAR ISI

1. Pendahuluan
1. 1 Apa Itu Widget Popular Post
1. 2 Manfaat Widget Popular Post
1. 3 Kekurangan Widget Popular Post
1. 4 Apakah Perlu Memasang Widget Popular Post ?
1. 5 Konfigurasi Widget Popular Post Blogger
2. Cara Pemasangan Widget Popular Post
3. Pilihan Style Tampilan Widget Popular Post
3. 1 Tampilan Style Image Grid 1
3. 2 Tampilan Style Image Grid 2
3. 3 Tampilan Style Image Grid 3
3. 4 Tampilan Style Image Grid 4
3. 5 Tampilan Style Image Grid 5

#1 Pendahuluan

Widget popular post dapat dimodifikasi sedemikian rupa sehingga tampilan dari widget popular post bisa disesuaikan dengan selera dan tema blog yang kamu gunakan. Pada artikel ini admin codeflare akan berbagi info tentang widget popular post dalam bentuk image grid dengan lima tampilan style yang unik dan menarik. Sebelumnya kita simak sejenak penjelasan tentang widget popular post ini.

1.1 Apa Itu Widget Popular Post ?

Widget popular post blogger merupakan salah satu fitur tambahan yang ada pada platform blogspot yang berguna untuk menampilkan daftar postingan artikel blog berdasarkan jumlah kunjungan yang paling sering diakses/dibaca oleh pengunjung blog tersebut. Daftar artikel populer yang ditampilkan bisa di setel sesuai dengan kebutuhan namun jumlah maksimal yang bisa ditampilkan hanya dibatasi sebanyak 10 artikel.

Pro dan kontra mengenai widget popular post memang kerap terjadi dan sampai sekarang pun masih menjadi perdebatan diantara kalangan blogger, ada yang bilang tidak baik ada pula yang bilang penting. Bagaimanapun juga keputusan untuk menggunakan widget popular post ada ditangan kamu tapi sebelum memutuskan ada baiknya kamu coba bandingkan terlebih dahulu berdasarkan kelebihan dan kekurangan dari penggunaan widget popular post ini.

1.2 Manfaat Widget Popular Post

Pemasangan widget popular post dapat memberikan beberapa manfaat jika digunakan baik, beberapa manfaat antara lain :

• Bisa mengurangi rasio bounce rate halaman blog.
• Bisa meningkatkan trafik blog terutama trafik dari artikel blog yang sedang trending itu sendiri.
• Bisa menambah daya tarik blog jika menggunakan style dengan tampilan unik dan menarik.
• Bisa memberikan informasi tambahan ke pengunjung blog.
• Mampu menambah pengaruh internal backlink.
• Sebagai indikator dari artikel yang disukai atau dicari pengunjung blog kamu.
• Bisa membuat betah pengunjung blog sehingga keberadaan pengunjung blog bisa semakin lama.

1.3 Kekurangan Widget Popular Post

Sesuai dengan hukum alam yang berlaku setiap ada kelebihan pasti ada kekurangan, ada positif adapula negatif, ada yin ada yang dan semua berjalan bersamaan untuk membentuk keseimbangan. Begitu pula dengan widget popular post ini, jika memiliki manfaat (kelebihan) pasti juga akan ada mudharatnya (kekurangannya) dan semua akan dikembalikan pada keyakinan masing-masing individu.

• Jika kamu berfikiran negatif maka kamu akan berburuk sangka terhadap kompetitor blog kamu karena dengan menggunakan widget popular post secara sadar kita akan meng-expose (membuka) artikel mana saja yang memiliki peringkat baik, dengan begitu kompetitor bisa mempelajari struktur artikel kita yang akan digunakan untuk menaikan peringkat artikel dengan topik yang sama yang dimiliki oleh kompetitor. Tapi yang ngga juga sih semua akan balik lagi dengan kualitas dan kreatifitas yang dimiliki oleh masing-masing individu. Walaupun mencontek habis-habisan belum tentu juga bisa terindex dan bisa mendapatkan peringkat.
• Kerugian atau kekurangan ke-dua, admin rasa ga ada.
• Kerugian atau kekurangan ke-tiga, masih sama belum ada.
• Kerugian atau kekurangan ke-empat, sama sampai disini belum juga terfikirkan.
• Admin rasa cuma itu saja sih kekurangannya selebihnya yaa itu lebih banyak manfaatnya ketimbang mudharatnya.

1.4 Apakah Perlu Memasang Widget Popular Post ?

Perlu ga yaa ? mau tau aja apa mau tau banget ? Yaa semua balik lagi dari kebutuhan masing-masing blog, jika blog kamu masih prematur alias masih baru dan kamu hanya memiliki 5 artikel, yaa mungkin belum waktunya untuk menggunakan widget popular post blogger, namun apabila blog kamu sudah memasuki tahap remaja apalagi kalo sudah berumur bangkotan yaa sudah pasti sangat disarankan untuk memasang widget popular post terutama buatan blog codeflare wajib kamu gunakan yaa ! karena setiap widget buatan atau hasil modifikasi blog codeflare sudah tidak perlu diragukan dan ditanyakan, sudah pasti keren, unik, menarik, premium dan fantastis.

Informasi Singkat

---

Konfigurasi Widget Popular Post Blogger

Widget popular post memiliki 4 konfigurasi utama yang bisa kamu sesuaikan dengan kebutuhan. Adapun penjelasan dari masing konfigurasi sebagai berikut.

Paling Banyak Dilihat
Merupakan pengaturan untuk menampilkan postingan artikel popular berdasarkan kurun waktu, yaitu : berdasarkan semua waktu, berdasarkan kurun waktu setahun yang lalu, berdasarkan rentan waktu 30 hari dan berdasarkan rentan waktu 7 hari. Postingan artikel popular akan dievaluasi ulang apabila kurun waktu yang dipilih telah tercapai.

Tampilkan Thumbnail Gambar
Merupakan pengaturan untuk menampilkan gambar ilustrasi artikel. Silakan dipilih untuk diaktifkan jika ingin menggunakan style image grid yang admin berikan pada artikel ini.

Tampilkan Cuplikan
Merupakan pengaturan untuk menampilkan suntingan artikel pada paragraf pertama sampai batas snipet yang sudah ditentukan.

Jumlah Maksimum Postingan
Merupakan pengaturan untuk jumlah postingan artikel populer yang akan ditampilkan, silakan kamu pilih minimal 5 artikel atau sesuai dengan pengaturan yang ingin kamu gunakan.

---

Sumber : Blogger

Widget Popular Post Lainnya :

• Widget Popular Post Blogger Dengan Efek Animasi Slider
• Widget Popular Post Blogger Dengan Efek Animasi 3D Cube

#2 Cara Pemasangan Widget Popular Post

Secara default widget popular post biasanya sudah terpasang di berbagai template standar ataupun template kustom blog, jika belum ada maka cara menambahkan widget popular post cukup mudah. Berikut tutorial singkat untuk pemasangan widget popular post blogspot.

1. Login ke blogspot untuk masuk ke dashboard blog.


2. Pilih Tata Letak kemudian pilih Tambahkan Gadget.
   
   
   
   
   
   


3. Pilih Widget Popular Post.
   
   
   


4. Taruh kotak widget pada bagian yang sudah kamu tentukan, setelah selesai tekan tombol Save.
   
   
   

#3 Pilihan Style Tampilan Widget Popular Post

Langkah selanjutnya adalah memasang style yang sesuai dengan pilihan kamu. Silakan dipasang kode CSS dan Javascript tepat diatas kode </body>.

Pilih style tampilan Widget yang menurut kamu paling sesuai dengan niche dan tema blog yang kamu gunakan. Pada artikel ini admin bagikan 5 style tampilan image grid untuk digunakan pada widget popular post.

Tampilan Style Image Grid 1

<style type='text/css'>
.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;}
.sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}
</style>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});$(".popular-posts").append("<div class='credit-footer'><a href='https://codeflare.net'>Popular-Post Widget v1.00</a></div>");
//]]>
</script>

Tampilan Style Image Grid 2

<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:"";height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px "Times New Roman",Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px 'Oswald', sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px "Times New Roman",Times,FreeSerif,serif;}
</style>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});$(".popular-posts").append("<div class='credit-footer'><a href='https://codeflare.net'>Popular-Post Widget v1.00</a></div>");
//]]>
</script>

Tampilan Style Image Grid 3

<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}
</style>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});$(".popular-posts").append("<div class='credit-footer'><a href='https://codeflare.net'>Popular-Post Widget v1.00</a></div>");
//]]>
</script>

Tampilan Style Image Grid 4

<style>
.sidebar .PopularPosts ul{padding:0;}
.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;}
.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}
.sidebar .PopularPosts ul li{border:none !important;}
.sidebar .PopularPosts ul li{position:relative;box-sizing:border-box;padding:0px !important;width:49%;max-height:120px;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}
.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}
.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}
.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}
.sidebar .PopularPosts ul li .item-content .item-meta{display:none;}
.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px 'Roboto', sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}
.sidebar .PopularPosts .item-snippet{display:none;}
.credit-footer{clear:both;margin:0;padding:5px;font-weight:normal;font-size:10px;color:#fff;background-color:#0083da;text-align:center;letter-spacing:1px;outline:0;}
.credit-footer a{text-decoration:none;color:inherit;}
</style>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});$(".popular-posts").append("<div class='credit-footer'><a href='https://codeflare.net'>Popular-Post Widget v1.00</a></div>");
//]]>
</script>

Tampilan Style Image Grid 5

<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px 'Oswald', sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:"";height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}
.sidebar .PopularPosts ul li .item-content .item-meta{display:none;}
.credit-footer{clear:both;margin:0;padding:5px;font-weight:normal;font-size:10px;color:#fff;background-color:#0083da;text-align:center;letter-spacing:1px;outline:0;}
.credit-footer a{text-decoration:none;color:inherit;}
</style>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});$(".popular-posts").append("<div class='credit-footer'><a href='https://codeflare.net'>Popular-Post Widget v1.00</a></div>");
//]]>
</script>

---

Demikian artikel blog tentang 5 Tampilan Style Widget Popular Post Blogger terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Incoming Search Term

Setelan widget popular post blogger, kumpulan style gambar popular post, tampilan gadget artikel populer blog, kode CSS widget popular post, rekomendasi widget popular post, animasi javascript keren widget popular blogspot, kode html tampilan widget popular post, cara pasang gambar widget popular post blogger, popular post blog, fitur keren popular post, tutorial pasang popular post blogspot