Cara Membuat Widget Popular Post Keren dan Berwarna di Blogspot
Cara Membuat Widget Popular Post Keren dan Berwarna di Blogspot - Hai sahabat CaraSatuKu, Pada kesempatan kali saya akan membagikan sedikit tips nih Cara Membuat Widget Popular Post Keren dan Berwarna di Blogspot buat para blogger yang ingin mempercantik tampilan blognya dengan membuat Widget Popular Postnya Berwarna-warni dan tentunya bergambar yang membuat tampilan blog kalian semakin keren, Tapi sebelum itu saya ingin memberitahukan apa itu Popular post ?
Apa Itu Popular Post ?
Popular Post adalah salah satu elemen / widget yang sangat penting dalam sebuah blog atau wordpress. Popular post merupakan sebuah widget yang menunjukkan konten mana yang paling disukai di dalam blog tersebut.
Oke, Kesempatan kali ini saya akan membagikan 4 Macam Style Populer Post yang bisa kalian coba satu persatu, dan tentu cara memasangnya pun sangat mudah asalkan kalian mengikuti arahan yang saya berikan di bawah ini, Oke Langsung saja ke tutorialnya.
Langkah - Langkahnya pun cukup mudah, Ikutilah langkah - langkah berikut :
Contoh 1 :
Contoh 2 :
Contoh 3 :
Contoh 4 :
Popular Post adalah salah satu elemen / widget yang sangat penting dalam sebuah blog atau wordpress. Popular post merupakan sebuah widget yang menunjukkan konten mana yang paling disukai di dalam blog tersebut.
Oke, Kesempatan kali ini saya akan membagikan 4 Macam Style Populer Post yang bisa kalian coba satu persatu, dan tentu cara memasangnya pun sangat mudah asalkan kalian mengikuti arahan yang saya berikan di bawah ini, Oke Langsung saja ke tutorialnya.
Langkah - Langkahnya pun cukup mudah, Ikutilah langkah - langkah berikut :
- Masuk ke Platfrom blogger.com
- Silahkan kamu klick pada bagian di pilihan Tema => Edit Html, terus kalian cari kode
- Jika sudah ketemu silakan kalian pilih salah satu kode CSS dibawah ini, terdapat 3 kode CSS kalian pilih salah satunya saja yah, jika kurang cocok silakan pilih yang lainnya.
- Copy kode CSS yang kalian ingin gunakan dan letakkan diatas kode
- Berikut beberapa kode CSS untuk widget popular post yang akan kalian gunakan nantinya.
Contoh 1 :
<style type='text/css'>
/*Popular Post 2*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#00bcd4;}
.popular-posts ul li:nth-child(2){background-color:#009688;}
.popular-posts ul li:nth-child(3){background-color:#4caf50;}
.popular-posts ul li:nth-child(4){background-color:#8bc34a;}
.popular-posts ul li:nth-child(5){background-color:#cddc39;}
.popular-posts ul li:nth-child(6){background-color:#ffeb3b;}
.popular-posts ul li:nth-child(7){background-color:#ffc107;}
.popular-posts ul li:nth-child(8){background-color:#ff9800;}
.popular-posts ul li:nth-child(9){background-color:#ff5722;}
.popular-posts ul li:nth-child(10){background-color:#795548;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>
Contoh 2 :
<style type='text/css'>
/*Popular Post 3*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #e0e0e0;position:relative;}
.popular-posts ul li:hover{background-color:#EEE;}
.popular-posts ul li a{color:#424242;text-decoration:none;}
.popular-posts ul li a:hover{color:#212121;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>
Contoh 3 :
<style type='text/css'>
/*Popular Post 4*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#212121;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #333;position:relative;}
.popular-posts ul li:hover{background-color:#262626;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>
Contoh 4 :
<style type='text/css'>
/* Widget popular Post1 */
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#f44336;}
.popular-posts ul li:nth-child(2){background-color:#e91e63;}
.popular-posts ul li:nth-child(3){background-color:#9c27b0;}
.popular-posts ul li:nth-child(4){background-color:#673ab7;}
.popular-posts ul li:nth-child(5){background-color:#3f51b5;}
.popular-posts ul li:nth-child(6){background-color:#2196f3;}
.popular-posts ul li:nth-child(7){background-color:#03a9f4;}
.popular-posts ul li:nth-child(8){background-color:#00bcd4;}
.popular-posts ul li:nth-child(9){background-color:#009688;}
.popular-posts ul li:nth-child(10){background-color:#4caf50;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;} </style>
- Kalau sudah klick simpan tema.
- Masih di blogger, sekarang kalian masuk ke Tata Letak => Tambahkan Widget => Postingan Popular ( untuk posisi widgetnya saya sarankan disamping yah )
- Simpan, dan lihatlah hasilnya. Taraa... sekarang tampilan blog kalian terlihat keren dan Berwarna-warni.
Makasi infonya gan bermanfaat sekali boleh saya copy codenya?,
BalasHapusKunjung balik ya gan