CARA MEMBUAT POPULAR POST BERWARNA

Membuat Widget Popular Post Menjadi Berwarna sangatlah mudah.Kalian hanya perlu memasukan kode css ke dalam blog kalian.simak baik-baik langkah langkah di bawah ini:

popular post berwarna
1.Buka akun Blogger kalian

2.Pilih Template lalu klik Edit HTML

3.Kemudian cari kode  ]]></b:skin> dengan cara tekan Ctrl+F

4.Copy paste kode di bawah ini tepat di atas kode  ]]></b:skin> yang telah kita cari tadi:
    #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}

    Baca juga: cara membuat label berwarna


    5. Masuk ke menu Tata Letak  lalu pilih  edit widget Popular Post.
    6. Setting widget popular post sesuai dengan gambar di bawah ini


    CARA MEMBUAT POPULAR POST BERWARNA

    Terahkhir  klik simpan dan coba kita ke blog.Selamat tampilan popular post kalian sudah berubah...

Berlangganan update artikel terbaru via email:

6 Responses to "CARA MEMBUAT POPULAR POST BERWARNA"

  1. hai kak, selamat beraktifitas.. artikelnya menarik kak, bermanfaat sekali. oh iyaa,, saya juga mau kasih tau info menarik nih kak coba deh klik => SERVICE MACBOOK IMAC MAC PRO IPHONE IPAD IPOD DI BANDUNG JAKARTA SURABAYA SEMARANG TANGERANG

    ReplyDelete
  2. wah keren kak tutorialnya, tapi warna populer post saya kok cuma satu ya hehe

    cek dan bw back kak
    www yukgas id

    ReplyDelete
    Replies
    1. tampilan jumlah popular postnya di ubah dulu gan.di tata letak

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel