Cara Membuat Widget Entri Populer Warna Warni

Cara Membuat Widget Entri Populer Warna Warni

Cara Membuat Widget Entri Populer Warna Warni

KABEKA.NET Apa kabar Sobat Blogger, Pada kesempatan kali ini saya akan memberitahu Cara membuat widget populer post warna warni dengan nomor urut , saya buat tutorial ini karena adanya seseorang yang meminta saya buatkan tutorial cara membuat Widget populer post bernomor urut, Mari kita Review dulu Widget yang akan kita buat nantinya, Jika Widget ini selera anda maka ayo kita buat bersama-sama ikuti tutorial ini dengan benar, agar anda tidak salah membuat widget ini, Oke langsung saja kita mulai tutorial yang sangat murah ini mari kita mulai.


Ini Widget Populer Post Yang akan Kita Buat


Langkah-Langkah Membuat Widget Populet Post Warna Warni

  • P ertama Login ke Akun Blogger anda disini blogger.com
  • Klik Tata Letak> Tambahkan Gadget
  • Pilih Popular Post
  • Simpan
  • Klik Template> Edit HTML
  • Cari kode

    atau ]]>

  • Copy Script Dibawah ini dan pastekan tepat diatas script

    atau ]]>


/* POPULAR POST WARNA WARNI */
#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 {background:#DF01D7;width:90%}
#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:after{content:"8"}#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 + 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:after{content:"7"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#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"}

  • Simpan Template
Dan langkah selanjutnya kita akan membuat widget populer post di blog kita , kita harus Setting widgte yang akan kita buat agar kelihatan lebih rata dan indah.
Langkah Setting widget

  • Pertama Pilih menampilkan posting populer selama setiap saat, 30 hari terakhir, atau 7 hari terakhir.
  • Tentukan berapa banyak posting yang akan ditampilkan pada widget populer postnya nanti
  • Ingat!! Jangan centang thumbnail gambar , jika anda Centang, maka Text nya nanti akan tertutupi gambar.
  • Klik Simpan
Contoh Gambar
  • Selesai.
Terima kasih sudah membaca artikel yang berjudul Cara membuat widget Entri populer / Populer post warna warni Semoga artikel ini bermanfaat bagi anda semua, Dan Tunggu artikel – artikel selanjutnya.

Post Comment