cara memasang menu vertikal floating slide out di blog

pada kesempatan ini saya akan mengajarkan gimn cara membuat menu vertikal floating slide out,..
yg akan muncul di samping kiri blog anda nantinya,..dan selain itu menu ini,.ketika cursor di gerakkan,.
dengan mouse pointer akan muncul dgn sendirinya,.tanpa di klik,..lihat gambar ini di bawah ini,.
yg nantinya akan mucul di samping blog anda,..

ok,..nggak usah berlama-lama lagi,..mari kita simak sama'' berikut ini,..

• buka akun blogger anda
• pilih Template / Rancangan
• klik Edit HTML
• centang Expand Widget Templates
• cari kode ini ]]></b:skin>
• dan copy kode di bawah ini ,tepat di bawah kode ini ]]></b:skin>

<style type="text/css">
ul#navigation{position:fixed;margin:0px;padding:0px;top:100px;left:0px;list-style:none;z-index:9999;}
ul#navigation li{width:100px;padding:0;margin:0;}
ul#navigation li a{display:block;margin-left:-2px;width:100px;height:50px;background-color:rgba(0,0,0,.5);background-repeat:no-repeat;background-position:center;border:1px solid #afafaf;-moz-border-radius:0 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:0 4px 3px #000;-webkit-box-shadow:0 4px 3px #000;opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
ul#navigation .home a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefEUwoHrNhZGZPxmApl8SCp88iXku7QwOpL067zxbfatikN2hL_O37yshMCeYYpgZCsATaXleVjNMRSDKIemFWzqSyaSKo2AWW9iOv0PZeYJmWSc4OU3L_aaAn4osQQ0_sGOUIX7S2B-9/s1600/sprite-icons.png);background-position: 25px -100px;}
ul#navigation .dashboard a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefEUwoHrNhZGZPxmApl8SCp88iXku7QwOpL067zxbfatikN2hL_O37yshMCeYYpgZCsATaXleVjNMRSDKIemFWzqSyaSKo2AWW9iOv0PZeYJmWSc4OU3L_aaAn4osQQ0_sGOUIX7S2B-9/s1600/sprite-icons.png);background-position: 25px -200px;}
ul#navigation .follow a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefEUwoHrNhZGZPxmApl8SCp88iXku7QwOpL067zxbfatikN2hL_O37yshMCeYYpgZCsATaXleVjNMRSDKIemFWzqSyaSKo2AWW9iOv0PZeYJmWSc4OU3L_aaAn4osQQ0_sGOUIX7S2B-9/s1600/sprite-icons.png);background-position: 25px -0px;}
ul#navigation .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefEUwoHrNhZGZPxmApl8SCp88iXku7QwOpL067zxbfatikN2hL_O37yshMCeYYpgZCsATaXleVjNMRSDKIemFWzqSyaSKo2AWW9iOv0PZeYJmWSc4OU3L_aaAn4osQQ0_sGOUIX7S2B-9/s1600/sprite-icons.png);background-position: 25px -50px;}
ul#navigation .folder a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefEUwoHrNhZGZPxmApl8SCp88iXku7QwOpL067zxbfatikN2hL_O37yshMCeYYpgZCsATaXleVjNMRSDKIemFWzqSyaSKo2AWW9iOv0PZeYJmWSc4OU3L_aaAn4osQQ0_sGOUIX7S2B-9/s1600/sprite-icons.png);background-position: 25px -150px;}
ul#navigation .guestbook a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefEUwoHrNhZGZPxmApl8SCp88iXku7QwOpL067zxbfatikN2hL_O37yshMCeYYpgZCsATaXleVjNMRSDKIemFWzqSyaSKo2AWW9iOv0PZeYJmWSc4OU3L_aaAn4osQQ0_sGOUIX7S2B-9/s1600/sprite-icons.png);background-position: 25px -300px;}
ul#navigation .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefEUwoHrNhZGZPxmApl8SCp88iXku7QwOpL067zxbfatikN2hL_O37yshMCeYYpgZCsATaXleVjNMRSDKIemFWzqSyaSKo2AWW9iOv0PZeYJmWSc4OU3L_aaAn4osQQ0_sGOUIX7S2B-9/s1600/sprite-icons.png);background-position: 25px -250px;}
</style>

• kemudian cari kode ini </head>
• dan copy kode di bawah ini , tepat diatas kode ini </head>

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

• jika selesai,..silahkan anda klik Simpan Template / Save

          nah,..langkah selanjutnya ikuti persyaratannya berikut ini,..

• pilih Tata Letak / Layout
• klik Tambah Gadget
• klik HTML / Javascript
• copas kode di bawah ini

        <ul id="navigation">
            <li class="home"><a href="http://ivankgribatako.blogspot.com" title="Home"></a></li>  
            <li class="follow"><a href="http://ivankgribatako.blogspot.com" title="Follow"></a></li>           
            <li class="link"><a href="http://ivankgribatako.blogspot.com" title="Links Exchange"></a></li>
            <li class="folder"><a href="http://ivankgribatako.blogspot.com" title="Sitemap"></a></li>
            <li class="guestbook"><a href="http://ivankgribatako.blogspot.com" title="Guest Book"></a></li>
            <li class="rss"><a href="http://ivankgribatako.blogspot.com" title="RSS Feeds"></a></li>
   <li class="dashboard"><a href="http://ivankgribatako.blogspot.com" title="Dashboard"></a></li>
        </ul>

'' catatan ''
   ganti warna merah dengan URL anda,..sesuai menu yg anda ingin kan,..good luck,..

• klik Simpan / Save
• selesai,..
• terakhir,..silahkan buka blog anda dan lihatlah hasilnya,..

       '' sekian dan terima kasih,..selamat mencoba,.sob..''

          W A S S A L A M . . .

Like the Post? Share with your Friends:-

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Digg
• LinkedIn
• Reddit
• Delicious
• Technorati