5 Widget Populer Posts Unik Untuk Blogger

Bosan dengan widget popular posts bawaan Blogger? Ikuti tutorial ini untuk mendapatkan widget popular post yang lebih unik, indah dan eye-catching!

5 Desain Unik Widget Popular Posts - Jika Anda menggunakan Blogger sebagai platform untuk blog pribadi atau bisnis, Anda mungkin mencari berbagai cara untuk membuatnya lebih indah dan menarik. Dengan begitu blogAnda  akan lebih unik dan tentu saja eye-catching dan pastinya akan lebih menonjol dari blog-blog lainya. Selain itu, blog yang unik, indah dan eye-catching akan lebih menarik perhatian pembaca blog Anda, ujung-ujugnya akan mendorong mereka untuk terus melihat-lihat, berdecak kagum dan menjadi pembaca dan followers setia blog Anda.

Bagusnya, ada begitu banyak cara untuk mempersonalisasi blog Blogger Anda, salah satunya dengan mendesain widget Popular Posts.

Widget Popular Post memang sudah tersedia pada layout blog Anda, tinggal menambahkan dan terlihatlah widget popular posts namun masih dalam desain yang standar, default atau bawaan dari sononya.

Nah, postingan ini akan menunjukkan bagaimana Anda membuat widget popular post terlihat lebih menarik, unik dan eye-catching.

Pertama, jika Anda belum pernah memasang widget popular post standar blogger, silakan ikuti petunjuknya dibawah ini:

Menambahkan Widget Popular Posts untuk Blogger

Pada dasbor blog, klik menu "Layout", klik "Add a Gadget" dan pilih "Popular Posts". Sebuah popup window akan muncul untuk mengkonfigurasi widget dengan memilih posting yang akan Anda tampilkan (misalnya yang paling banyak dilihat dalam 7 hari, 30 hari terakhir atau dari awal blog). Lalu akan diminta untuk memilih jumlah posting yang akan ditampilkan dan pilih juga apakah Anda akan menampilkan hanya judul posting, menampilkan thumbnail gambar atau juga bersama dengan cuplikan (snippet) artikelnya. (Ingat! setiap widget Popular Post dibawah nanti memiliki persyaratan yang berbeda, jadi ikuti desain dan petunjuknya dengan hati-hati untuk mengetahui apakah Anda memerlukan snippet dan gambar thumbnail atau tidak). Untuk sementara silakan ikuti instuksi pada screenshot dibawah ini.

5 Widget Populer Posts Unik Untuk Blogger

Setelah mengikuti instruksi diatas, akan terlihat versi standar Widget Popular Posts di blog Anda. Anda bisa saja qonaah dengan bertahan dan menerima desain bawaan blogger tersebut jika sesuai dengan selera dan desain blog Anda, namun jika tidak sesuai selera, tidak perlu khawatir karena akan dijelaskan bagaimana cara mempersonalisasi widget popular posts dengan desain-desain yang lebih unik dibawah ini:

Widget Populer Posts Desain 1 (Box within a box)

Desain pertama ini cukup menarik karena menggunakan cuplikan artikel (snippet) dan thumbnail gambar blog dengan cara yang unik. Snippet terlihat dalam teks buram dan ditempatkan dalam kotak kecil transparan. Lantas ditempatkan dalam kotak yang lebih besar, dimana thumbnail gambar blog Anda digunakan sebagai background. Memilih desain Widget Popular Posts satu ini bisa jadi pilihan yang bagus untuk membuat blog Anda terlihat lebih cerah dan menarik perhatian pembaca.

5 Widget Populer Posts Unik Untuk Blogger

CSS code:
[<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>]

Widget Populer Posts Desain 2 (Large thumbnails with small post titles underneath)

