Judul : Cara Mudah buat Menu Melayang di sisi kiri Blog
link : Cara Mudah buat Menu Melayang di sisi kiri Blog
Cara Mudah buat Menu Melayang di sisi kiri Blog
Cara Mudah buat Menu Melayang di sisi kiri Blog - Floating left sidebar menu
Berikut cara pasang di blog :
Pertama
Klik + Pilih
Kedua
Silahkan Copy dan Paste Kode Berikut ini
Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan sesuai kebutuhan
Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://www.kumpulancara.com
Link One saya berikan nama = Home
Selamat mencoba dan semoga bermanfaat
Menu Floating ini selain mudah diterapkan juga berpenampilan keren dan tentunya memiliki fungsi yang tak kalah dengan menu lainnya dan bisa dijadikan juga sebagai penghias blog.
Bagi sobat yang ingin melihat demonya silahkan cek disini : DEMO
Cukup menarik dan keren bukan?, saya yakin seorang pemulapun akan cepat menerapkan atau menambahkan menu ini di blognya.
Bagi sobat yang ingin melihat demonya silahkan cek disini : DEMO
Cukup menarik dan keren bukan?, saya yakin seorang pemulapun akan cepat menerapkan atau menambahkan menu ini di blognya.
Berikut cara pasang di blog :
Pertama
Klik + Pilih
Kedua
Silahkan Copy dan Paste Kode Berikut ini
<script src="http://sidebarmenu.googlecode.com/files/sidebarprototype.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebareffets.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebarmenu.js" type="text/javascript"></script>
<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/AVvXsEh9QE4mkqCds6Nfvvmbun3eGODbe3gtgnHwycZ7De_joRKaXPhtou6NOgazM1V6NzSL82dpqisq6QamKIh7sP4k81qAI8vqEcKgK2NnzfjDbyCDm7VMxC_5Dm14XpCnfP-it-TblO0mEcUO/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>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2R7qNr6ImoO6GosFjOwRYjo8-UzpTjM-7aO_8ltdg9V8y3C-foTsYCl3DdqJaWGePVRIi4zBj6eV21d4eal6S_vlWmI8It1Tha_i4Kua_Q6oQrFs6DV0ISZGDUssvdFlQ-i3ngbJYxwII/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>
Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan sesuai kebutuhan
<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>
Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://www.kumpulancara.com
Link One saya berikan nama = Home
Selamat mencoba dan semoga bermanfaat
Demikianlah Artikel Cara Mudah buat Menu Melayang di sisi kiri Blog
Sekian Cara Mudah buat Menu Melayang di sisi kiri Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.
