Sunday, May 19, 2019

Cara Membuat Widgets Popular Post dengan Mudah

Sunday, May 19, 2019

Cara Membuat Widgets Popular Post dengan Mudah

Hai sahabat blogger,postingan artikel kali ini adalah bagian dari pengembangan Situsblog saya di mana anda akan belajar cara membuat widgets di sidebar blog.langkah lengkap demi langkah panduan Tutorial dasar untuk pemula, cara membuat widgets di blog.Membuat popular post sederhana dan responsif di blog merupakan cara mudah agar blog kita tidak loading lama ketika orang lain membukanya, disini saya akan membagikan cara membuat Popular post mudah.

Menampilkan Sebuah postingan artikel terbaru dan terpopuler yang telah sahabat buat , menjadi hal terpenting untuk di ketahui oleh pengunjung setia blog sahabat, terlebih lagi popular post atau postingan populer dari widget yang sahabat buat tidak biasa, karna menampilkan sesuatu yang unik dan enak di pandang oleh semua pengunjung blognya sahabat.

Selain untuk dilihat oleh pengunjung setia blognya sahabat, popular post juga di gunakan untuk untuk menghiasi widgets di sidebar kiri atau pun kanan widget blognya,Dengan adanya Popular Post, akan menarik minat pengunjung blog sahabat untuk penasaran dan ingin melihat postingan artikel sahabat yang telah dibuat di blognya, apalagi design dan fiture dari popular post ini sangat menarik, seperti yang akan di share berikut yaitu ada popular post unik yang bisa sahabat coba, dan akan saya berikan cara membuat widgets popular post dengan mudah di bawah ini;.

Cara Penerapan Popular Posts widget Style:


Cara Membuat Widgets Popular Post dengan Mudah


1.Pertama yang harus di lakukan adalah Masuk ke Dashboard Blogger
2.Pilih Menu Tema > Pilih Edit HTML dan, kemudian klik cntrl+F/command+F (mac)
3. Kemudian ketiklah kode ]]></b:skin>.
4. Copy pastelah kode dibawah ini tepat di atas kode ]]></b:skin>.

#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none;font-size:11px;line-height: normal;}
#PopularPosts1 ul li:first-child  {border-top:none;}
#PopularPosts1 ul li:last-child  {border-bottom:none;}
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #555 !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em;overflow: hidden;}
#PopularPosts1 a:hover {color: #c00 !important;  text-decoration: none;}
.popular-posts ul {padding-left: 0; counter-reset: trackit;}
.popular-posts ul li {border-bottom:none;list-style: none outside none !important;margin-left: 0 !important;overflow: hidden; padding: 10px 0 !important;transition: all 0.25s linear 0s;counter-increment: trackit;}
.PopularPosts ul li:before{content: counters(trackit,".");padding: 0 .1em 0 10px;font-size: 20px;font-weight: bold;color: #F66;float: left;margin-right: 10px;}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {display: none!important}
.PopularPosts a, .PopularPosts a:hover{color:#c00;font-size:.9rem}
#PopularPosts1 li{padding-right: 1em !important;padding-left: 1em !important;}
.widget.PopularPosts{padding:1.2em 0em !important}

Cara Membuat Widgets Popular Post dengan Mudah


Simpan tema kalian dan lihatlah hasilnya. Sungguh memperindah tampilan blog anda. Selamat mencoba

Jika kita telah menambahkan widget popular post di blogger , tentu ada beberapa pilihan option yang digunakan diantaranya adalah pertama hanya menampilkan tulisan judul saja , kemudian cara kedua bisa dengan hanya menampilkan thumbnail,gambar dengan judul saja dan yang ketiga yaitu menampilkan thumbnail, judul postingan dan artikel terkait di bawahnya (Snippet).

Pada tampilan standarnya artikel di bawahnya akan berisikan kata kata pertama (Snippet) yang tercantum terlalu panjang, umumnya akan sampai dibawah thumbnail,gambar, nah untuk meringkas kata kata di bawah judul postingan agar tidak terlalu panjang maka ada cara yang akan digunakan yaitu memasukan code Javascript ke dalam Template Blognya.

Caranya Seperti di bawah berikut ini :

#. Masuk ke dashboard blogger pilih > Tema Edit HTML
#. Copykan code program di bawah ini di atas </body> :

<script type='text/javascript'>
//<![CDATA[
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>42)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>

#. Angka 60 yang saya kasih warna merah merupakan batasan minimum berapa kata kata yang akan di tampilkannya, sobat bisa merubahnya sesuai keperluan yang di inginkan.
#. kemudian yang terkahir klik simpan tema, dan lihat hasilnya.



Nah,Demikianlah yang bisa saya berbagi Cara Membuat Widgets Popular Post dengan Mudah,lebih jelasnya bisa konsultasi pada ahlinya sekian dan terimakasih...
Untuk Kritik Dan Saran Silahkan Tinggalkan Komentar di Kolom Komentar Yang Sudah Tersedia di Bawah Postingan Ini...Atau Menshare Ke Medsosnya Sahabat Blogger.

Show comments
Hide comments

2 comments on Cara Membuat Widgets Popular Post dengan Mudah