Tuesday 26 February 2013

HOVER BLOCKQUOTE (CUTE ICON MUNCUL BILA CURSOR MEYENTUH)

PENTING!
Sebelum membuat apa-apa pengubahsuaian template anda (pada Edit HTML) , anda dinasihatkan supaya mem'backup dahulu template untuk langkah keselamatan jika berlaku error semasa membuat pengekodan template. Klik SINI untuk melihat tutorial untuk membuat BACKUP dan RESTORE Template... :)



Sebelum Disentuh Cursor

Selepas Disentuh Cursor

Amacam cantik tak...korang nak...ok jom kite buat sama...ikut tutorial kat bawah ni k..

1. Login ke dashboard blogger korang.
2. Klik butang " More Option (rujuk no 1) " dan klik "Template (rujuk no 2)".


3. Klik pada " Edit HTML (rujuk no 3) "

4. Tick pada Expand Widget Templates (rujuk no 4)



5. Tekan CTRL+F atau F3 dan cari code dibawah (rujuk no 5).
.post blockquote {
6. Korang highlight dan padam kod yang sedia ada. (rujuk no 6).


7. Copy( CTRL+C ) kod dibawah dan Paste( CTRL+V ) pada area kod yang korang sudah dipadam tadi.

.post blockquote {background-image:url(URL GAMBAR BACKGROUND);padding:5px;Border:1px solid #BF00BF;colour:#FFFFFF}
.post blockquote:hover {background-color: ##A9F5BC;-webkit-transition-duration: 3.5s;background-image:url(URL GAMBAR ICON);background-position:bottom right;background-repeat:no-repeat;-webkit-border-radius: 36px 12px;-moz-border-radius: 36px 12px;-webkit-transform: skew(1.deg,1.5deg);-moz-transform: rotate(3deg);-webkit-transform: rotate(3deg);}

8. Gantikan URL GAMBAR BACKGROUND dengan link gambar background  ynag korang nak. Dibawah ni ada beberapa contoh:


http://dl9.glitter-graphics.net/pub/1062/1062499y9n7hd5wy9.png

http://dl7.glitter-graphics.net/pub/2730/2730267baqumpdcd2.gif

http://dl2.glitter-graphics.net/pub/915/915132gu2cewfq0i.gif

http://sl.glitter-graphics.net/pub/658/658634cdu9wz29u9.gif

http://sl.glitter-graphics.net/pub/552/552091ziumvhzbvn.jpg

http://sl.glitter-graphics.net/pub/264/264393ps0ft3rzze.gif

http://sl.glitter-graphics.net/pub/2734/2734521issu0wenru.png


9. Gantikan URL GAMBAR ICON dengan link icon yag korang nak. Dibawah ni ada beberapa contoh ikon:

http://dl8.glitter-graphics.net/pub/39/39368n1b2x3prdz.gif
http://dl9.glitter-graphics.net/pub/679/679789gs2dqrx3bd.gif
http://dl6.glitter-graphics.net/pub/584/584776qvkek99ty3.gif
http://dl9.glitter-graphics.net/pub/244/244519cj7iewvdtg.gif
http://dl4.glitter-graphics.net/pub/772/772194zn1mdfi11c.gif

10. Klik Preview dan kalau ok klik Save Template




SEMOGA DAPAT MEMBANTU.... :)

No comments:

Post a Comment