Cara Membuat Popular Post Warna Warni Di Blogger - BBT: Cara membuat popular post warna warni di blogger dengan cara modifikasi tampilan widget popular post agar jadi warna warni

Cara Membuat Popular Post Warna Warni Di Blogger

Sobat pernah melihat widget popular post warna warni di blogger, dan ingin tahu bagaimana cara membuat popular post warna warni di blogger ?

Sebagaimana yang sudah kita ketahui bahwa widget popular post atau widget artikel populer sudah disediakan pihak blogger, tapi dengan tampilan standar bawaan blogger. Namun walaupun blogger menyediakan widget popular post dengan tampilan standar, namun kita bisa kok membuat tampilan widget popular post tersebut menjadi berbeda dan sesuai keinginan kita masing - masing, seperti membuat popular post warna warni di blogger, yaitu dengan cara menambahkan kode css untuk merubah tampilan-nya, bukan hanya css saja, bahkan sebenarnya kita juga bisa menambahkan kode jQuery untuk modifikasi widget tersebut.
Cara Membuat Popular Post Warna Warni Di Blogger

Nah, pada kesempatan kali ini saya akan menuliskan tutorial bagaimana cara membuat popular post warna warni di blogger dengan menambahkan kode css yang fungsinya untuk membuat widget popular post tersebut menjadi warna warni.

Cara Membuat Popular Post Warna Warni Di Blogger

Oke sobat, sudah siap untuk praktik cara membuat popular post warna warni di blogger ?

Jika sudah siap, silakan baca terus ya dan praktik kan tutorial cara membuat widget popular post warna warni di blogger ini.

Langkah pertama yang harus sobat lakukan adalah masuk ke dasbor blogger, kemudian buka halaman Tata Letak, setelah itu klik Tambahkan Gadget dan pilih Gadget Popular Post / Artikel Populer.
Tata Letak : Cara Membuat Popular Post Warna Warni Di Blogger

Agar tampilan widget popular post sesuai dengan gambar yang ada pada halaman cara membuat popular post warna warni di blogger tutorial ini, maka silakan atur dahulu widget tersebut :
  • Most viewed, silakan tentukan sendiri apakah ingin menampilkan artikel populer sepanjang waktu, dalam 1 bulan atau dalam satu minggu.
  • Pada bagian Show ada image thumbnail dan snippet serta Display up to, nah pada pengaturan Display up to silakan tentukan berapa artikel populer yang mau ditampilkan, sedangkan pada image thumbnail dan snippet tidak usah diberi centang.
  • Setelah itu silakan Simpan
Sekarang blog blogger sobat sudah sudah menampilkan widget popular post, namun dengan tampilan standar bawaan blogger.

Langkah selanjutnya yang kita lakukan adalah memodifikasi tampilan widget tersebut menggunakan kode css agar menjadi warna warni.

Cara Modifikasi Tampilan Popular Post Di Blogger Agar Warna Warni

Untuk cara membuat popular post warna warni di blogger ini kita akan menambahkan kode css yang gunanya untuk membuat tampilan popular post manjadi warna warni, dan di sini saya akan menyertakan 2 kode css yang bisa sobat pilih.

Ada 2 cara menambahkan kode css untuk widget popular post agar menjadi warna warni, dan salah satu caranya adalah sebagai berikut :

Jika sobat masih berada pada halaman Tata Letak Blogger maka silakan langsung klik Tambahkan Gadget / Add a Gadget, pilih gadget HTML/JavaScript.

Kemudian masukkan kode css yang akan saya sertakan di bawah nanti pada bagian Konten / Content.
Setelah itu jangan lupa klik Simpan / Save.

Kode CSS Widget Popular Post Warna Warni Untuk Blogger

Adapun kode css yang bisa sobat gunakan untuk membuat popular post warna warni di blogger adalah ini (silakan pilih salah satu) :
Kode A
<style type='text/css'>
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1  ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width:  0px;  color: #333333; display: block; font-family: Georgia, 'Times New  Roman', Times, serif; font-size: 13px; font-style: normal; font-variant:  normal; font-weight: normal; letter-spacing: normal; line-height: 18px;  margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px;  text-align: -webkit-auto; text-decoration: none !important; text-indent:  0px; text-transform: none; white-space: normal; widows: 2;  word-spacing: 0px;}
#PopularPosts1 ul li  .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1  ul li:first-child + li + li + li + li + li + li + li + li +  li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px  solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px  #000;-moz-box-shadow: 0px 0px 5px  #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1  ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px  0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px  #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
</style>
Kode B
<style type="text/css">
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1  ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width:  0px;  color: #333333; display: block; font-family: Georgia, 'Times New  Roman', Times, serif; font-size: 13px; font-style: normal; font-variant:  normal; font-weight: normal; letter-spacing: normal; line-height: 18px;  margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px;  text-align: -webkit-auto; text-decoration: none !important; text-indent:  0px; text-transform: none; white-space: normal; widows: 2;  word-spacing: 0px;}
#PopularPosts1 ul li  .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1  ul li:first-child + li + li + li + li + li + li + li + li +  li:after{position:absolute;top:0;right:0;background:#333;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li a{color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:100%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:100%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:100%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:100%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:0;padding:10px;border-top:1px solid #333}
</style>
Nah itulah tutorial cara membuat popular post warna warni di blogger serta kode css tambahan untuk membuat widget popular post blogger menjadi warna warni.

Semoga bermanfaat
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Popular Post Warna Warni Di Blogger yang ada di blog ini bermanfaat buat sobat