5/30/14

Tutorial: Floating rectangle with hover effect

Assalamualaikum.

Tajuk tu main bantai je bagi nama sebenarnya lol.

  
Ni contoh floating rectangle yang dimaksudkan tu. Boleh diletakkan di mana-mana bahagian blog and boleh isi dengan quotes ke, introduction ke, status ke, tak kisah lah apa-apa pun.

Ni tutorial untuk menjawab persoalan cik anon hari tu.

Rectangle tu boleh letak dekat mana-mana sebenarnya, tapi perlu diingat ni code untuk floating punya. 

Cadangan pertama:
Letak floating rectangle atas opaque background ala-ala sidebar. Ni cadangan je tau. Nanti ubahlah codes ikut kreativiti and cita rasa.

  • Copy the codes below. Highlight text and tekan Ctrl + C serentak untuk copy.
#sideu {
position: fixed;
top:0px;
left:0px;
width:233px;
height:100%;  background: #d0d0d0;
background-size: cover;
    }
 
#quotes {
    position: fixed;
    top:290px;
    left:10px;
    width: 180px;
    height:auto;
    font: 11px century gothic;
    letter-spacing:1px;
    line-height:140%;
    text-align: justify;
    color:#000;
    z-index:22;
    background:#fff;
    padding: 15px;
    height:auto;
    line-height:15px;
    opacity:0.6;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out
    }
#quotes2 {
    position: fixed;
    top:390px;
    left:10px;
    width: 180px;
    height:auto;
    font: 11px century gothic;
    letter-spacing:1px;
    line-height:140%;
    text-align: justify;
    color:#000;
    z-index:22;
    background:#fff;
    padding: 15px;
    height:auto;
    line-height:15px;
    opacity:0.6;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out
    }
#quotes3 {
    position: fixed;
    top:506px;
    left:10px;
    width: 180px;
    height:auto;
    font: 11px century gothic;
    letter-spacing:1px;
    line-height:140%;
    text-align: justify;
    color:#000;
    z-index:22;
    background:#fff;
    padding: 15px;
    height:auto;
    line-height:15px;
    opacity:0.6;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out
    }
 
#quotes:hover {
    opacity:2;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out}
#quotes2:hover {
    opacity:2;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out}
#quotes3:hover {
    opacity:2;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out}
  • Untuk pengguna simple template (Template Designer), buka Edit HTML, tekan Ctrl + F serentak dan cari code ]]></b:skin>. Paste codes tadi di ATAS code ]]></b:skin> dan save.
  • Untuk pengguna blogskin (Classic Template), buka Template, tekan Ctrl + F serentak dan cari code </style>. Paste codes tadi di ATAS code </style>
  • Copy codes ni pulak.
<div id="sideu"></div>

<div id="quotes">Welcome to my blog. My name is Kimchi and I like Kimchi blablablablabla~</div><br/>
<div id="quotes2">Hello, konichiwa, annyeong haseyo, blablablablabla................ .....................................</div>
<div id="quotes3">I don't want much, I just want eveything, blablablablablabla~</div>
  • Untuk pengguna simple template (Template Designer), pergi ke Layout>Add a gadjet>HTML/JavaScript. Paste codes tadi ke dalam bahagian Content. Tak perlu letak Title. Then, save.
  • Untuk pengguna Blogskin (Classic Template), pergi ke Template. Tekan Ctrl + F serentak dan cari code </style>. Tampal codes tadi di BAWAH code </style>
  • Tukarlah ayat tu dengan ayat sendiri. Boleh tukar warna background #d0d0d0 tu kepada warna lain. Position rectangle tu pun boleh adjust. Tukar je bahagian top: (nombor)px tu kepada nombor lain. Semakin besar nombor, semakin ke bawah rectangle tu. Ni contoh untuk tiga rectangle. Kalau nak kurangkan jadi dua atau satu rectangle, padamlah codes apa yang patut. Nak kecikkan width pun boleh adjust.
  • Preview dulu, then save bila dah puas hati.
