Setelah sebelumnya kita membahas tentang Cara Membuat Widget Jadwal Rilis Anime di Blog
kali ini postingan saya akan membagikan teknik Cara menerapkan Widget Efek Rating Di Popular Posts Blogger untuk sebagian blogger tentu sudah tidak asing lagi dengan widget ini, karena tentu sudah banyak juga yang membagikannya di luar sana.
Saya akan coba menulis lagi bagi teman teman yang belum tahu cara menerapkannya di blog ini.
Cara menerapkan Widget Efek Rating Di Popular Posts Blogger
Kegunaan dari widget ini selain mempercantik tampilan blog (Popular Posts) agar blog terlihat lebih keren. Baiklah langsung saja kita ke pokok dari pembahasan di postingan ini.
Untuk bisa membuatnya atau menampilkannya silahkan kalian ambil kode dibawah ini terlebih dahulu
Untuk cara meletakan code diatas sobat bisa buka blogger > Pilih Tema > Edit Html > Selanjutnya letakan codenya tepat sebelum </head>
Apabila sudah selesai selanjutnya kalian gunakan Css dibawah ini untuk menampikan efek rating bintang di popular postsnya
Kemudian kalian letakan kode cssnya tepat berada sebelum </style> atau bisa </b:skin> lalu simpan kembali template yang sudah kalian edit, untuk melihat hasilnya kalian bisa lihat di blog masing-masing.
Demikian tulisan kali ini, mengenai Cara menerapkan Widget Efek Rating Di Popular Posts Blogger selamat mencoba dan semoga sukses.
kali ini postingan saya akan membagikan teknik Cara menerapkan Widget Efek Rating Di Popular Posts Blogger untuk sebagian blogger tentu sudah tidak asing lagi dengan widget ini, karena tentu sudah banyak juga yang membagikannya di luar sana.
Saya akan coba menulis lagi bagi teman teman yang belum tahu cara menerapkannya di blog ini.
Kegunaan dari widget ini selain mempercantik tampilan blog (Popular Posts) agar blog terlihat lebih keren. Baiklah langsung saja kita ke pokok dari pembahasan di postingan ini.
Untuk bisa membuatnya atau menampilkannya silahkan kalian ambil kode dibawah ini terlebih dahulu
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>Untuk cara meletakan code diatas sobat bisa buka blogger > Pilih Tema > Edit Html > Selanjutnya letakan codenya tepat sebelum </head>
Apabila sudah selesai 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}Kemudian kalian letakan kode cssnya tepat berada sebelum </style> atau bisa </b:skin> lalu simpan kembali template yang sudah kalian edit, untuk melihat hasilnya kalian bisa lihat di blog masing-masing.
Demikian tulisan kali ini, mengenai Cara menerapkan Widget Efek Rating Di Popular Posts Blogger selamat mencoba dan semoga sukses.
EmoticonEmoticon