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.

CLICK HERE FOR LIVE DEMO

• 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.

CLICK HERE FOR LIVE DEMO

• 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~~~