Tutorial : Image Hover Text (Blogskin)


Assalamualaikum and annyeonghaseyo. Tutor yang ini tieqa nak ajar cara untuk letak image hover pada image/text. Act, image hover ni tieqa pernah gunakan dalam skin yang INI, kalau korang perasan. So, bagi sesiapa yang nak buat mcm tu. Bole ikut step ni.

Contoh image hover text

1. Dashboard > Template
2. Press Ctrl + f dan cari code </style>
3. Copy code dkt bawah ni
#ck{
background:#f0eeeb;
color:#000;
width:230px;
height:142px;
margin-top:-147px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out; }
#ck:hover{opacity:.7}
4. Paste di atas code tadi
5. Next, copy code ni pulak
<center><img height="142" src="URLIMG" width="230" /><br>
<div id="ck"><br>
AYATKORANG
</div><br>
6. Paste dekat tempat yang korang nak letak hover tu. Contohnya mcm tieqa, tieqa letak dekat bahagian D'Owner.
7. Preview & save

oren : background hover
hijau : tinggi & lebar hover
biru : URL gambar
pink : ayat korang

15 comment [s]:

Anis Amila said...

kak tiqah , cam mana nak letak navigation kita kat dlm gmbr tu ? ajar boleh ?

Nurul AtiQah said...

@Anis Amila : Kalau nak letak navigate. Just copy code navigate blog adik, the paste dkt bahagian 'ayat korang' tu :)

Faten said...

nice . menjadi dear . senang nk phm . thanks :)

Nurul AtiQah said...

@Faten : Good then, u're welcome :)

pinkly said...

jadi untuk blogskin je ke kak ?
kalau untuk denim template camane ?

Nurul AtiQah said...

@pinkly : Yup, tuto ni utk blogskin sahaja :) denim template tak sure bole buat ke tidak :/

light drita said...

im using it..jeongmal kamsahamnida!!

Nurul AtiQah said...

@light drita : Sure..nae cheonmaneyo :)

Nurul Hayati said...

sis, err.. mcm mana nk buat navigate.. mcm navigate untuk entries, about, linkies, stuff tuh.. please akak.. saya pengguna blogskin jugak.. tapi blog saya tuh mmg takdak navigate.. :( jadi saya nk tambah..

Nurul AtiQah said...

@Nurul Hayati : ouhh. bole refer tutor ni http://nurulatiqahjaidin.blogspot.com/2012/06/tutorial-simple-navigation-blogskin.html

NurulAssilah_ said...

Hmm. Oke yg nih. Thanks ye kak. :)

Scya Fiqah said...

nice tutorial .. Thanks kak ..

Nadiah Solehah said...

Kak tieqa, kita re-post tuto ni tau. Tapi kita janji! Akan credits. :)))

Nurul AtiQah said...

@NurulAssilah & Scya Fiqah : U're welcome, dik :)
@Nadiah Solehah : Boleh..ok thanks ^^

Nurul Anisah said...

Dah jadi.Thank you :)