Tapi disini saya akan mencoba membagikannya lagi kepada sobat yang belum tahu cara menerapkannya di blog.
Apa sih manfaat dari menerapkan widget ini? Selain mempercantik tampilan blog (Popular Posts) agar blog terlihat lebih cantik😇 . Ok kita langsung saja sob ke pokok dari pembahasan di postingan saya.
Untuk bisa memberikan atau menampilkannya kalian silahkan ambil code dibawah ini terlebih dahulu
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Cara meletakan code diatas sobat bisa buka blogger > Pilih Tema > Edit Html > Selanjutnya letakan codenya tepat sebelum </head>
Jika sudah selanjutnya kalian gunakan Css dibawah ini untuk menampikan efek rating bintang di popular postsnya
/* 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:'\f005\f005';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:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\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}
Setelah itu kalian letakan code cssnya tepat sebelum </style> atau bisa </b:skin> kemudian simpan kembali template yang sudah kalian edit, untuk melihat hasilnya kalian bisa lihat di blog masing-masing.
Mungkin itu saja dari saya tentang Cara menerapkan Widget Efek Rating Di Popular Posts Blogger selamat mencoba dan semoga bermanfaat.
0 komentar:
Posting Komentar