Slide Out Navigation

Slide Out Navigation Menu

 Demo

Cara memasang :

• 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

Posted by Unknown

Tweet