Cara Membuat Menu Floating Slide Out Vertical Di Blog

Pada posting kali ini saya akan share tentang cara membuat menu slide out melayang di atas halaman blog seperti pada blog ini, pengunjung akan disuguhi navigasi yang mudah dan dengan tampilan yang dinamis terlihat lebih menarik,serta menghemat tempat pula, berikut langkah-langkahnya :

1. Log inke Blogger.
2. Pilih Rancangan dan Edit Html, jangan lupa centang Expand Template Widget, bila perlu Backup terlebih dahulu templatemu agar jika terjadin galat mudah dikembalikan.
3. Cari kode </head>, gunakan Cttrl+F agar lebih mudah, copy script berikut dan pastekan di atas kode </head> :

FF0000<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js"></script>FF0000 <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>

     4. Kemudian cari kode ]]></b:skin> dan letakkan kode Css berikut di atas ]]></b:skin>

/*Navigasi*/ ul#navigation { position:fixed; margin:0px; padding:0px; top:-20px; left:370px; list-style:none; z-index:999999; width:675px; font:normal 16px Electrolize,Sans-Serif bold; -webkit-animation:2s fxhompinav ease-in-out; -moz-animation:2s fxhompinav ease-in-out; -ms-animation:2s fxhompinav ease-in-out; animation:2s fxhompinav ease-in-out; } ul#navigation li { width:95px; display:inline; float:left; margin:0 0 0 2px; } ul#navigation li a { display:block; float:left; margin-top:-74px; width:95px; height:28px; background-color: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6); background-repeat:no-repeat; background-position:50% 150px; border:2px solid #b9b9b9; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -khtml-border-bottom-right-radius:10px; -khtml-border-bottom-left-radius:10px; border-radius:0px 0px 10px 10px; color:#333333; text-decoration:none; text-align:center;color:#f1f1f1; text-shadow:0 1px 1px #000; padding-top:95px; -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; } ul#navigation li a:hover { margin-top:-3px; background-position:50% 25px; color:#7b7b7b; position:relative; } ul#navigation li a:hover:after { content:""; width:0px; height:0px; position:absolute; top:100%; left:45%; margin-top:2px; border-width:5px; border-style:solid; border-color:transparent transparent lime transparent; } ul#navigation li:nth-child(1) a {background-image:url(Url Gambar Menu ke 1); } ul#navigation li:nth-child(2) a { background-image:url(Url Gambar Menu ke 2); } ul#navigation li:nth-child(3) a { background-image:url(Url Gambar Menu ke 3); } ul#navigation li:nth-child(4) a { background-image:url(Url Gambar Menu ke 4); } ul#navigation li:nth-child(5) a { background-image:url(Url Gambar Menu ke 5); } ul#navigation li:nth-child(6) a { background-image:url(Url Gambar Menu ke 6); } @-webkit-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-moz-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} /*Navigasi*/

     5.  Kemudian Simpan Template.
     6.  Selanjutnya Masuk ke Elemen Laman, dan Tambah Gadget Html/Javascript, masukan script berikut :

<ul id="navigation">
<li class="nav1"><a href="http://dinastikencana.blogspot.com/">Home</a></li>
<li class="nav2"><a href="http://dinastikencana.blogspot.com/feeds/posts/default">Rss Feed</a></li>
<li class="nav3"><a href="http://dinastikencana.blogspot.com/p/blog-teman.html">About me</a></li>
<li class="nav4"><a href="http://dinastikencana.blogspot.com/p/site-map_21.html">Site Map</a></li>
<li class="nav5"><a href="javascript:showHideGB()">My pinterest</a></li>
<li class="nav5"><a href="http://dinastikencana.blogspot.com/p/fan-page.html">FB Fans Page</a></li></ul>

         Kemudian ganti keterangan yang warna biru dengan URL sobat.

    7.  Dan Simpan.

This post was written by: Author Name

Your description comes here!

Get Free Email Updates to your Inbox!

• Rss
• Twitter
• FaceBook
• Google +

Filed Under: tips blogging on Sabtu, 08 Desember 2012