Widget popular post merupakan salah satu widget yang cukup penting perannya dalam sebuah blog dan sangat disarankan oleh google. Widget ini akan menampilkan daftar postingan yang paling banyak dilihat oleh pengunjung yang bisa diurutkan berdasarkan 7 hari terakhir, 30 hari terakhir, dan setiap saat.
Berikut ini desain Popular Post lainnya, termasuk yang admin pasang sekarang ini. Cara pasangnya mudah, tinggal copy paste salah satu kode css posting terpopuler.
Berikut cara penerapannya :
- Buka blogger > template > edit HTML > kemudian cari kode ]]></b:skin> di template anda, dengan menekan ctrl+f, Contoh :
Berikut macam-macam style popular post :
1. Style 1
#PopularPosts1 ul{list-style-type:none;margin:0;padding:0}#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display:block;transition:all .3s ease-in-out}#PopularPosts1 ul li{padding:7px!important;margin:0;list-style:none;border-bottom:1px solid #fafafc;font-size:11px;line-height:normal}#PopularPosts1 ul li:first-child{border-top:none}#PopularPosts1 ul li:last-child{border-bottom:none}#PopularPosts1 a:link,#PopularPosts1 a:visited,#PopularPosts1 a:active{font-size:13px;color:#555!important;display:block;font-weight:700;padding:0!important;margin:0!important;line-height:1.4em}#PopularPosts1 a:hover{color:#B80103!important;text-decoration:none}.PopularPosts h2{padding:5px 0}.popular-posts ul{padding-left:0;counter-reset:trackit}.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}.PopularPosts li:first-child{border-top:1px solid #f0f0f0}.PopularPosts li:nth-child(odd){background:#f5f5f5}.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}.widget.PopularPosts{padding:1.2em 0!important}2. Style 2
#sidebar .PopularPosts h2{padding:0;margin:0 0 10px}#sidebar .popular-posts ul{padding-left:0;counter-reset:trackit}#sidebar .popular-posts ul li{border-bottom:1px solid #999;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}#sidebar .PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 0;font-size:20px;font-weight:bold;color:#ffffff;float:left;margin-right:10px}#sidebar .PopularPosts li:first-child{border-top:1px solid #000000}#sidebar .PopularPosts li:nth-child(even){background:#2C87F0}/*define background color for even number lists*/#sidebar .PopularPosts li:nth-child(odd){background:#000000}/* define background for odd number lists */#sidebar .PopularPosts .item-thumbnail{display:true!important},#sidebar .PopularPosts .item-snippet{display:true!important}/* Hides Thumbnail and Snippet */#sidebar .PopularPosts a,#sidebar .PopularPosts a:hover{color:#ffffff!important;font-size:.9rem}#sidebar #PopularPosts1 li{padding-right:1em!important;padding-left:1em!important;margin:0}#sidebar .widget.PopularPosts{padding:1.2em 0!important}3. Style 3
#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}#PopularPosts1 ul li:first-child { border-top:none; }#PopularPosts1 ul li:last-child { border-bottom:none; }#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #2b2b2b !important; display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}#PopularPosts1 a:hover {color: #B80103 !important; text-decoration: none;}.PopularPosts h2{padding-right:.4em;padding-left:1em}.popular-posts ul{padding-left:0;counter-reset:trackit}.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}.PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 10px;font-size:20px;font-weight:bold;color:#F66;float:left;margin-right:10px}.PopularPosts li:first-child{border-top:1px solid #f0f0f0}.PopularPosts li:nth-child(odd){background:#f5f5f5}.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}/* Hides Thumbnail and Snippet */.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}.widget.PopularPosts{padding:1.2em 0em !important}4. Style 4
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:72px;display: block;transition:all .3s ease-in-out}#PopularPosts1 ul li {padding:8px 0 4px !important;margin:0; list-style: none; border-bottom: 1px solid #fff;font-size:12px;line-height: normal;}#PopularPosts1 ul li:first-child { border-top:none; }#PopularPosts1 ul li:last-child { border-bottom:none; }#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #000000 !important; display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.2em}#PopularPosts1 a:hover {color: #B80103 !important; text-decoration: none;}.PopularPosts h2{padding-right:.4em;padding-left:1em}.popular-posts ul{padding-left:0;counter-reset:trackit}.popular-posts ul li{border-bottom:1px solid #fff;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}.PopularPosts ul li:before{content:counters(trackit,".");padding:5px 10px 15px 10px;font-size:18px;font-style: italic;font-weight:bold;color:#fff;float:left;margin-right:10px;border:1px solid #B80103;width:10px;height:10px; border-radius:100%;background: #d20000;display: block;}.PopularPosts li:first-child{border-top:1px solid #fff}.PopularPosts li:nth-child(odd){background:#fff}.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}.PopularPosts a:link,.PopularPosts a:visited {color:#2b2b2b;font-size:.9rem}.PopularPosts a:hover{color:#c00}#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}.widget.PopularPosts{padding:1.2em 0em !important}Fungsi Popular Posts
Popular posts berfungsi sebagai navigasi menu dan internal link yang bagus buat blog dan dianjurkan oleh Google. Dengan internal link, blog kita jadi User Friendly.