Aplikasi Pembuatan Cover Video Thumbnail Youtube

Mengenal adobe photoshop aplikasi atau software yang dapat anda instal di perangkat laptop

Saturday, September 14, 2019

Belajar Cara Membuat Widget Popular Posts Blogger


Barangkali sahabat blogger mau memperindah tampilan widget yang ada di sidebar blog blogger nya, karena pada kesempatan kali ini kita akan belajar cara membuat widget popular posts dan widget ini sebenarnya sudah banyak yang menggunakan nya.

Tetapi saya share kembali siapa tau diantara sahabat blogger semua berminat ingin merapkan widget tersebut.untuk membuat sidebar blog yang lebih cantik atau keren maka dari itu simak dan pelajari langkah-langkah atau tutorial dibawah.

Agar anda bisa pahami cara penempatan dari kode widgetnya ke template blog milik anda nantinya, perhatikan penjelasan nya berikut ini;

Cara memasang kode widget popular posts blog blogger:

1. Masuk ke dasbor blogger
2. Pilih menu tema
3. Klik tombol Edit HTML
4. Lalu klik dimana saja pada area kode dan tekan tombol Control + F atau Command + F pada keyboard pc(laptop) untuk membuka kotak pencarian di sudut kanan atas jendela kode dan tuliskan ]]></b:skin> kemudian tekan tombol Enter untuk mencari.
5. Salin dan tempelkan kode CSS atau HTML di bawah tepat diatas kode ]]></b:skin> berikut kodenya;
.popular-posts ul{padding-left:0px;counter-reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-right:15px;padding:0.2em 0.5em;counter-increment:popcount;content:counter(popcount);font-size:16px;background:#2b2b2b;color:#fff;position:relative;font-family:georgia;float:left;border:2px solid #ddd;border-radius:15px}.popular-posts ul li{border-bottom:1px dashed #ddd;height:28px}.popular-posts ul li:hover{padding-left:10px;border:2px solid #FFF;background:#FFF}.popular-posts ul li a{text-decoration:none;color:#5A5F63}.popular-posts ul li a:hover{text-decoration:none;text-decoration:none;color:#2b2b2b}.popular-posts .item-thumbnail img{border-radius:100px; border-radius:100px; border-radius:100px;list-style:none}.popular-posts .item-thumbnail img:hover{ border-radius:0px;list-style:none; border-radius:0px}
6. Simpan tema

Show comments
Hide comments
9 comments:
Tulis komentar

Back to Top