Cara Membuat Popular Post Keren DI Blog Dengan Rating Bintang dan Bisa Discroll
Cara Membuat Popular Post Keren Di Blog Dengan Rating Bintang - Popular post pada website menunjukkan bahwa artikel yang muncul pada popular post tersebut adalah artikel yang sedang trending di halaman website tersebut.
Untuk katagori populer post tersebut biasanya bisa saja disetting sebagai artikel trending berdasarkan waktu mulai dari tujuh hari terakhir, sebulan hingga selama berdirinya website tersebut.
Dengan adanya popular post tentunya pengunjung dapat mengetahui hal yang sedang banyak dicari oleh pembaca, dan tentunya hal ini akan bisa menarik minat baca pengunjung karena rasa penasarannya.
Jadi, Popular Post pada tampilan halaman blog berfungsi untuk untuk memberikan informasi kepada pengunjung tentang artikel apa saja yang sering dibaca, tentu dapat menarik perhatian pengunjung untuk membaca artikel tersebut.
Berbicara mengenai tampilan, popular post sifatnya fleksibel, dimana anda bisa menyesuaikan tampilan popular post sesuai dengan keinginan anda, misalnya populer post dengan gambar thumbnail disertai judul dan deskripsi, atau popuar post dengan gambar thumbnail disertai judul, atau bahkan ada yang ingin tampilan pupular post simpel dengan hanya menampilkan judul saja tanpa gambar dan juga deskripsi.
Untuk permasalahan seperti diatas semuanya bisa anda set langsung melalui dashbord blogger anda dengan mudah.
cara membuat popular post responsive: Buka dashbord blogger >> Tata Letak >> Tambah Widget >> Popular Post >> Tampilkan >> Silahkan anda centang atau hilangkan centang pada opsi yang menurut anda itu bagus.
Baca juga: Cara Membuat Featured Post di Homepage Blog
Tentu cara diatas merupakan cara default untuk menampilkan popular post pada blogger, dan tampilannya nantinya tentu sangat sederhana atau sesuai dengan bawaan template anda.
Lalu bagaimana jika anda ingin membuat popular post keren dan tampil beda dengan yang lainnya? Hal ini bisa saja anda lakukan sesuka hati.
Saya rasa untuk jenis widget popular post sudah banyak sekali teman - teman blogger yang share, mulai dengan popular post dengan noumbering/ bernomor hingga popular post warna warni sebagaimana yang banyak digunakan pada template Vio magz dan juga Evo magz.
Disini saya tidak mau lagi membagikan hal yang sudah pernah dibagikan oleh teman - teman lainnya, dan pada kesempatan kali ini saya akan mencoba membagikan sebuah widget popular post blogger dengan rating bintang.
Baca juga: Cara Membuat Simbol Ceklis (√) Secara Otomatis Di Setiap Postingan Blog
Ok, apabila anda cari cara membuat popular post dengan rating bintang di blog tentu juga sudah ada yang membagikan, namun disini saya akan memadukan beberapa tampilan widget popular post yang menurut saya itu simple dan cocok diisi dengan rating bintang, berikut screen shoot tampilannya bisa anda lihat pada gambar dibawah ini.
 |
| Cara Membuat Popular Post Keren DI Blog Dengan Rating Bintang dan Bisa Discroll |
Oh ya satu lagi untuk widget popular post yang akan saya bagika disini disamping ada rating bintang juga bisa discroll. Tujuannya adalah meminimalisir penggunaan tempat atau slot widget di sidebar, sehingga apabila berisi slot iklan di sidebar maka akan tetap tidak menggangu, entah berapapu jumlah popular post yang anda tampilkan.
Langsung saja berikut langkah - langkah yang bisa anda lakukan sebagai cara membuat popular post keren di blog.
Baca juga: Kumpulan Widget Populer Post Keren Responsif Untuk Blogger
Cara Membuat Widget Popular Post Dengan Rating Bintang Di Blogger
Bagi anda yang tertarik membuat popular post berisi rating bintang berikut stylish popular post widget for blogger yang bisa anda lakukan seperti langkah dibawah ini:
1. Pertama silahkan anda masuk ke dashbord blogger anda
2. Berikutnya silahkan anda pilih Tema >> Sesuaikan >> Edit HTML
3. Next silahkan anda cari kode /head dan paste kode berikut tepat diatasnya
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>
4. Selanjutnya untuk menerapkan silahkan anda cek terlebih dahulu apakah template anda sudah ada popular postnya apa belum
Apabila sudah ada silahkan anda ganti saja kodenya, biasanya diawali dengan kode .popular-posts tetapi kalau belum ada anda bisa langsung tempatkan script berikut tepat diatas ]]:</b:skin>
/* Popular Post Widget With Star Rating By kubis.online*/
.popular-posts ul{padding-left:0px; font:9px Arial;}
.popular-posts ul li{background:#transparent no-repeat scroll 5px 10px; list-style-type:none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border:1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px}
.popular-posts ul li:hover{border:1px solid #6BB5FF}
.popular-posts ul li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img {border-radius:10px; }
.PopularPosts ul li:before {
font-family: 'Font Awesome 5 Free';
content: "\f005\f005\f005\f005\f005";
display: inline-block;
position: absolute;
color: #F29B10;
text-align: center;
bottom: 0;
right: 0;
margin: 0px 0;
font-size: 6px;
padding: 0;
font-weight: 900;
line-height: normal;
transition: all .3s
}
.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: #000;
font-size: 15.5px;
font-weight: 400;
font-family: sans-serif;
}
.PopularPosts ul li a:hover {
color: #2476e0;
}
.PopularPosts ul li:nth-child(1):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f005";
}
.PopularPosts ul li:nth-child(2):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f5c0";
opacity: .9
}
.PopularPosts ul li:nth-child(3):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f5c0";
opacity: .85
}
.PopularPosts ul li:nth-child(4):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f089";
opacity: .8
}
.PopularPosts ul li:nth-child(5):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f005";
opacity: .75
}
.PopularPosts ul li:nth-child(6):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f005";
opacity: .7
}
.PopularPosts ul li:nth-child(7):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f5c0";
opacity: .75
}
.PopularPosts ul li:nth-child(8):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f089";
opacity: .7
}
.PopularPosts ul li:nth-child(9):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005";
opacity: .75
}
.PopularPosts ul li:nth-child(10):before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f005\f005\f005\f005\f5c0";
opacity: .7
}
/* Popular Post End*/
5. Nah untuk anda yang ingin menampilkan scroll pada popular post maka anda cukup tambahkan script dibawah ini dibagian atasnya
#PopularPosts1 .widget-content{height:300px;width:auto;overflow:auto;}
6. Langkah terakhir silahkan anda Save
7. Selesai
Nah dengan demikian kini di blog anda akan tampil popular post responsive dan keren tentunya enak dipandang serta bisa menarik minat pembaca untuk melihat postingan anda lebih banyak.
Penutup: Demikian ulasan saya kali ini mengenai Cara Membuat Popular Post Keren DI Blog Dengan Rating Bintang dan Bisa Discroll, semoga bisa membantu teman - teman blogger yang ingin membuat popular post keren dan tampil beda. Jangan lupa terus klik Ikuti web ini agar selalu mendapatkan update Tutorial seputar Blogger keren lainnya.
disaya kok tidak muncul ya bintangnya
ReplyDeleteharusnya muncul gan, cuma kembali lagi tergantung ke struktur template yang digunakan
Delete