Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. | Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. |

Senin, 05 Maret 2012

Membuat Menu Floating Slide Out Vertical Blog


Haduh, kehabisan bahan posting, mendingan share widget milik sendiri aja deh. Pada posting kali ini saya share aja, 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, ya udah deh, ni 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> :

<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js"></script>

<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://nthoeng.blogspot.com/">Home</a></li>
<li class="nav2"><a href="http://nthoeng.blogspot.com/feeds/posts/default">Rss Feed</a></li>
<li class="nav3"><a href="http://nthoeng.blogspot.com/p/blog-teman.html">Blog Teman</a></li>
<li class="nav4"><a href="http://nthoeng.blogspot.com/p/site-map_21.html">Site Map</a></li>
<li class="nav5"><a href="javascript:showHideGB()">Guestbook</a></li>
<li class="nav5"><a href="http://nthoeng.blogspot.com/p/fan-page.html">Fan Page</a></li></ul>

      7.  Dan Simpan.

Nb : Teks Berwarna merah merupakan Script Jquery, jika pada templatemu sudah ada script jquery 1.3.2, maka kamu tidak perlu memasangnya lagi, untuk teks warna hijau ganti dengan Url gambar yang akan di tampilkan sebagai thumnail, dan silahkan sesuaikan url pada Html/Javascriptnya.

Selamat Mencoba Dan Semoga Berhasil !!!

12komentar:

hzndimengatakan...

wah boleh ane coba ini bang

pelangi sepimengatakan...

nice blog

ayumengatakan...

nak cuba..

Galihmengatakan...

Thankz, ,Di Coba Di coba, ,xixixixi.

Kageki Mitsuomengatakan...

mantap mas,,, makasih tutorialnya :D

Galihmengatakan...

Sama Sama Soob !!!

jalupangnamengatakan...

blognya manteb, postingan artikelnya bagus2. 2 jempol buat anda dan makasih tutorialnya. lam kenal..

baskara eprmmengatakan...

udah dicoba.. masih ga ngerti caranya

Narya Ratnamengatakan...

mantep gan, terus biar dpat url gambarnya yang bagus dimana gan, maaf ane newbie baru belajar ngeblog hehhe

Narya Ratnamengatakan...

gan, kalau boleh tanya, kenapa ya pas ane pake di blog ane,menu floatingnya ukurannya terlalu besar dan saling bertumpuk, mau di kecilin tp gk bisa, tolong di bantu ya gan,ane kasih SS nya, http://prntscr.com/nqari
makasih sebelum nya

Galihmengatakan...

Untuk Url Gambar, bisa cari di google, cari yang ukuran icon, klau msalah ukuran terlalu besar bisa di edit di scriptnya saja. .

bagas wahyumengatakan...

makasih mas infonya

Posting Komentar

TwitterDeliciousFacebookDiggStumbleuponFavoritesMore