Slide Out Navigation

DEMO

Cara Pemasangan:

• Login ke Blogger
• Klik Tata Letak
• Klik "Tambah Gadget" pilih "HTML/JavaScript
• Copy kode Di Bawah ini 

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-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=80);
}
ul#navigation .home a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#navigation .about a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#navigation .search a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#navigation .comment a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#navigation .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#navigation .tool a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#navigation .contact a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
</style>

<ul id='navigation'>
<li class='home'><a href='LINKSOBAT' title='Home'></a></li>
<li class='about'><a href='LINKSOBAT' title='About'></a></li>
<li class='search'><a href='LINKSOBAT' title='Search'></a></li>
<li class='comment'><a href='LINKSOBAT' title='Comment'></a></li>
<li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>
<li class='tool'><a href='LINKANDA' title='Tool'></a></li>
<li class='contact'><a href='LINKSOBAT' title='Contact'></a></li>
</ul>

• Save Widget
• Langkah selanjutnya cari kode seperti ini </head> di template Sobat
• Copy kode di bawah ini dan letakkan tepat diatas kode  </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

PERHATIAN!!

Jika di template Sobat sudah pernah dipasang kode
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
sebaiknya kode tersebut tidak usah dipasang

• Save Template

Sumber : http://art-preview.blogspot.com/2012/06/slide-out-navigation.html

BackLink please. Thanks! ^^

URL

Code For Forum

HTML Code <a href='http://edho-xp.blogspot.com/2012/10/slide-out-navigation.html' target='_blank'>Slide Out Navigation</a>

About EDHO-XP Author

Nama gue Edo Cosma. Nama asli gue Ahmad Dhoifullah . Gue orang nya sedikit pendiam dan pemalu. Apa lagi gue masih menduduki kelas 8 / 2 SMP tepatnya di sekolah SMPN 3 BATANGHARI sekolang yang berada di kotaku. Ini blog hanya percobaan dan iseng aja kok sob. Salam kenal yah sob !

Selengkapnya Tentang Admin EDHO-XP »

Baca Juga Yang dibawah Ini :