Setiap blog harus memiliki widget Post Populer untuk menunjukkan posting dengan tampilan terbaik dari sebuah blog kepada pengunjungnya. Sebenarnya populer post itu tidak harus menggunakan css dan mengutak-atik HTML, kamu cukup menambahkan melalui layot selesai, Tapi populer post yang anda tampilan akan terasa biasa saja, sedangkan jika kamu menambahkan CSS maka populer post anda akan terlihat unik, Mungkin ini akan menarik untuk pengunjung blog anda.
Kali ini saya akan membagikan, 3 style css yang bisa merubah popular post di blog kamu akan terlihat sangat keren dan unik. Style ini menggunakan Font Awesome, jadi untuk menambahkan style populer post yang unik ini, kamu harus menambahkan code Font Awesome terlebih dahulu, dibawah ini akan menjelaskan step by step dengan lengkap.
Fitur Widget
- Font Awesome icons used
- Orange Star Rating added
- 3 different color varients
- Easy to install and maintain
- Unique font
Cara Menambahkan Populer Post Berbintang di Blogspot.
Langkah 1: Buka Dasbor Blogger> Template> Edit HTML
Langkah 2: Selanjutnya masukan/paste code Font Awesome di bawah tepat di atas tag </head>.
[<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>]
Langkah 3: Setelah selesai paste Font awesome selanjutnya, Cari code ini ]]> </ b: skin> atau </ style> dan pastekan kode di bawah ini sama persis seperti di atas (Silahkan pilih desain CSS sesuai pilihan anda Terserah)
Style CSS 1
[/* Popular Post */.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)} .PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005';opacity:.75} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}]
Style CSS 2
[/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005f006f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005f006f006f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005f006f006f006f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}]
Style CSS 3
[/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}]
Langkah ke 4: Jika sudah, Simpan template lalu, Silahkan masuk ke layout> Add a Gadget> Add Popular Post> Save. Selesai sekarang tinggal lihat hasilnya.
No comments:
Post a Comment