Cara Membuat Widget Popular Post Menjadi Berwarna


Widget Popular Post adalah widget yang berfungsi untuk menampilkan artikel yang paling sering di baca oleh pengunjung. Untuk lebih mempercantik tampilan blog, ada baiknya widget tersebut diberi sedikit polesan agar lebih berwarna.
cara membuat widget popular post menjadi berwarna, cara memasang popular post berwarna  endolita.blogspot.com

Widget popular post yang satu ini memiliki background yang berwarna-warni seperti pelangi dan sudutnya sedikit melengkung mirip ketupat. Lihat screenshootnya di bawah ini:

cara membuat widget popular post menjadi berwarna, cara memasang popular post berwarna  endolita.blogspot.com

Tertarik untuk memasangnya? Bagaimana caranya?

Cara Memasang Widget Popular Post Menjadi Berwarna:
  1. Login ke akun Blogger
  2. Pilih Template >> Edit HTML
  3. Kemudian copy-paste script berikut di atas kode  ]]></b:skin>
  4. #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: 12px; 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 +li +li{background:#F200FF;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 + li + li +li{background:#FF9100;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 {background:#E6FF00;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{background:#0073FF;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 +li{background:#FF0080;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#00FFFB;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#B300FF;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li{background:#007902;width:90%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li{background:#006579; width:90%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child{background:#9E9BD1;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:3px 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}
  5. Selanjutnya masuk ke Tata Letak >> pilih widget Popular Post.
  6. Lalu hilangkan tanda checklist seperti gambar dibawah ini

  7. cara membuat widget popular post menjadi berwarna, cara memasang popular post berwarna  endolita.blogspot.com

  8. Simpan Template
  9. Cek tampilannya di halaman utama blog untuk memastikan Widget Popular Postnya sudah berubah.
Itulah sekilas pemahaman saya tentang Cara Membuat Widget Popular Post Menjadi Berwarna. Semoga artikelnya bermanfaat. Jika mencari artikel lain yang serupa silahkan cek di bawah ini:

Artikel Terkait

Cara Membuat Widget Popular Post Menjadi Berwarna
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email