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.
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.
CSS code:
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.
CSS code:
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.
CSS code:
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?
CSS code:
Widget Populer Posts Desain 5 (Numbered posts)
Menambahkan JavaScript
Catatan: jika pada template blog Anda sudah memiliki jQuery library, maka hapus yang diberi tanda warna merah.
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.
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.
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.
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:"";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>]
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.
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 '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>]
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?
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 'Oswald', 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.
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 '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;}
</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".
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.
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