Senin, 30 Mei 2016

Cara Membuat Widget Popular Posts Blogger Dengan Efek Rating Bintang

   Popular Posts Widget merupakan salah satu widget Blog yang paling banyak digunakan oleh Setiap Blogger Blogs. Widget Popular Posts digunakan untuk memberikan Informasi mengenai Postingan Terpopuler yang paling banyak dibaca oleh SiPengunjung sehingga dapat menarik Pengunjung lainnya untuk membacanya.

  Sepertinya untuk menambahkan Widget Popular Posts ini tidak perlu saya jelaskan, Karena anda pasti sudah mengetahuinya. Yang ingin saya bagikan kali ini adalah Cara Menambahkan Efek Rating Bintang pada Widget Popular Posts. Contohnya bisa anda lihat pada Gambar dibawah ini.


Cara Membuat Widget Popular Posts Blogger Dengan Rating Bintang Menggunkan Font Awesome


  Seperti Pada Judul diatas, untuk membuatnya, pastikan anda sudah memasang Font Awesome pada Blog anda. Cara bisa dengan menerapkan Css External berikut dibawah kode <head> atau diatas kode </head>.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


  Berikut ini cara Pemasangannya :

1. Masuk Menu Template
2. Pilih Edit Html
3. Tambahkan Css berikut diatas Kode ]]></b:skin> atau </style>
Untuk menghindari bentrok, Silahkan hapus terlebih dahulu Css Popular Posts sebelumnya yang sudah anda pasang pada Blog anda.

/* 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}


4. Save (Simpan) Template.
5. Selesai.

Sumber : http://www.arlinadzgn.com/2016/01/memberikan.rating.bintang.di.widget.popular.post.html

Lorem ipsum dolor sit amet, mea prompta intellegam in, mutat doming apeirian pro an. Solum explicari vix te. Et dicant aperiri consequat usu, utamur diceret postulant sit cu.

Silahkan berikan komentar anda sesuai dengan postingan diatas.
EmoticonEmoticon