Tutorial: Hover image with text(Template Designer)

Assalamualaikum...

Hehee...terdetik di hati hendak buat tutorial. Boleh, kan? Even this is for the first time. Just want to share this tutorial which usually only works in blogskin. It's about this.



How to make this? Let's follow the step :

1. Go to Dashboard-->Template-->Edit HTML
2. Search code ]]></b:skin> by pressing ctrl & F at the same time. To make it easy & fast.
3. Copy the code below and Paste it above the ]]></b:skin> code.

#elf{
font-size:12px;
background:#fff;
padding:1px;
width:258px;
height:152px;
margin-top:-163px;
margin-left:1px;
opacity:.01;
-webkit-transition:all .5s ease-in-out
}
#elf:hover{opacity:.9}
red-change with your own font size. The larger the size, the bigger the font.
blue-you can change it according to your image size.
orange-margin here means how to make it fit with your image. margin-top, the larger the negative number, the higher its position. margin-left, the larger the number, the deeper it will be into your image.
brown-this for the opacity of the background. the larger the number, the opacity will be increase.

4. Preview. If there is no error, then you can click save.

5. Go to Papan Pemuka(Dashboard)-->Reka Letak-->Add Gaget-->HTML/Javascript.
6.Copy and Paste the code below in HTML/Javascript.
<img src="http://3.bp.blogspot.com/-HrMPPEkyqOk/UMQh-t8uGHI/AAAAAAAACUo/kvGnQkINDE4/s1600/sj2.png" width="262" height="152"/><div id="elf">
YOUR TEXT</div>

orange-your own image url
purple-you can use that code if your image too big.
red-put your own text

7.Save. Done.

Goodluck & Happy Blogging!
Comment me then.




    


No comments :