Cara Menambah Menu Statis di Sidebar Kiri Blog - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Cara Menambah Menu Statis di Sidebar Kiri Blog, saya telah menyediakan Tutorial Blog lengkap seperti Cara Menambah Menu Statis di Sidebar Kiri Blog . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

Cara Menambah Menu Statis/Floating di Sidebar Kiri Blog

NAVIGASI menu blogger bukan hanya di tempat biasa, yakni di atas atau di bawah header. Navigasi Menu bisa juga dipasang di sidebar kiri blogger, dengan posisi statis, floating, melayang, atau tetap ada ketika halaman blog discroll.

Penampakannya seperti ini:

Live Demo

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 kode HTML menu statis di sidebar kiri ini di atas kode 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 kode / link berikut ini di atas kode </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.contohblog.com).*

Demikianlah Artikel Cara Menambah Menu Statis di Sidebar Kiri Blog

Sekian Tutorial dari Blogrenanda Cara Menambah Menu Statis di Sidebar Kiri Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

Cara Menambah Menu Statis di Sidebar Kiri Blog

Anda sedang membaca artikel Cara Menambah Menu Statis di Sidebar Kiri Blog dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2017/01/cara-menambah-menu-statis-di-sidebar.html Semoga artikel ini bisa bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: