Tutorial Slide image link

direquest oleh : http://aqila-farah.blogspot.com/

copy and paste kod di bawah di tempat yang korang nak benda ni muncul
jangan lupa ubah benda yang berwarna merah
edit kod di bawah di sini

<style type="text/css">

.button

{width:50px;

height:50px;

margin-bottom:3px;

overflow:hidden;

border:3px solid ;

background-color:;}



.nav

{padding-top:0px;

height:30px;

text-align:center;

width:50px;

text-transform:uppercase;

font-family:consolas;

font-size:8px;

letter-spacing:4px;

color:#000;

background-color:;

margin-right:3px;}



.buttons

{height:50px;

width:50px;}



#line

{margin-left:-53px;

-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}



#line:hover

{margin-left:0px;}





/***SLIDEOUT MENU***/

#slideout {

/* For IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='')";

/* For IE 5.5 - 7 */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='');





z-index:1000;

position: fixed;

top: 140px;

left: 0px;

width: 15px;

height:155px;

padding: 40px 0;

text-align: center;

background: #ddd;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

}



#slideout_inner {







/* For IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='')";

/* For IE 5.5 - 7 */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='');





position: fixed;

top: 140px;

left: -390px;

background: #ddd;

width: 360px;

padding: 10px;

height: 256px;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

text-align: left;

}



#slideout:hover {

z-index:1000;

left: 250px;}



#slideout:hover #slideout_inner {

z-index:1000;

left: 0;}
</style>

<div style="background-color: white; border: 0px solid #000000; height: 56px; overflow: hidden; text-align: center; width: 56px;">

<a href="link URL"></a>
<div class="button">
<a href="link URL">
</a>
<table border="0" cellpadding="0" cellspacing="0" id="line"><tbody>
<tr>  <td><div class="nav">
tajuk</div>
</td>  <td><img class="buttons" src="http://i1072.photobucket.com/albums/w376/buddy7432/home1.jpg" /></td>  </tr>
</tbody></table>
<a href="link URL">
</a></div>
</div>

<div style="background-color: white; border: 0px solid #000000; height: 56px; margin-left: 58px; margin-top: -56px; overflow: hidden; text-align: center; width: 56px;">

<a href="link URL"></a>
<div class="button">
<a href="link URL">
</a>
<table border="0" cellpadding="0" cellspacing="0" id="line"><tbody>
<tr>  <td><div class="nav">
tajuk</div>
</td>  <td><img class="buttons" src="http://i1072.photobucket.com/albums/w376/buddy7432/about1.jpg" /></td>  </tr>
</tbody></table>
<a href="link URL">
</a></div>
</div>

<div style="background-color: white; border: 0px solid #000000; height: 56px; margin-left: 116px; margin-top: -56px; overflow: hidden; text-align: center; width: 56px;">

<a href="link URL"></a>
<div class="button">
<a href="link URL">
</a>
<table border="0" cellpadding="0" cellspacing="0" id="line"><tbody>
<tr>  <td><div class="nav">
tajuk</div>
</td>  <td><img class="buttons" src="http://i1072.photobucket.com/albums/w376/buddy7432/th_huhu.jpg" /></td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; border: 0px solid #000000; height: 56px; margin-left: 174px; margin-top: -56px; overflow: hidden; text-align: center; width: 56px;">

<a href="link URL"></a>
<div class="button">
<a href="link URL">
</a>
<table border="0" cellpadding="0" cellspacing="0" id="line"><tbody>
<tr>  <td><div class="nav">
tajuk</div>
</td>  <td><img class="buttons" src="http://i1072.photobucket.com/albums/w376/buddy7432/th_linkies.jpg" /></td>  </tr>
</tbody></table>
<a href="link URL">
</a></div>
</div>
</div>

tutorial ni senang je sebab hazirah dah betulkan kod die . entah mengapa sekali percubaan tak berjalan dengan lancar , dan kod ni dah diubah 74% daripada yang asal . so ? good luck . kalau dah cuba bagitahu , kalau tak berjaya pun bagitahu nak tengok siapa yang salah koding tu . belajar daripada kesilapan!

-Hazirah Muslim