Pada kesempatan kali ini saya akan memberikan tutorial cara membuat "notice" pada popular post blogger. Sebenarnya memberi notice apapun untuk menunjukkan tingkat kepopuleran postingan pada popular post ini saya pikir tidak penting karena pada dasarnya popular post itu sudah diurut berdasarkan tingkat kepopulerannya. Jadi tanpa memberi tanda apapun pengunjung sudah tau kalau post tersebut adalah yang paling populer.Namun sebenarnya fungsi penambahan notice ini tidak terbatas hanya hanya sampai disitu. Ada fungsi lain yang sangat penting yang mungkin sebagian dari kalian sudah tau, yaitu untuk menarik perhatian. Kalau notice tersebut dibuat semenarik mungkin, pasti pengunjung akan langsung mengklik link ke postingan tersebut. Oke langsung saja kita ke tutorialnya:
Karena disini kita hanya bermain dengan Cascading Style Sheet a.k.a CSS untuk populer post, maka kalian perlu menghapus css populer post kalian yang sudah ada sebelumnya. Dan the most important thing, jangan lupa untuk membackup template kalian...
Disini saya membagi notice dalam empat mode berdasarkan tampilan dan effektivitasnya dalam menarik perhatian. Silahkan copy css di bawah dan pastekan di bawah kode <b:skin>
#1 Mainstream Mode
Pada mainstream mode, penempatan notice hanya terdapat di urutan paling atas. Notice-nya bisa berupa tulisan atau gambar dengan ukuran kecil.
.PopularPosts .item-thumbnail{float:left;margin:0 6px 0 0px;padding:4px 4px 0px;border:1px solid #ddd;display:inline}
.popular-posts img{width:60px;height:60px}
.popular-posts ul li:first-child:after{content:'HOT';position:absolute;font:10px/12px oswald;top:8px;right:0;background:#F9AB1B;color:#fff;padding:0;border-radius:50%;display:block;width:20px;height:20px;line-height:20px;text-align:center}
.PopularPosts .widget-content ul{width:100%;background:#;padding:4px 0px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;margin:0 0px;padding:5px 0px !important;border-bottom:1px solid #ddd}
.PopularPosts .widget-content ul li a{color:#666;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:red;}
.PopularPosts .widget-content ul li:first-child{border-top:none}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
#2 Notice Me Please! Mode
Pada mode alay ini, 3 atau atau bahkan semua urutan diberi notice dengan ukuran kecil.
.PopularPosts .item-thumbnail{float:left;margin:0 6px 0 0px;padding:4px 4px 0px;border:1px solid #ddd;display:inline}
.popular-posts img{width: 60px;height: 60px}
.popular-posts ul li:first-child:after,.popular-posts ul li:nth-child(2):after,.popular-posts ul li:nth-child(3):after,.popular-posts ul li:nth-child(4):after,.popular-posts ul li:nth-child(5):after{content:'';position:absolute;top:8px;right:0;width:30px;height:30px;background-size:30px!important;color:#fff;margin-right:5px;border-radius:5%;display:block}
.popular-posts ul li:first-child:after{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(2):after{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(3):after{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(4):after{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(5):after{background:url(URL GAMBAR)no-repeat}
.PopularPosts .item-title a{display:none!importan;padding-right:40px}
.PopularPosts .widget-content ul{width:100%;background:#;padding:4px 0px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;margin:0 0px;padding:5px 0px !important;border-bottom:1px solid #ddd}
.PopularPosts .widget-content ul li a{color:#666;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:red;}
.PopularPosts .widget-content ul li:first-child{border-top:none}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
#3 Extreme Mode
Pada mode ini, semua urutan diberi notice dengan ukuran yang besar berupa gambar. Noticenya pun tidak tanggung-tanggung, bisa menampilkan gambar gadis-gadis jepang yang sepsy abbuiss.
.PopularPosts .item-thumbnail{float:;margin:0;padding:4px 4px 0px;border:1px solid #ddd;display:block}
.popular-posts img{width:60px;height:60px}
.popular-posts ul li:first-child:after,.popular-posts ul li:nth-child(2):after,.popular-posts ul li:nth-child(3):after,.popular-posts ul li:nth-child(4):after,.popular-posts ul li:nth-child(5):after{position:absolute;right:0;top:5px;content:'';float:right;width:60px;height:60px;background-size:60px!important;margin:5px}
.popular-posts ul li:first-child:after{background:#F9AB1B url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(2):after{background:#F9AB1B url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(3):after{background:#F9AB1B url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(4):after{background:#F9AB1B url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(5):after{background:#F9AB1B url(URL GAMBAR)no-repeat}
.PopularPosts .item-title a{display:none!importan;padding-right:}
.PopularPosts .widget-content ul{width:100%;background:#;padding:4px 0px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;margin:0 0px;padding:5px 0px !important;border-bottom:1px solid #ddd}
.PopularPosts .widget-content ul li a{color:#666;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:red;}
.PopularPosts .widget-content ul li:first-child{border-top:none}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
#4 Extreme Antimainstream Mode
Pada mode yang saya beri nama Extreme Antimainstream ini, notice yang ditampilkan sama seperti notice mode Extreme yaitu notice-nya berukuran besar dan berupa gambar, dan dengan sedikit tricky trik yaitu menyembunyikan thumbnail/gambar asli dari populer post. Jadi seakan-akan notice ini menjadi thumbnail dari populer post ini. Tricky kan :D
.PopularPosts .item-thumbnail{display:none!important}
.popular-posts ul li:first-child:before,.popular-posts ul li:nth-child(2):before,.popular-posts ul li:nth-child(3):before,.popular-posts ul li:nth-child(4):before,.popular-posts ul li:nth-child(5):before{content:'';float:left;width:70px;height:70px;background-size:70px!important;margin-right:8px;border-radius:2%}
.popular-posts ul li:first-child:before{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(2):before{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(3):before{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(4):before{background:url(URL GAMBAR)no-repeat}
.popular-posts ul li:nth-child(5):before{background:url(URL GAMBAR)no-repeat}
.PopularPosts .widget-content ul{width:100%;background:#;padding:4px 0px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;margin:0 0px;padding:5px 0px !important;border-bottom:1px solid #ddd}
.PopularPosts .widget-content ul li a{color:#666;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:red;}
.PopularPosts .widget-content ul li:first-child{border-top:none}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
Note: Pastikan untuk selalu membackup template kalian sebelum mengeditnya!