Memasang widget popular post berwarna warni

Popular post adalah salah satu widget yang disediakan oleh blogger bagi memaparkan posting yang popular pada sesuatu bulan,minggu atau sepanjang masa.Anda boleh memilih bagaimana ia akan dipaparkan.Tutorial ini adalah cara untuk mengubahsuai paparannya dalam bentuk yang berwarna warni.



Langkah bagi membuatnya:

1.Masuk ke blogger dan masukkan widget popular post pada blog anda
   Pada dashboard pilih Layout>>Add A gadget

2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang anda inginkan.


3. Kemudian pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F
Kemudian letakkan kode berikut ini diatasnya

#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}
#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}
#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ulli:first-child:after{content:"1"}
#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ulli:first-child + li:after{content:"2"}
#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ulli:first-child + li + li:after{content:"3"}
#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ulli:first-child:after,
#PopularPosts1 ulli:first-child + li:after,
#PopularPosts1 ulli:first-child + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}


5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template 

19 komentar untuk "Memasang widget popular post berwarna warni"

  1. PERTAMAXX gan,, jangan lupa follow juga ya
    http://blanter-forever.blogspot.com

    BalasHapus
  2. mantep sob
    http://nurdinorid.blogspot.com/2014/04/cara-membuat-nilai-rata-rata.html

    BalasHapus
  3. Wah, pusing saya gan, keren sih gan,
    terimakasih tutornya, salam

    BalasHapus
  4. kalau boleh tau gimana caranya menampilkan blogger vesi mobile dengan semua vitur yang ada di blog. minta saran dong?

    BalasHapus
  5. saya terapkan dulu mas.. thanks

    BalasHapus
  6. keren berasa liat pelangi di blog hehe ;)
    save script thanks!

    BalasHapus

  7. Coaches will try to assistance your trainees by just counseling louis vuitton replica activities these their selves purchase or simply they've got seeing that needs to tutor. However, your genetic will need to take advantage of regardless of what hobbies and interests him or her. Things that appeal to certain are not going to generally appeal to one other. The wisdom has long been established during the effortless action for assisting a youngster that will place a good shoes. This notice may very well be thrown out for path together with cause complications anytime asked provide a good new-fangled way to get louis vuitton replica. Likely an individual guardian demonstrates a different sort of progression, or simply any grandma together with grandfather quarrel about that which is perfect. Boys and girls utilizing figuring out frustrations will need to know beneficial ways meant for rising your memory that can be arranged to the own personal defined skills. Kids the fact that challenges may want to partner sure details when using the same exact designs constantly that will louis vuitton replica. Could be they need sure types that will help him or her take into account, or simply stinks. A youngster who's got idea impairment may perhaps figure out how to pass on by just truly feel or simply perfume / cologne. Gran could possibly sports similar cologne every single day or simply Grandaddy may perhaps chanel outlet on the same cologne or simply once shave. On occasion any coaches try a figuring out system that could be distinct from the father together with mother's. As soon as the toddler needs any guardian meant for aid in due diligence, a good beat may perhaps cultivate because of the guardian chanel outlet a substitute system to locate the exact same end result.

    BalasHapus
  8. Mantap infonya... :D

    Kunjungi blog saya juga,
    Seo Mas Vento

    BalasHapus
  9. Its an excellent pleasure reading your post.Its jam-packed with info i'm probing for and that i like to post a comment that "The content of your post is awesome" nice work ultimatenut.com

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top