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 mampu kok membuat tampilan widget popular post tersebut menjadi berbeda dan sesuai harapan kita masing - masing, menyerupai membuat popular post warna warni di blogger, yaitu dengan cara menambahkan isyarat css untuk merubah tampilan-nya, bukan hanya css saja, bahkan bekerjsama kita juga mampu menambahkan isyarat jQuery untuk modifikasi widget tersebut.

Nah, pada kesempatan kali ini saya akan menuliskan tutorial bagaimana cara membuat popular post warna warni di blogger dengan menambahkan isyarat 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 teman lakukan yaitu masuk ke dasbor blogger, kemudian buka halaman Tata Letak, setelah itu klik Tambahkan Gadget dan pilih Gadget Popular Post / Artikel Populer.

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 bab 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 teman sudah sudah menampilkan widget popular post, namun dengan tampilan standar bawaan blogger.

Langkah selanjutnya yang kita lakukan yaitu memodifikasi tampilan widget tersebut menggunakan isyarat css biar 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 isyarat css yang gunanya untuk membuat tampilan popular post manjadi warna warni, dan di sini saya akan menyertakan 2 isyarat css yang mampu teman pilih.

Ada 2 cara menambahkan isyarat css untuk widget popular post biar menjadi warna warni, dan salah satu caranya yaitu sebagai berikut :

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

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

Kode CSS Widget Popular Post Warna Warni Untuk Blogger

Adapun isyarat css yang mampu teman gunakan untuk membuat popular post warna warni di blogger yaitu 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 isyarat css pelengkap untuk membuat widget popular post blogger menjadi warna warni.

Semoga bermanfaat