Membuat "notice" untuk popular posts

MEMBUAT NOTICE UNTUK POPULAR POST 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.
#1 Mainstream Mode

.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.
#2 Notice Me Please! Mode

.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.
#3 Extreme Mode

.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
#4 Extreme Antimainstream Mode

.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!

Blogger (7)
Disqus

7 komentar

Tulis Komentar

Hahaha .. wah wah saya dapat ilmu baru lagi nih setelah masuk ke blog ini, ijin sedot kang ilmunya :D

Salam kenal ya kang ..

Balas

Silahkan mas, salam kenal juga...

Balas

Nice share kang, tapi mau nyoba takut gagal lagi malah berantakan seperti yang udah2, hehehe...

Balas

"jangan takut untuk mencoba" hayoo ini judul postingannya siapa? kalo berhasil atopun gagal jadikan itu sebagai pengalaman... ♥

Balas

hehe keren juga yah,, nunggu di share yang lainnya ah... :D

Balas

hehe tengkyu kang, stay tune kalo gitu kang :)

Balas

kalo saya si kurang begitu tertarik min, bikin berat ke blog. Vi udah nyoba si. hehee

Balas