Cara Membuat Widget Popular Post Dengan Rating Bintang
Cara Membuat Widget Popular Post Dengan Rating Bintang - Assalamualaikum Sobat blogger, kembali lagi dengan saya di Andrie Brader, Sebelumnya saya sempat membagikan Template Masign Free Responsive Material Design Blogger Template. Dan sekarang saya akan membagika tutorial blogger. yaitu Cara Membuat Widget Popular Post Dengan Rating Bintang.
Popular Post merupakan salah satu widget yang sangat berguna untuk menaikan page view pada blog. Dan sekarang saya membagikan tutorial dalam memodifikasi popular post pada blogger dengan tambahan fitur rating bintang keren.
Cara Memasang Popular Post Default Blogger
Namun sebelum membuatnya, kita harus mengaktifkan popular post pada blogger. Caranya :Langkah #1 : Log In Blogger dan menuju ke Dasbor Blogger.
Langkah #2 : Masuk Ke Menu Tata Letak.
Langkah #3 : Klik Tambahkan Gadget.
Langkah #5 : Pilih Popular Post Atau Entri Populer
Langkah #6 : Klik OK.
Cara Memasang Popular Post Dengan Rating Bintang
Setelah kita mengaktifkan popular post. Saatnya kita memodifikasinya. Caranya :Langkah #1 : Masuk Ke Menu Template.
Langkah #2 : Klik Edit HTML.
Langkah #3 : Cari Kode <head>.
Langkah #4 : Setelah ketemu tempelkan kode dibawah diatas kode <head>.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Langkah #7 : Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin atau </style>
/* Popular Post dengan Rating Bintang By Andriebrader.blogspot.com */
.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 solid #F1F1F1}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;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:'\f005\f005\f005\f005\f123';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}
.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}
Itulah Cara Membuat Widget Popular Post Dengan Rating Bintang. Semoga Bermanfaat bagi kita semua. Dan Tunggu Tutorial Blogger lainnya. Sekian..Wassalamualaikum Wr.Wb
wah mantap gan, ini yang ane cari-cari, penginnya sih selain di widget popular post juga di postingannya, hehe
BalasHapusKeren sih, tp script nya cukup panjang. Template gua sendiri dah banyak gua tambahin fitur, jd mungkin gua pk yg biasa aja
BalasHapus