Cadangan kedua:
Letak floating rectangle atas background biasa. Ni contoh je. Boleh ubah warna and position ikut kreativiti.

  • Copy the codes below. Highlight text and tekan Ctrl + C serentak untuk copy.
#quotes {
    position: fixed;
    top:30px;
    left:10px;
    width: 180px;
    height:auto;
    font: 11px century gothic;
    letter-spacing:1px;
    line-height:140%;
    text-align: justify;
    color:#000;
    z-index:22;
    background:#fff;
    padding: 15px;
    height:auto;
    line-height:15px;
    opacity:0.6;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out
    }

#quotes2 {
    position: fixed;
    top:130px;
    left:10px;
    width: 180px;
    height:auto;
    font: 11px century gothic;
    letter-spacing:1px;
    line-height:140%;
    text-align: justify;
    color:#000;
    z-index:22;
    background:#fff;
    padding: 15px;
    height:auto;
    line-height:15px;
    opacity:0.6;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out
    }
 
#quotes:hover {
    opacity:2;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out}

#quotes2:hover {
    opacity:2;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out}
  • Untuk pengguna simple template (Template Designer), buka Edit HTML, tekan Ctrl + F serentak dan cari code ]]></b:skin>. Paste codes tadi di ATAS code ]]></b:skin> dan save.
  • Untuk pengguna blogskin (Classic Template), buka Template, tekan Ctrl + F serentak dan cari code </style>. Pate codes tadi di ATAS code </style>
  • Copy codes ni pulak.
<div id="quotes">Welcome to my blog. My name is Kimchi and I like Kimchi blablablablabla~</div><br/>

<div id="quotes2">Hello, konichiwa, annyeong haseyo, blablablablabla................ .....................................</div>
  • Untuk pengguna simple template (Template Designer), pergi ke Layout>Add a gadjet>HTML/JavaScript. Paste codes tadi ke dalam bahagian Content. Tak perlu letak Title. Then, save.
  • Untuk pengguna Blogskin (Classic Template), pergi ke Template. Tekan Ctrl + F serentak dan cari code </style>. Tampal codes tadi di BAWAH code </style>
  • Tukarlah ayat tu kepada ayat sendiri. Boleh tukar warna background rectangle tu kepada warna lain selain putih. Position rectangle tu pun boleh adjust. Tukar je bahagian top: (nombor)px tu kepada nombor lain. Semakin besar nombor, semakin ke bawah rectangle tu. Kalau nak kurangkan jadi satu rectangle, padamlah codes apa yang patut. Nak kecikkan width pun boleh adjust.
  • Preview dulu, then save bila dah puas hati.

Sekian~~~

14 comments:

  1. wow nice tutorial I love this...

    boleh pakai utk letak dekat bahagian header jugak ke? macam blogskin buat? :)

    ReplyDelete
  2. @Junkyo No Hikari
    kalau nak letak kat header pun boleh rasanya, cuma ada bahagian codes yang kena tukar supaya box tu tak fixed :)

    ReplyDelete
  3. Macam best je ada panel yang tu, tutorial ni utk full sidebar yg kiri ke eh?

    ReplyDelete
  4. @Ibnu Ramli
    tak berapa nak full macam sidebar kiri dekat blog yang sekarang ni, cuma rectangle dengan cadangan nak letak macam mana je~

    ReplyDelete
  5. owh XDD hehe thanks :)

    nanti nak try boleh ke tak XDD

    ReplyDelete
  6. wahhhh.... terer sungguh bap2 coding... pelajar ict ke???

    ReplyDelete
  7. @Junkyo No Hikari
    Dipersilakan try :)

    @Lee Wa Wan
    Bukan pelajar ict pun XD
    Bakal pelajar medik actually.

    ReplyDelete
  8. wahh congrets sis. i know you can do it. fighting ;))))

    ReplyDelete
  9. Kak, awat pnjang sngat ? Tak pelah. Nak try jugak !

    ReplyDelete
  10. @shida jamal ♡
    :D

    @Suraya Pakair
    Panjang sebab banyak rectangle + ada hover effect >.<
    orait silalah~

    ReplyDelete
  11. Tahniah..semoga berjaya mengejar cita-cita

    ReplyDelete