Tutorial Hover the Image di Blogskin

Hey hye there! salam semua..i found that this tutorial agak best untuk korang try.soo tutorial ini kredit 100% for Nurin Arsyada ok.




Hello Guys!

Hari ni Nurin nak buat satu tuto yg direquest oleh seseorg di C-Box Nurin, sorry sbb lambat buat :) Hover image ada banyak jenis, tapi yg ini.. my version.. hahhaha.. Nurin reka code dia sendiri.. so, kalau guna tuto ni sila credit :) Hanya utk pengguna Blogskin sahaja !

LIVE PREVIEW HERE!

  • Copy code di bwh ni & paste sebelum </style>
.bar {
background: #ffffff;
color: #555;
font:normal 8px pixeljosh6;
padding: 8px;
width: 240px;
text-align: justify;
border:1px solid #dddddd;
}
#slide{
position:fixed !important;
padding-bottom:13px;
padding-top:15px;
height:190px;
width:260px;
overflow:hidden;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
z-index:999;
font-size: 11px;}

#slide:hover{
width:260px;
height:585px;
}
.border1{height:170px;width:250px;padding:3px;border:1px solid #D7CDBD;-moz-box-shadow:2px 2px 2px #e9e9e9; -webkit-box-shadow: 5x 5px 7px #e9e9e9; -khtml-box-shadow: 5px 5px 7px #e9e9e9; overflow: hidden;}
  

  • Done? lepas tu copy code bawah ni pulak and paste selepas <BODY> or </style>
<td valign="top" width="200px">
<div style='display:scroll; position:fixed;'>
<div id="slide">
<center><div style="background:#fff;border-right-radius: 9px;border-left-radius: 9px; width:90px;padding:3px;border:1px solid #dedede;
font:normal 8px pixeljosh6;">Hover The Image</div>
<img class="border1" src="Your Image Here!" /><br><br>
<div class="bar">
Your Description Begin Here :)</div>

Orange : Letak gmbr korang 
Italic : Tulis apa2 description kat situ :)

Preview dulu, kalau dah puas hati.. barula Save Template, okey.. that's all for today.. Tutorial ni hanya utkpengguna Blogskin sahaja :) 



Thanks :Nurin Arsyada
Diya: sorry tak sempat nak reply mesej korang di comment box Diya.. U_U

5 comments:

  1. SUdi jadi sponsor utk giveaway saya tak?

    http://princessaliessa.blogspot.com/2012/11/pencarian-sponsor-untuk-giveaway.html

    ReplyDelete
  2. asslammualaikom awk..thnks give me toturial..boleh x awk romote my blog..http://pndotcom1998.blogspot.com/
    tolong tau...

    ReplyDelete
  3. please prmote my blog..http://pndotcom1998.blogspot.com/
    tolong tau..thnk toturial

    ReplyDelete

What do you think? Leave a comment :)