Cara Buat dan Pasang Javascript Hidden Side Menu (Side Menu Tersembunyi)

Side menu tersembunyi (Hidden Side Menu) satu ini amat berbeda dengan side menu atau menu samping tersembunyi/hidden side menu yang lain. Meskipun sering kali hanya diletakkan pada samping kanan atau kiri blog, tetapi jika sampeyan menginginkan si side menu tersembunyi ini menempati posisi di bagian atas blog, dengan amat mudahnya tinggal ganti saja kode perubah posisi side menu. Jika sebelumnya "left" atau "right", maka gantilah dengan "top". Dalam sekejap si menu akan berpindah posisi di bawah navbar (blog bagian atas). Dengan sekali sentuh, maka seluruh daftar isi blog yang tertulis di side menu akan meluncur ke bawah hingga terlihat semua. Ya ..., karena hidden side menu ini akan bergerak (muncul) melalui sentuhan cursor. Setelah cursor dilepas, maka secara otomatis seluruh menu dan isinya segera kembali bersembunyi di bagian mana dia diletakkan. Sangat irit tempat dan membuat lebih banyak ruang blog dapat digunakan untuk tampilan lain yang diperlukan.

D E M O

DEMO: Floating - hidden menu

Cara Membuat Javascript Hidden Side Menu/Menu Samping Tersembunyi

1. Login to BloGGeR : Lakukan login dengan cara memasukkan atau menulis User Name (Nama Pengguna) atau Email Address, kemudian masukkan juga Password(Sandi).
2. Dasboard (Dasbor) : Setelah memasuki halaman Dasbor, KLIK link Tata Letak/Rancangan (Layout/Design).
3. Layout/Design (Tata Letak/Rancangan) : Setelah memasuki halaman ini KLIK Edit HTML.
4. Edit HTML : Amankan template (back-up) dengan cara :
   - KLIK Download Full Template (Download Template Lengkap).
   - Save (Simpan) file template di folder PC (berekstensi .xml.
5. Keep on Edit HTML position (Tetap di posisi Edit HTML) : Cari kode </body>. Kode ini terletak di template bagian terbawah.
6. Copy-Paste Javascript : Letakkan Javascript tepat di atas kode </body>. dengan posisi seperti ini :
   

   Posisi enyimpanan Javascript:

   <script src="http://gubhugreyotprojects.googlecode.com/svn/GRside-menu.js" type="text/javascript"></script>
   
   <script type="text/javascript">
   Isi Javascript Hidden side Menu-2
   </script>
   
   </body>

7. Copy-Paste CSS : Copy dan letakkan kode CSS berikut di atas kode ]]></skin>
   

   Kode CSS dan posisi dalam template

   #menu1 table td{padding:1px 5px 0 5px;}#menu1 a{color:#e09755;background:#222 url(http://gubhugreyot-icon.googlecode.com/svn/blueArrowV12H12.png) -100px 50% no-repeat;text-decoration:none;text-indent:1px;font-size:12px;font-weight:500;font-family:Arial;padding:3px 5px 3px 10px;line-height:20px;text-shadow:0 0 0 #fff;transition:1s;-o-transition:1s;-moz-transition:1s;-webkit-transition:1s;-ms-transition:1s;}
   #menu1 a:active{color:white;text-decoration:none;}
   #menu1 a:hover{color:red;background:black url(http://gubhugreyot-icon.googlecode.com/svn/blueArrowV12H12.png) 5px 50% no-repeat;padding-left:25px;}
   #menu1 a:visited{color:#888;text-decoration:none;padding-left:5px;}
   
   ]]></b:skin>

8. SAVE Template (Simpan Template) : Simpan hasilnya dengan KLIK SAVE Template/Simpan Template.
9. Open Blog (Buka Blog) : Buka blog untuk melihat hasilnya.

Javascript Hidden Side Menu-2

Javascript:

<script type="text/javascript">
//<![CDATA[
resizereinit=true;
menu[1] = {
id:'menu1',
bartext:'DAFTAR MENU',
menupos:'left',
barbgcolor:"#001024",
barcolor:"#4b9afc",
barfontweight:"bold",
barfontsize:'100%',
bordercolor:'#333333',
fontsize:'120%',
linkheight:25 ,
hdingwidth:250 ,
menuspeed:40, 
menupause:50,
menufont:'Times New Roman',
menuItems:[
["Tutorial Blogger", "http://gubhugreyot.blogspot.com/Tutorial BloGGer.html", "_self"],
["Tips-trik Blogger", "http://gubhugreyot.blogspot.com/Tips-trik Blogger.html", ""],
["Menu Masakan SSM", "http://gubhugreyot.blogspot.com/search/label/Menu%20Masakan%20SSM", ""],
["Anti Virus", "http://http://gubhugreyot.blogspot.com/search/label/Anti%20Virus", ""],
["mp3", "http://http://gubhugreyot.blogspot.com/search/label/mp3", ""],
["Software", "http://gubhugreyot.blogspot.com/search/label/Software", ""],
["TRESSHIL", "http://gubhugreyot.blogspot.com/search/label/TRESSHIL", ""],
["The Master", "http://gubhugreyot.blogspot.com", ""],
["Side Menu", "http://gubhugreyot.blogspot.com", ""],
["Triks Sulap", "http://gubhugreyot.blogspot.com/search/label/Triks%20Sulap", ""],
["The Master", "http://gubhugreyot.blogspot.com/the master.html", ""],
["Side Menu", "http://gubhugreyot.blogspot.com/side menu.html", ""],
["Image Gallery", "http://gubhugreyot.blogspot.com/image gallery.html", ""],
["Back To Top", "#", ""]
]};
make_menus();
//]]>
</script>

Keterangan/Catatan :

1. Ganti Nama setiap menu seperti Tutorial BloGGer, Tips-trik Blogger dan yang lain dengan menu blog sampeyan.
2. Ganti setiap link menu dengan link yang sesuai dengan menu milik sampeyan sendiri. Contoh link menu yang harus diganti :
   dari :
   http://gubhugreyot.blogspot.com/Tutorial BloGGer.html, hingga :
   http://gubhugreyot.blogspot.com/image gallery.html
3. Jumlah menu dan link-nya dapat ditambah sesuai kebutuhan dengan cara menambah nama dan link baru-nya di atas kode :
   ["Back To Top", "#", ""]
   
   Contoh penambahan :
   
   ["Image Gallery", "http://gubhugreyot.blogspot.com/image gallery.html", ""],
   ["Cursor Animasi", "http://gubhugreyot.blogspot.com/cursor animasi.html", ""],
   ["Back To Top", "#", ""]
4. warna teks, font-family, background warna, lebar hidden side menu, kecepatan geser, font-weight (tebal huruf) dan font-size (ukuran font) dapat diganti dengan merubah kode yang berkaitan dengan hal di atas melalui perubahan kode pada :
   - kode CSS
   - Javascript Hidden Side Menu-2

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Setu LEGI, Maret, 03, 2012

» Happy Blogging - gubhugreyot «