Cara Membuat Menu Melayang Pada Sidebar Blog

Alhamdulillah, ketemu lagi nich sobat dengan postingan tutorial blog. Pada postingan yang lalu saya telah berbagi mengenai Rahasia Tersembunyi Meta Description dan Meta Keyword Pada Platform Blogger dan Cara membuat Menu Buka Tutup pada Blog, Pada postingan kali ini Hayardin Blog akan berbagi mengenai Cara Membuat Menu Sidebar Melayang Pada Blog.Tips ini juga saya dapatkan dari sahabat blogger kumpulancara dan saya ingin berbagi juga lewat blog ini sobat.

Menu Sidebar Melayang ini sebenarnya hampir sama dengan Cara membuat Buku tamu Melayang pada sidebar pada postingan saya yang lalu, cuman scriptnya saja yang berbeda.

Blogger Pemula seperti saya mungkin hal ini masih sangat baru, tapi bagi sahabat blogger yang sudah senior pasti sudah lama tahu Cara Membuat Menu Sidebar Melayang Pada Blog. Jika sobat tertarik untuk Membuat Menu Sidebar Melayang Pada Blog, langsung saja kita ke TKP

Cara Membuat Menu Sidebar Melayang Pada Blog.

Untuk Membuat Menu Sidebar Melayang Pada Blog, sobat tinggal Copy paste Script dibawah ini kedalam gadget HTML sobat

<br /> <script src="http://sidebarmenu.googlecode.com/files/sidebarprototype.js" type="text/javascript"></script><br /> <script src="http://sidebarmenu.googlecode.com/files/sidebareffets.js" type="text/javascript"></script><br /> <script src="http://sidebarmenu.googlecode.com/files/sidebarmenu.js" type="text/javascript"></script><br /> <style> body{ font-size:75%; } a{ outline: none; } a:active{ outline: none; } #sideBar{ text-align:left; } #sideBar h2{ color:#F0FFFF; font-size:110%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold !important; } #sideBar h2 span{ font-size:125%; font-weight:normal !important; } #sideBar ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } #sideBar li{ margin:0px 5px 5px 10px; padding: 0 0 0 10px; list-style-type:none; display:block; background-color:#DA1074; width:177px; color:#FFFFFF; } #sideBar li a{ width:100%; } #sideBar li a:link, #sideBar li a:visited{ color:#FFFFFF; font-family:verdana; font-size:100%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0 0 0 20px; width:100%; } #sideBar li a:hover{ color:#FFFF00; text-decoration:underline; } #sideBar{ position: fixed; width: auto; height: auto; top: 140px; left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuubRtTcyyPv41XVu6xCKqYC0_7euB4kMk8lchvc_2h5nQ-AmWwz-ovEdmHSe56Hxxkt6H3HUcfnuF2jEcHFiNEZEbJbWdepDLSxfm6iOtmA_XeyMHPNF-NZY3jHueljzLYj9Acz0rY-7A/s320/left.collapse.border.png); background-position:top right; background-repeat:repeat-y; } #sideBarTab{ float:left; height:137px; width:28px; } #sideBarTab img{ border:0px solid #FFFFFF; } #sideBarContents{ float:left; overflow:hidden !important; width:200px; height:320px; } #sideBarContentsInner{ width:200px; }</style><br /> <div id="sideBar"> <div id="sideBarContents" style="display:none;"> <div id="sideBarContentsInner"> <h2> Left<span>Menu</span></h2> <ul> <li><a href="#">Nama Link</a></li> <li><a href="#"> Nama Link </a></li> <li><a href="#"> Nama Link </a></li> <li><a href="#"> Nama Link </a></li> </ul> </div> </div> <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5oCPz0rZdGw8MV9c3b5ViQNJlgyrzo4DVIJrPLOAwGugdzT8n220xmcUfi49S5wBMG0IrJt4gHKJ70759goLiBoWWcwzMZUowwSXT5mARqM-4wbCvu-M5nrkv8S2GUSifwXAn2sOeGKX/s320/sidebarcollapse.png" title="sideBar" /></a><br /> </div> <br />

Keterangan Kode Script diatas. Mari kita sama-sama membahasnya yaa sobat.
Coba cari kode dibawah ini

<li><a href="#">Nama Link</a>

</li><li><a href="#"> Nama Link </a>

</li><li><a href="#"> Nama Link </a>

</li><li><a href="#"> Nama Link </a></li>
Kemudian ganti sesuai link dan nama link yang sobat ingin masukkan, berikut uraiannya sobat

#  =  Alamat Link atau URL sobat 
Ganti dengan Alamat Link atau URL sobat, misalnya http://hayardin-blog.blogspot.com

Nama Link = Nama link yang sobat ingin tampilkan pada Menu
Ganti dengan nama Link Sobat, misalnya Hayardin Blog, Menu, Tips dan Trik, Tukar Link   dan lain-lain

Untuk lebih jelasnya, Contohnya bisa sobat lihat dibawah ini URL dan nama link yang telah saya rangkai.

<li><a href=" http://hayardin-blog.blogspot.com ">Home</a></li>

<li><a href=" http://hayardin-blog.blogspot.com ">Hayardin Blog</a>

</li><li><a href=" http://hayardin-blog.blogspot.com ">Tips dan Trik</a></li>

<li><a href=" http://hayardin-blog.blogspot.com ">Tukar Link</a></li>

Untuk hasilnya silahkan sobat melakukan praktikum masing-masing yaa,,,Silahkan sobat coba dulu secara offline dengan cara copy semua kedalam Notepad kode kode javascript yang telah sobat rangkai, jika sudah, silahkan Rename dari .txt menjadi .html kemudian tekan enter lalu lihat hasilnya,,,jika sudah menyossss,,,silahkan sobat pindahkan kedalam blog sobat...

Selamat Mencoba sobat...and Good Luck

Disana gunung, disini Gunung, Ditengah-tengahnya Pulau Sulawesi,penulisnya bingung, pembacanya juga lebih bingung, yang penting bisa saling berbagi...

Pembaca : Pak Hayardin, Bosan nich penutup postingannya itu itu terus, disana gunung disini gunung terus,,, ntar blognya berat lagi gara-gara kebanyakan gunung..hikz..

Penulis : Duh gimana yaa sobat,, yaa mungkin itulah ciri khas  dari ending postingan saya...

Sampai disini dulu yaa postingannya kali ini sahabat blogger ,semoga goresan sederhana saya ini bisa memberikan setetes manfaat and happy blogging sobat. Sampai ketemu lagi dipostingan saya yang selanjutnya.

Dengan memasukan alamat email Anda dibawah ini, berarti Anda akan dapat kiriman artikel terbaru dari www.hayardin.com di inbox e-mail Anda
Enter your email address:


Delivered by FeedBurner

Lokasi:

Berbagi :