Desain kedua ini menggunakan kode yang sama dengan Widget Blogger Popular Posts Dasar dengan beberapa modifikasi tentunya. Desain ini dipopulerkan oleh blog-blog terkenal, desain ini sangat menarik karena berfokus pada gambar, yang tidak hanya merangkum isi tulisan tapi juga menambahkan drama visual ke keseluruhan halaman. Ini sangat berguna untuk blog yang fokus pada fashion, makeup, seni dan topik lainnya yang sangat bergantung pada presentasi visual untuk mengekspresikan ide dengan lebih baik.

5 Widget Populer Posts Unik Untuk Blogger

CSS code:


[<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:&quot;&quot;;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 &quot;Times New Roman&quot;,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 &#39;Oswald&#39;, 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 &quot;Times New Roman&quot;,Times,FreeSerif,serif;}
</style>]

Widget Populer Posts Desain 3 (Colorful boxes)

Jika blog Anda membutuhkan warna yang sedikit menonjol, maka desain ke-3 ini adalah pilihan yang tepat. Desain widget ini menyajikan Popular Posts di beberapa kotak yang menampilkan gambar thumbnail dan memiliki nuansa cerah serta eye-catching seperti warna hijau muda, kuning oker dan jingga yang jelas. Setiap kotak memiliki warna yang berbeda, dan Anda bisa menambahkan hingga empat kotak.

5 Widget Populer Posts Unik Untuk Blogger

CSS code:

[<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 &#39;Oswald&#39;, 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 &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}
</style>]

Widget Populer Posts Desain 4 (Grid layout)

Sama seperti desain widget dengan gambar besar yang pernah popular beberapa waktu kebelakang diantaranya dipopulerkan oleh Pinterest, Grid layout merupakan pilihan cukup baik jika Anda ingin menampilkan gambar saja tanpa snippet, namun jika kursor mouse disorotkan pada gambar maka akan muncul judul artikelnya, menarik bukan?

5 Widget Populer Posts Unik Untuk Blogger

CSS code:

[<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;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 ul li:hover{opacity:1;}.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 .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 &#39;Oswald&#39;, sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}
</style>]

Widget Populer Posts Desain 5 (Numbered posts)

Jika Anda menyukai list dengan penomoran, atau jika Anda ingin membuat blog Anda lebih teratur, maka desain ke-5 ini bisa menjadi pilihan yang tepat. Dengan menggunakan kode untuk desain widget ini, Postingan Populer Anda akan diberi nomor secara otomatis dan akan menampilkan kotak-kotak minimalis bersih yang menyertakan snippet dan thumbnail gambar blog Anda.

5 Widget Populer Posts Unik Untuk Blogger

CSS code:

[<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 &#39;Oswald&#39;, 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:&quot;&quot;;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 &#39;Oswald&#39;, 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 &quot;Times New Roman&quot;,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;}
</style>]

Silakan pilih dari ke-5 desain diatas dan pastikan untuk menyalin kode CSS-nya dan paste pada template blog Anda. 

Caranya?

Setelah menyalin Kode CSS maka masuklah ke dasbor blog Anda, lalu klik "Theme/Template" dan pilih "Edit HTML".

5 Widget Populer Posts Unik Untuk Blogger

Kode CSSnya disimpan di atas kode "</head>" atau "</body>", jadi bacalah petunjuk dibawah untuk mengetahui dengan tepat di mana Anda perlu meletakkan kodenya.

Menambahkan Kode CSS

Saat editor template (Edit Html) dibuka, klik di manapun dalam area kode dan tekan CTRL+F atau Command F untuk mencari kode berikut:

[</head>]

Di atas kode </head>, copy-paste kode CSS dari salah satu desain di atas.

5 Widget Populer Posts Unik Untuk Blogger

Penting: Jika widget Popular Posts terletak di footer blog Anda, hapus .sidebar yang ada di kode CSS agar bisa bekerja.

Perlu diketahui bahwa sebagian besar desain menggunakan font 'Oswald' yang perlu Anda tambahkan ke kode template Anda juga.

Jadi, cari tag ini:

