Cara Menambah Menu Statis/Floating di Sidebar Kiri Blog

NAVIGASI sajian blogger bukan hanya di daerah biasa, adalah di atas atau di bawah header. Navigasi Menu dapat juga dipasang di sidebar kiri blogger, dengan posisi statis, floating, melayang, atau tetap ada saat halaman blog discroll.

Penampakannya menyerupai ini:

 sajian blogger bukan hanya di daerah biasa Cara Menambah Menu Statis di Sidebar Kiri Blog


Kode Menu Statis di Sidebar Kiri Blog ini CB ambil dan modif dari blog-blog yang sudah memasangnya. Sumber lainya di Jquery Script dan Berri Art.

Cara Menambah Menu Statis di Sidebar Kiri Blog

1. Template > Edit HTML
2. Pasang Kode CSS Sidebar Menu Static berikut ini di atas kode ]]></b:skin>

.sidebar-menu {text-shadow:none;position: fixed;height: 100%;width:215px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.sidebar-menu:hover {background:#222}
.menuItem span {position: absolute;left:80px;top:20px;transition:color 1s;color:rgba(255,255,255,0);}
.sidebar-menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding:20px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
@media screen and (max-width:768px){
.sidebar-menu{display:none}
}

3. Pasang aba-aba HTML sajian statis di sidebar kiri ini di atas aba-aba di atas kode </body>

<div class='sidebar-menu'>
<div class='menuItem'><i class='fa fa-home icon-large'/><span><a href='/'>Home</a></span></div>
<div class='menuItem'><i class='fa fa-comments icon-large'/><span><a href='#'>About</a></span></div>
<div class='menuItem'><i class='fa fa-bug icon-large'/><span><a href='#'>Kontak</a></span></div>
<div class='menuItem'><i class='fa fa-life-ring icon-large'/><span><a href='#'>Disclaimer</a></span></div>
<div class='menuItem'><i class='fa fa-exchange icon-large'/><span><a href='#'>Sitemap</a></span></div>
<div class='menuItem'><i class='fa fa-bullhorn icon-large'/><span><a href='#'>Advertise</a></span></div>
</div>

4. Pastikan di template Anda sudah ada link ke Awesome Font. Jika belum ada, tambahkan aba-aba / link berikut ini di atas aba-aba </head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Save Template!

Demikian Cara Menambah Menu Statis di Sidebar Kiri Blog. Good Luck! (ww.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours