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 ?

atiqahjaidin 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 :)

atiqahjaidin said...

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

pinkly said...

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

atiqahjaidin said...

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

farizah said...

im using it..jeongmal kamsahamnida!!

atiqahjaidin said...

@light drita : Sure..nae cheonmaneyo :)

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

atiqahjaidin said...

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

Nurul Assilah said...

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

Unknown said...

nice tutorial .. Thanks kak ..

Nadiah Solehah said...

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

atiqahjaidin said...

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

anshmnf said...

Dah jadi.Thank you :)