Minggu, 09 September 2012

Cara Membuat Popular Post Dengan Sembilan Warna Yang Berbeda


By on 10.22

Widget - Popular Post sebuah widget yang bertujuan untuk menampilkan posting yang sering dilihat. Dan sekarang kita modifikasi widget popular post dengan sembilan macam warna yang berbeda-beda dari setiap posting.


1. Login ke blog kamu.
2. Pilih Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.
#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}
4. Simpan, dan kembali ke menu Tata Letak > Pilih Add Gadget > Pilih Entri Populer/Popular posts.
Cuplikan gambar dan keterangan hilangkan tanda centangnya dan tampilkan minimal 9 post.
5. Simpan dan lihat hasilnya.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

20 komentar:

  1. Sekali lagi terimakasih Gan...
    banyak ngilmu kudapat dari; blazerracing
    Sukses Selalu...

    BalasHapus
  2. nice share gan,,
    ane bnyak bljar dr blazerracing

    BalasHapus
  3. Salam Bloger....,
    Thanks ya Mas Tutor nya..., Keren...!

    BalasHapus
  4. Mantaaaab Gan.. udah ana coba langsung mau.. Terima kasih banyak atas ilmunya..

    BalasHapus
  5. Mantep nih gan,ane banyak belajar dari blog ini,..mksih atas postinganya

    BalasHapus
  6. Terima kasih banyak sob..
    bagus juga nih :)

    BalasHapus
  7. gan mohon pencerahan nya di blog saya ko ga mau ya,, pas mau saya simpan keluar tanda ini.

    More than one widget was found with id: HTML7. Widget IDs should be unique.

    di tunggu secepat nya gan..

    BalasHapus
  8. wah terima kasih sob,, cocok buat di pasang

    BalasHapus
  9. Thks masbro dah ane pasang...Buat Diyon Kallem kalau ada kalimat seperti itu berarti ada dua sytax dengan kode yang sama terpasang, anda hanya tinggal menambahkan satu hurup saja di belakang ID kembarannya misal HTML7 menjadi HTML7B atau ganti id:HTML7 menjadi HTML8, HTML9, atau HTML10...

    BalasHapus
  10. Terimakasih sob untuk tutorialnya, alhamdulillah sudah di aply di blog saya dan berhasil :D

    BalasHapus
  11. udah di pake gan, mantapb

    mampir" ya gan di blog ane http://largo-kun.blogspot.com/

    BalasHapus
  12. makasih gan, saya copas dan cantik dech...

    BalasHapus
  13. ijin nyoba gan,, :D
    http://nuswantaranews.blogspot.com/

    BalasHapus
  14. terimakasih gan atas ilmunya,

    dan sekarang blog saya menjadi berbeda dari sebelumnya

    dan luangkankan juga waktunya untuk menengok ke blog tetangga : http://catatanilmusaya.blogspot.com

    dan banyak game game pc gratis download sinele link

    terimakasih

    BalasHapus
  15. berhasil gaaaannnnn.....!!! thanks. Ditunggu gan kunjunganya,...
    http://harydw.blogspot.com

    BalasHapus
  16. keren abisssss gaaannnnn
    iizn cuat nyoba yah

    BalasHapus
  17. mkasih atas informsinya, keren banget sob udah aku coba. hehe baru belajar blog
    http://adibenha.blogspot.com

    BalasHapus