[</head>]
... dan tambahan kode ini  dibawahnya:

[<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>]

Menambahkan JavaScript

Ke-5 desain diatas ini juga memerlukan penggunaan skrip untuk mengubah ukuran gambar Popular Posts/thumbnail dan memangkas snippet serta judul artikel. Untuk menambahkan kode JavaScript, cari tag </body> dan tempelkan script berikut tepat di atasnya:

[<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<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(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>]

Catatan: jika pada template blog Anda sudah memiliki jQuery library, maka hapus yang diberi tanda warna merah.

Setelah Anda menambahkan semua kode di tempat yang tepat, tekan tombol "Save Template" untuk menyimpan perubahan.

Selesai!

Kelima widget Popular Posts untuk Blogger diatas merupakan solusi yang bagus untuk menambahkan desain berbeda nan unik. Masing-masing memiliki tampilan dan karakteristik yang berbeda untuk menentukan apa yang membuat Popular Posts lebih menarik, namun tentu saja hasil akhirnya sama: pengunjung blog akan lebih tertarik mengklik. Cobalah salah satu diantaranya, pilih yang menjadi favorit Anda, dan lihat bagaimana pengaruhnya terhadap kinerja blog Anda.

Semoga bermanfaat!

*Disarikan dari helplogger


COMMENTS

BLOGGER
Name

1 Left Sidebar 1 Right Sidebar 2 Column 2 Right Sidebar 2 Sidebar 3 Column 3 Column footer 4 Column 4 Column Footer Ads Ready Adsense Afiiliasi Belajar Teks HTML Berita dan Informasi Bisnis Internet Black Blog HTML Blog Travel Blogger Template Blogger Tips Blogger Triks Blogger Tutorial Blogger Widget Blogging Blue Bookmark Ready Brown Business Catatan Blogger Catatan Hari Ini Contoh Teks HTML eCommerce Facebook Comment Feedburner Fixed Food FoodBlogger Footer Widget Ready Form Kontak Gallery Game Blogger Template Google Gray Green Hotel Info Kesehatan Komputer Kuliner Kutipan Left Right Sidebar Magazine Mario Teguh Quote Microsoft Movie News Online Store Orange Personal Popular Posts Premium Properti Purple Red Related Posts Religi Review Santai Seo SEO Template Shoutbox Sidebar Slider Ready Software Sport Tahu Ngga? Tekno Template Blog Tips Tips Blog Tutorial Tutorial Blog Pemula Video Website and Internet White Windows Wisata Bandung Wordpress WordPress Convert Yellow
false
ltr
item
Hakimtea.com | Blogger Bandung: 5 Widget Populer Posts Unik Untuk Blogger
5 Widget Populer Posts Unik Untuk Blogger
Bosan dengan widget popular posts bawaan Blogger? Ikuti tutorial ini untuk mendapatkan widget popular post yang lebih unik, indah dan eye-catching!
https://2.bp.blogspot.com/-efk0VPdyl3I/WmQ8LPyxtZI/AAAAAAAARjY/UaJeXyVLZGkGtQvUW_tcw3BkT3gVAjmdQCLcBGAs/s320/5%2BWidget%2BPopuler%2BPosts%2BUnik%2BUntuk%2BBlogger.jpg
https://2.bp.blogspot.com/-efk0VPdyl3I/WmQ8LPyxtZI/AAAAAAAARjY/UaJeXyVLZGkGtQvUW_tcw3BkT3gVAjmdQCLcBGAs/s72-c/5%2BWidget%2BPopuler%2BPosts%2BUnik%2BUntuk%2BBlogger.jpg
Hakimtea.com | Blogger Bandung
http://www.hakimtea.com/2018/01/5-widget-populer-posts-unik.html
http://www.hakimtea.com/
http://www.hakimtea.com/
http://www.hakimtea.com/2018/01/5-widget-populer-posts-unik.html
true
7553029949173842694
UTF-8
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
Blogger Bandung