Cara Merubah Popular Post Menjadi Cantik dan Keren

Posted on by Jason Ward
Cara Merubah Popular Post Menjadi Cantik dan Keren – Tips/trik Merubah Popular Post kali ini akan menjadikan tampilan baru agar lebih cantik dan keren. Banyak cara yang bisa dilakukan untuk modifikasi blog, diantaranya mempercantik popular post agar keren. sobat juga bisa baca: Cara Merubah Blog Agar Menarik dan Keren atau Tutorial Modifikasi Blog Lengkap Terbaru .
Namun sebelum sobat blogger modifikasi widget atau tampilan blog, sobat harus pertimbangkan apakah cocok atau tidak dengan warna template sobat, nah,,, jika kita modifikasi tidak menyesuaikan template maka akan kelihatan tidak cocok. hehe yang nantinya akan tidak sedap dipandang mata. namun tenang saja, kali ini Kang Zain aka bagikan 2 tips sekaligus agar bisa sobat pilih yang sesuai dengan template sobat.
Jika sobat tertarik dengan Cara Merubah Popular Post Menjadi Cantik dan Keren bisa sobat ikuti tutorial dibawah ini, Cekidot!!! yuk simak bareng-bareng.,,.,.

Cara Merubah Popular Post Menjadi Cantik dan Keren

Gambar Bulat

Berikut ini Cara Merubah Popular Post Menjadi Cantik dan Keren:

  1. Login akun blogger sobat.
  2. Pilih Menu Tata Letak >>>Tambah gadget >>>Pilih Html Javascript.
  3. Masukan Semua kode dibawah ini.
    4. 4.Simpan dan lihat hasilnya

    Keterangan Penting !!!

    Widget Popular Post harus terpasang Terlebih Dahulu Caranya:
    ./:: Klik Menu Tata letak>>Tambah Gadget >> Pilih Popular post / Entri Popular >> Centang Thumbnail gambar tetapi Jangan Centang Cuplikan.

    Cara Merubah Popular Post Menjadi Cantik dan Keren

    Efek Warna Warni  

     

    1. Login ke blog sobat.
    2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
    3. Klik simpan
    4. Selanjutnya klik Template
    5. Klik Edit Html >>klik lanjutkan
    6. Cari kode  ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>

    /* Rainbow Popular Post by http://hzndi.blogspot.com*/
    #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}
    /* Rainbow Popular Post by http://hzndi.blogspot.com*/

    6. Simpa dan sobat lihat hasilnya.
    Sekian Dulu Sobat share kali ini yaitu Cara Merubah Popular Post Menjadi Cantik dan Keren semoga bermanfaat. Good Luck Tunggu Update dari Kang Zain. Selamat Mencoba.

Related Posts