How to Add Circle Box with Hover Effect to your blog – Style 1

01 / 12 / 2012

Assalamualaikum, this tutorial is requested. At first, I was hesitated to post this tutorial as the codes are not mine. But I understand that many of you guys don't really understand on how to use the codes by that website. Don't worry it was hard for me too. This tutorial are belongs to: Owner

Click here too see Live Preview

I have provided the codes below. Edit the codes in http://htmledit.squarefree.com/ and then paste them in where ever you wanted them to be. Both classic template and Blogger new template designer can use this box.

Thank you for using.
»
«
  • Unnie, sihan guna yg scrollbox punye ehhh :3 Thankyouu

  • terima kasih sebab buat tutorial yang awesome ni 🙂

  • tak boleh pun :/

  • sis, kalau simple template tak dapat cari /style> Camna tu?

  • thanks for tutor 🙂

  • Menarik tuto wana.
    Tp kan dalam owner punya page ada banyak lagi style.
    But I wonder macam mana nak guna code tu sebab dia hanya bagi code untuk 'style' sahaja.
    Design lain codenya pun lain.
    Kalau nak apply mnggunakan code yang wana bagi kat bawah ni memang tak reti.
    Blh tlg ajarkan?

    Harap wana faham 🙂

  • Menarik tuto wana.
    Tp kan dalam owner punya page ada banyak lagi style.
    But I wonder macam mana nak guna code tu sebab dia hanya bagi code untuk 'style' sahaja.
    Design lain codenya pun lain.
    Kalau nak apply mnggunakan code yang wana bagi kat bawah ni memang tak reti.
    Blh tlg ajarkan?

    Harap wana faham 🙂

  • Kalau takde code style nak letak kat mana?

  • @Balqis : Semua skin mesti ada. Kalau template designer saya tak sure.

    @Ziera : benda ni susah nak explain T_T seriously, yang ni pun orang cakap tak jadi and so on ……… tapi nanti saya update style lain2 tu ye ^^

  • @ainy : welcome T^T

    @PencintaRabunMalam-II : semua skin mesti ada. Kalau dekat template designer paste dekat atas ]]>[/b:skin] (gantikan [ ] dengan < > )

  • @BudakKacaMata : sama-sama 🙂

    @Nurul Ilham : Boleh bagitau saya apa yg tak jadi?

    @Sihan : Okayyy ^^

  • thanks for the very beautiful33 effect of circle hover.. love u.. <3

  • @Wana: Tengss. Seyes susah nak main ngan code dia T^T

  • Salam akak. Saya tak faham apa kegunaan benda ni. Saya guna blogskin 'Calling You' . Saya tak tahu macam mana nak tukar blog title saya dan saya tak pandai nak letak lagu, gambar. Yang kat bahagian post tu, saya tak tahu nak letak apa. Mohon ajar. Kamsahamnida ^^ #akakwanabaik

  • dekat situ ada style wana jugak la. guna yang tu lah. saya faham jugak.

    Tapi style wana, macam mana nak letak cbox?

  • @Ziera zmr: Hm memang pun, tapi lama-lama terbiasa 🙂

  • @Cik Gee : Welcome ^^

  • @Eyqa rawr : nanti saya buat tuto ~

  • @Anessanaim : Maybe awak kena biasakan diri dengan blogskin. Cari dekat google "macam mana nak edit blogskin" or sesuatu macam tu ^^

  • Kakak , sy dah cuba buat. tapi tak jadi lah :/ gmb hover tak keluar pun :/

  • Thanks , wana ..but kenapa azwa buat hovernya tak center ye?? ada apa-apa code yang perlu saya ubah ke??

  • Saya guna denim template , tpi saya tak jumpa style klo tak jumpa < style ada code lain tak? selain dri style

  • @Mumtazah Rahim: cuba ]]>[/b:skin]

    @Azwar : Dia kebawah sikit eh ? cuba tambah margin-top:-20px; dekat bawah .ch-info {

    @Fateha Alim : Cuba buat semula sebab orang lain buat jadi.

  • Wana , azwa dah try da . cuma hover circle ni jadi ke tepi plak.. kenapa tak center ye?? ada code lain x untuk centerkan circle ni??

  • Daebakk!!!Thanks wana 😉

  • Menjadi!!! Thanks, Kak Wana!

    http://pelangi-iman.blogspot.com/

  • Terima kasih kak Wana sebab share tutorial yang awesomeeee ni ! even susah nak edit , pening dgn kod dia . tapi puas hati lahh . sebab menjadi . Thanks a lot Kak Wana !

  • Macam mana nak centerkan dia?

  • saya tak faham psl cbox version and so on smua tu..cmne ek?

  • @Hafizi Johan : letak code [center] sebelum semua code tu. guna < > gantikan [] tu

  • @Farra DeLee : Itu instruction je, kalau awak nak letak cbox guna code cbox, kalau nak letak benda lain semua guna yang saya bagi tu ^-^

  • thanks for this tuto wana. saya guna ne taw.

  • Putry rasa template designer boleh … cuma cari yang style tu ubah kepada ]]>

  • cool..saya ambik satu ye..boleh?

  • Wana, before ni saya ada guna tutorial circle hover effect ni jugak tapi style lain. Saya masih guna style tuh dan sekarang ni nak guna style yang ni pulak dekat image lain tapi tak jadi. Sebab apa ya ? Tak boleh guna dua gus sekali ya ? Harap Wana faham 🙂

  • This comment has been removed by the author.

  • Wana ^w^ Iris nak tanya!! Macam mana nak adjust besar circle tu eh?

  • the normal one punya html is broken.. dia x tukar image, when hover, only keluar the text. :)thanks for this

  • tq sis 🙂

  • akak saya nak guna yg nmber 3 tu bleh…gomawo ~_~

  • saya ambek 🙂

  • akak , nak tanya . nak ltak kat mana ya ? ni untuk blogskin atau template biasa pun boleh ?

  • bagaimana caranya bila di template designer?
    kode itu harus diletakkan sebelah mana ??

  • Akak , nak tanya . Kita guna template designer . Dah letak kod tu atas ']]>' . Lepastu kod yg untuk normal version tuh nak letak kat mana ?

    #Harap akk faham

  • saya amek yg ni 😉

  • Can move to centre ??

  • Alya guna tuto ni 🙂

  • kalau letak di header, macam mana ? 🙂

  • Thank you very much!

  • 🙂

»
«
WANA, TWENTY ONE
The girl on the left telling you to have a happy reading!

+ JOIN THIS SITE

Instagram

Footsteps

My Bloglist

Sponsor



© 2011-2017 WANASEOBY.COM