Men Slide Out Ini Sangatlah Comel Kerana Ianya Mempunyai Pelbagai Warna,Tambahan Pula Ianya Berada Pada Tepi Bahagian Blog Dan Ianya Tidak Menganggu Pelawat Anda Membaca Artikel.
1.Login Ke Blogger
2.Layout' > Add a Gadget' > 'HTML/Javascript
3.Copy Dan Pastekan Dalam Widget Anda.Siap!
<style>
ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 120px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}
ul#navigation1 li a {
display: block;
margin-right: -2px;
width: 120px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvOvG7UgpOP0961NBUFsqeSO5uiHoEePClzt4mX7EE-HOXtn-SFl0vFNwC9rMvQxRbeIB33MoobmJejEL86LpHRd5DZyBYuUH1Hed6WlFlX-rqMdGgyhyHeDALgpZlyMXz7io2xKgRMME/s400/rss.png);
}
ul#navigation1 .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyBt-SB5Rpls6bR7yn8lyWvRRi7d_lADwvnLvUh7zbWUfemSbhWNFWPSWmTpyRgdasqAB1B6oFF3H5TKs8tiACfDnsyyimfXjYi24be7bd-Wnh-tjkyJpeW8kt7mIwLUc6xyXiAkklK4/s400/facebook.png);
}
ul#navigation1 .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOqEXKXvkj-PeVxRudmGamwQ0Ydxb4hbAp2NSmwgTmu5Y7Q9BmQCrc-DTbt3XerFWxFGUTOzG1Hym2cEP0iohAm-tQD_T7TwirDumMVPPecFg6N4xMz4rge-DCdV25oG7aSij2EukHHM/s400/twitter.png);
}
ul#navigation1 .profile a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDEV2_Gl-rqkAeIiEGtru9GmbhNiA8tHEk8HhoqM1o-rZdefRJOCghsuX0GKt2U8tftraAPtYgisHHjFNHfhESrCKdoqtnX4DbxEtq92-FZChx0dV4L-sEHtfDLDG9o-4GfcQdGkeWUJI/s400/photo.png);
}
ul#navigation1 .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21nXg-gn4-irIjJC5k4wOz9dmGop30jryicX2vpUMR1SgQ1iHH5Cie0i35JQwBwDDzwbd4qvFmBqm2vmeKqm5s1mZr2zPWhlnx77JPc0j5N_tdV5AkZDx2RRWlfBFGNZdU7tNbcAlprc/s400/mail_edit.png);
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'85px'},1000);
$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'85px'},200);
}
);
});
</script>
<ul id="navigation1">
<li class="rss"><a href="http://masukkan-nama-blog-disini.blogspot.com/atom.xml"></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"></a></li>
<li class="profile"><a href="http://draft.blogger.com/profile/masukkan-ID-Profile-disini"></a></li>
<li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"></a></li>
</ul>
Sila Kongsi Artikel Ini Dengan Kawan2 Anda,Berkongsi Itu Indah!!! Klik Butang Dibawah.
