Tutorial :mesage hover image

ASSALAMMUALAIKUM :')

                     hari ini iera nak post sebuah tuto ^^ sebab ada encik ni mintak tolong.. ENCIK D.B.s.W.. ni~ dia minta tolong macam mana nak buat message hover image~ korang tahu tak message hover image tu aper? tak tahu yer.. yang ada gambar orang perempuan german tu~ ^_^ 

*KLIK JIKA TAK NAMPAK*

        yang ditunjuk didalam gambar itulsh~ tahu kan? kalau nak cuba buat jugak teruskan membaca okey~ ^_^ Iera cuma ajar yang hover image tu jer~ yang tab kat bawah gambar tu next time~kay?

• ikut turutan di bawah

• Dashboard > template > edit HTML > tekan ctrl+F serentak

cari kod: /* header

• than copy kod kat bawah ni:

a.navigate {
border:2px solid #E1DFE0;
border-radius:3px;
background:#F9FDFF;
color: #A2A1A3;
-webkit-transition: 1s;
padding:2px;
}
a.navigate:hover {
background:#FFBED8;
color: #FFFFFF;
text-decoration: none;
-webkit-transition: 0.5s;
}
#ck{
background:#f0eeeb;
color:#000;
width:180px;
height:139px;
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}
}

•  lepas tu paste dekat atas kod /*header tadi lepastu preview dulu, kalau OK, SAVE :)

• step two : REKA LETAK > ADD GADGET > HTML

copy kod ni:

<center><img height="142" src="https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcTQyz4GBoUfEleIb-0TAys3Oh8EdWX40bgEDZVrN2piKzrdL8e97A" width="230" /><br />
<div id="ck">
kod pilihan<br />
<center></center></div></center>

#  merah : korang boleh tukar dengan URL gambar korang sendiri

#  ungu : kod pilihan korang nak letak, lagu atau ayat dan lain-lain

*  Dah jadi, jangan lupa komen kay~ kalau nak copy tuto ni credit back here~ kay! (JUJUR)