Cara Menciptakan Widget Popular Post Keren Dan Berwarna Di Blogspot
Cara Membuat Widget Popular Post Keren dan Berwarna di Blogspot - Hai sobat , Pada kesempatan kali aku akan membagikan sedikit tips nih Cara Membuat Widget Popular Post Keren dan Berwarna di Blogspot buat para blogger yang ingin mempercantik tampilan blognya dengan menciptakan Widget Popular Postnya Berwarna-warni dan tentunya bergambar yang menciptakan tampilan blog kalian semakin keren, Tapi sebelum itu aku ingin memberitahukan apa itu Popular post ?
Apa Itu Popular Post ?
Popular Post yaitu salah satu elemen / widget yang sangat penting dalam sebuah blog atau wordpress. Popular post merupakan sebuah widget yang mengatakan konten mana yang paling disukai di dalam blog tersebut.
Oke, Kesempatan kali ini aku akan membagikan 4 Macam Style Populer Post yang sanggup kalian coba satu persatu, dan tentu cara memasangnya pun sangat gampang asalkan kalian mengikuti isyarat yang aku 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 :
Sumber https://carasatuku.blogspot.com/
Popular Post yaitu salah satu elemen / widget yang sangat penting dalam sebuah blog atau wordpress. Popular post merupakan sebuah widget yang mengatakan konten mana yang paling disukai di dalam blog tersebut.
Oke, Kesempatan kali ini aku akan membagikan 4 Macam Style Populer Post yang sanggup kalian coba satu persatu, dan tentu cara memasangnya pun sangat gampang asalkan kalian mengikuti isyarat yang aku berikan di bawah ini, Oke Langsung saja ke tutorialnya.
Langkah - Langkahnya pun cukup mudah, Ikutilah langkah - langkah berikut :
- Masuk ke Platfrom blogger.com
- Silahkan kau klick pada bab 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, bila 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, kini kalian masuk ke Tata Letak => Tambahkan Widget => Postingan Popular ( untuk posisi widgetnya aku sarankan disamping yah )
- Simpan, dan lihatlah hasilnya. Taraa... kini tampilan blog kalian terlihat keren dan Berwarna-warni.
Sumber https://carasatuku.blogspot.com/
