Thursday, August 16, 2012

Percantik Tampilan Widget Label Cloud-mu (CSS Customize)

Percantik Tampilan Widget Label Cloud-mu  (CSS Customize) - Kali ini saya kembali dengan artikel berkategorikan "Widget" setelah Cara Pasang Widget Facebook PopUp Like Box Dengan Timer dan yang pastinya bermanfaat bagi sahabat ANVITY Blog | Internet Learning. Widget yang akan saya bahas hari ini adalah widget "FBLikes Pro" yang menurut saya sangat spesial dan menarik. Check it now!

- kembali ke laptop -


Standar VS Custom Label Cloud ANVITYWidget ini juga sama seperti Facebook LikeBox, di buat oleh Blogger Professional asal India yang populer. Tutorial ini saya post karena permintaan sahabat blogger dalam bentuk komentar di salah satu  postingan ANVITY Blog | Internet Learning untuk meminta dibuatkan tutorialnnya. Kelebihan dari modifikasi widget label cloud ini adalah disaat mouse di letakan di salah satu label (mouse over), kotak label akan berputar tidak lebih dari 30 derajat. Pada tahun 2008 ketika Blogger.com bergerak melalui tahap pembaruan beberapa pengembang pihak ketiga sering mengambil kesempatan untuk menciptakan widget untuk blogspot, beberapa widget resmi muncul dengan cepat dengan kinerja yang baik karena script yang dilayani oleh server Blogger. Widget Label Cloud didesain dengan menu yang dinamis. Untuk LIVE DEMO silahkan lihat widget yang bejudul "All Categories", tepatnya di sidebar blog.


Tapi ingat! sebelum sahabat blogger memasang tampilan ini, gunakan opsi pada widget label menjadi seperti ini.
Option Custom Label Cloud ANVITY

Jika semuanya sudah siap, silahkan ikuti langkah-langkah dibawah ini.
1. Pastikan sahabat sudah login ke akun Blogger.
2. Masuk ke halaman "Template" dan klik "Edit HTML"
3. Cari kode ]]></b:skin>  (gunkan Ctrl+F untuk mempermudah)
4. Salinlah kode/script dibawah ini dan letakan tepat diatas kode ]]></b:skin>
<!-- Custom Label Cloud by www.anvity.com Start -->
.label-size{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #4F4F4F;border-radius: 3px;float:left;text-decoration:none;font-size:10px;color:#FF4F4F}
.label-size:hover {border:1px solid #6BB5FF;text-decoration: none;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1}
.label-size a {text-transform: uppercase;float:left;text-decoration: none}
.label-size a:hover {text-decoration: none}
<!-- Custom Label Cloud End -->
5. Save Template. Done!

Semoga tutorial diatas dapat dianggap terperinci dan detail yang dapat mempermudah dalam memahami tutorialnya. Speak your mind and happy blogging!

51 comments:

  1. Mantaps gan, kalo cocok ane coba gan :D

    ReplyDelete
  2. keren..
    ini yng sering sy liat di blg blogger yang lain

    ReplyDelete
  3. wah keren banget nih tutorial nya..
    mohon ijin untuk di bookmark :D
    makasih sudah share ilmu nya..


    LANJUTKAN (y)

    ReplyDelete
    Replies
    1. Silahkan bookmark & semoga bermanfaat artikel ini. sebelumnya, thanks kunjungannya :)

      Delete
    2. patut dicoba nieh gan buat pemula seperti ane, artikel menarik dan menambah pengtahuan buat ane.. terima kasih.!!

      Delete
    3. kerennnn sob akhirnya saya tau juga trik ini
      terimaksih sukses selalu

      Delete
  4. keren explanationnya..lanjutkan bro..

    berkunjung di blog sobat.. Minal Aidzin Wal Faidzin Mohon Maaf lahir dan bathin ea..

    -Master Venomia-

    ReplyDelete
  5. mantap gan...

    http://miftahbudi14.blogspot.com/

    ReplyDelete
  6. wahhh boleh juga nih sob.... mantap juga dah...

    ReplyDelete
  7. bagus memang tampilannya

    ReplyDelete
  8. mantap mas tifan
    www.bolainfo.net/2012/09/kontes-review-coretan-andika.html

    ReplyDelete
  9. mantap gan, boleh dicoba nieh, terima kasih sudah berbagi pengetahuan ini.!!

    ReplyDelete
  10. Visit me back on
    http://art-of-hacks.cyber4rt.com

    ReplyDelete
  11. dg ini tampilan blog akan lebih menarik lagi... thank u admin

    ReplyDelete
  12. Sangat membantu teman artikelnya, saya harap besok dan lain kali anda lebih menguasi tentang sebuah artikel baru yang lebih menarik daripada yang biasanya anda buat. Saya tunggu yang lebih menarik. Bagus….

    ReplyDelete
  13. ikh keren banget,, coba dari dulu aku datang ke blog ini sudah aku pasang dari dulu nih tampilan supaya widgets label jadi cantik...makasih !

    ReplyDelete
  14. kerenn juga tuh gan..tapi apa ga berlebihan ..heheeeee

    ReplyDelete
  15. Bagus informasinya gan, ikutan nyimak gan

    ReplyDelete
  16. gan keren abis dan mantap, info sangar menarik boleh ikutan juga ni

    ReplyDelete
  17. judulnya aja udah cantik apalagi kalau sampai dipasang di blog aku,,pasti lebih cantik lagi,,haa

    ReplyDelete
  18. Saya berharap semoga kedatangan kami sbagai spammer setiap harinya ke blog anda tidak menjadikan anda patah semangat untuk terus eksis di dunia bogger..
    selamat hari raya idul adha bagi seluruh umat muslim di indonesia..

    ReplyDelete
  19. Wah mantap gan...boleh dicoba gan.. :D

    ReplyDelete
  20. kita buktikan gan ha ha ..
    terimakasih banyak atas infonya

    ReplyDelete
  21. oia ... aku banget ini gan
    blog yang mantap dan menarik

    ReplyDelete

  22. kadang memang sulit untuk mencari sesuap nasi bahkan sampai harus membuat risih orang lain
    _ maaf bila kunjungan saya ke blog ini hanya membuat blog anda berantantakan dan hanya mementingkan kepentingan saya semata sbagai pencari backling
    semoga artikel yang di sajikan bermanfaat untuk orang banyak..amin

    ReplyDelete
  23. thanks tutorialnya sob..

    btw, jika font dan backgroud tag cloudnya pengin di ganti, yg di rubah code bagian mananya ya?

    ReplyDelete
  24. Ijin bookmark dlu gan,hehe
    soalnya udh mlem,mau tdur dlu

    ReplyDelete
  25. Mantap akgn...

    salam kenal kang..
    visit back ya kang

    ReplyDelete
  26. artikel yang sangat bermanfaat gan, terima kasih sudah berbagi ilmunya..

    ReplyDelete