Cara Membuat Sidebar Menu Vertikal Responsive Keren
Menu Vertikal
Selamat datang agan atau aganwati kali ini Saya akan berbagi tips blogging yaitu cara membuat sidebar menu vertikal responve dan keren tentunya, sidebar menu vertikal adalah menu yang Saya pakai pada blog ini, untuk menerapkannya di blog Anda, silakan ikuti beberapa langkah berikut;
Langkah
1. Login pada blog Anda masing-masing,
2. Pada menu dashboard pilih menu template,
3. Lalu pilih menu edit html,
4. Setelah itu cari kode </b:skin> dengan cara
Ctrl
+F
,5. Setelah itu copy script di bawah ini,
/*CSS Navigasi Ala Renaldy Ways*/
#css-menu{text-align:left;position:fixed;top:60px;left:0px;z-index:9;background:#2C2C2D;height:100%;width: 15%;transition:all .4s ease-in-out;} #menu-wrapper,#menu-wrapper ul,#menu-wrapper li,#menu-wrapper a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1; font-family: 'Oswald', Sans-serif;font-size: 14px;position: relative;} #menu-wrapper a {line-height: 1.3;padding: 12px 15px;} #menu-wrapper {width: 100%;} #menu-wrapper > ul > li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;} #menu-wrapper > ul > li:first-child {border-top:none;} #menu-wrapper > ul > li:last-child {border-bottom:1px solid #3d3d3d;} #menu-wrapper > ul > li:last-child > a {border-bottom: 1px solid #161616;} #menu-wrapper > ul > li > a {font-size: 14px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #2C2C2D;padding: 12px 15px;} #menu-wrapper > ul > li > a:hover {text-decoration: none;color:#ea5c35;box-shadow: inset 4px 0 #07ACEC;} #menu-wrapper > ul > li.active {font-weight:700;box-shadow: inset 4px 0 #07ACEC;color: #07ACEC;cursor: default;} #menu-wrapper > ul > li.home .close-menu2{background: #2C2C2D;color: #581000;text-shadow: 0 1px 1px #f8b1a1;font-size:18px;font-weight:700;padding: 12px 15px;display:block} #menu-wrapper > ul > li.has-sub > a:after {content: '';position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;} #menu-wrapper > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #ffffff;} #menu-wrapper ul ul {padding: 0;display: none;} #menu-wrapper ul ul.expand {height:120px;overflow:auto} #menu-wrapper ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;} #menu-wrapper ul ul a:hover {color: #ea5c35;box-shadow: inset 4px 0 #292929;} #menu-wrapper ul ul li {border-bottom: 1px solid #c9c9c9;} #menu-wrapper ul ul li.odd a {background: #e5e5e5;} #menu-wrapper ul ul li:last-child {border: none;} 6. Lalu paste script tersebut tepat di atas kode </b:skin>,
7. Setelah itu cari kode <body> dengan cara
Ctrl
+F
,8. Lalu copy script di bawah ini,
<div id='css-menu'>
<nav id='menu-wrapper'>
<ul>
<li><a href='/' title='Home'><i class='icon-home' style='color:#07ACEC;'/><span> Home</span></a></li>
<li><a href='http://renaldyways.blogspot.com/p/daftar-isi.html' title='Daftar Isi'>
<i class='icon-pencil'/><span> Daftar Isi</span></a></li>
<li><a href='http://renaldyways.blogspot.com/p/pasang-iklan.html' title='Pasang Iklan Murah Di Sini'><i class='icon-bullhorn'/><span> Pasang Iklan</span></a></li>
<li><a href='http://renaldyways.blogspot.com/p/request-artikel.html' title='Bertanya Seputar Blogging'><i class='fa fa-question-circle'/><span> Out Of Topic</span></a></li>
<li class='has-sub'><a href='#' title='Features'><i class='icon-cogs'/><span> Tools</span></a>
<ul class='expand'>
<li class='even'><a href='http://renaldyways.blogspot.com/p/photoshop-online_8.html' title='Edit Fotomu Di Sini'><i class='icon-magic'/><span>Edit Foto</span></a></li>
<li class='odd'><a href='http://renaldyways.blogspot.com/p/kode-warna-html.html' title='Kode Warna HTML'><i class='icon-beaker'/><span>Kode Warna HTML</span></a></li>
<li class='last odd'><a href='http://renaldyways.blogspot.com/p/tulisan-terbalik.html' title='Membuat Tulisan Terbalik'><i class='fa fa-font'/><span>Tulisan Terbalik</span></a></li>
<li class='even'><a href='http://renaldyways.blogspot.com/p/blog-page_14.html' title='Lihat TV Online'><i class='icon-desktop'/><span>TV Online</span></a></li>
<li class='even'><a href='http://chkme.com/' title='Cek Nilai Web Anda'><i class='icon-signal'/><span>SEO Score</span></a></li>
<li class='last odd'><a href='http://renaldyways.blogspot.com/p/test.html' title='Cek Kecepatan Web Anda'><i class='icon-rocket'/><span>Test Speed Your Web</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Download'><i class='icon-download-alt'/><span> Download</span></a>
<ul>
<li class='even'><a href='http://renaldyways.blogspot.com/2014/05/download-45a-musik-barat-terbaik.html' title='Download Musik Keren'><i class='icon-music'/><span>Download Musik Keren</span></a></li>
<li class='odd'><a href='http://renaldyways.blogspot.com/2014/10/download-template-blog-premium.html' title='Download Template Blog Keren'><i class='icon-heart'/><span>Download Template Premium</span></a></li>
<li class='even'><a href='http://adf.ly/tXcCV' title='Khusus 18+'><i class='icon-star'/><span>18+</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Keunggulan'><i class='fa fa-puzzle-piece'/><span> Nilai ++</span></a>
<ul class='expand'>
<li class='even'><a href='http://renaldyways.blogspot.com/p/blog-page_26.html' title='Jadilah Members Di Blog Ini'><i class='icon-signin'/><span>Members On Blog</span></a></li>
<li class='even'><a href='http://renaldyways.blogspot.com/p/members-on-google.html' title='Jadilah Members Google+'><i class='icon-google-plus-sign'/><span>Members On Google+</span></a></li>
<li class='odd'><a href='http://renaldyways.blogspot.com/p/galeri-meme.html' title='Meme Comic'><i class='icon-smile'/><span>Meme Comic</span></a></li>
<li class='even'><a href='http://renaldyways.blogspot.com/p/motivasi.html' title='Motivation'><i class='icon-thumbs-up'/><span>Motivation</span></a></li>
<li class='odd'><a href='http://renaldyways.blogspot.com/p/blog-page.html' title='Privacy Policy'><i class='icon-shield'/><span>Privacy Policy</span></a></li>
<li class='last odd'><a href='http://renaldyways.blogspot.com/p/site-map.html' title='Site Map'><i class='icon-sitemap'/><span>Site Map</span></a></li>
<li class='odd'><a href='http://renaldyways.blogspot.com/p/top-komentator.html' title='Cari Tahu Siapa Yang Paling Aktif Di Blog Ini'><i class='icon-trophy'/><span>Top Komentator</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Gabung Untuk Berdiskusi'><i class='icon-coffee'/><span> Forum Diskusi</span></a>
<ul class='expand'>
<li class='odd'><a href='https://www.facebook.com/groups/bloggercodes/' title='Blogger Codes'><i class='icon-group'/><span>Blogger Code's</span></a></li>
<li class='even'><a href='http://renaldyways.blogspot.com/p/forum-on-blog.html' title='Forum On Blog'><i class='icon-group'/><span>Forum On Blog</span></a></li>
</ul>
</li>
<li><a href='http://renaldyways.blogspot.com/p/blog-page_6.html' title='Tukar Link'>
<i class='icon-retweet'/><span> Tukar Link</span></a></li>
<li class='has-sub'><a href='#' title='Hubungi Admin'><i class='fa fa-envelope-o'/><span> Contact Us</span></a>
<ul class='expand'>
<li class='odd'><a href='http://renaldyways.blogspot.com/p/var-servicedomainwww.html' title='Contact On Blog'><i class='icon-envelope-alt'/><span>Blog</span></a></li>
<li class='even'><a href='http://facebook.com/RenaldyRizkiRamadani' title='Contact On Facebook'><i class='icon-facebook-sign'/><span>Facebook</span></a></li>
<li class='even'><a href='https://plus.google.com/u/0/113399816614878257205' title='Contact On Google+'><i class='fa fa-google-plus'/><span>Google+</span></a></li>
<li class='even'><a href='http://instagram.com/renaldyrr' title='Contact On Instagram'><i class='fa fa-instagram'/><span>Instagram</span></a></li>
<li class='even'><a href='http://twitter.com/ThisIsRenaldy7' title='Contact On Twitter'><i class='icon-twitter'/><span>Twitter</span></a></li>
</ul>
</li>
<li><a href='http://renaldyways.blogspot.com/p/tentang-saya.html' title='About Me'><i class='icon-user'/><span> About Me</span></a></li>
</ul>
</nav>
</div> 9. Paste script tersebut tepat di bawah kode <body>,
10. Setelah itu cari kode </body> dengan cara
Ctrl
+F
,11. Lalu copy script di bawah ini,
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$("#3-4 1 1 2:g").d("g");$("#3-4 1 1 2:h").d("h");$("#3-4 > 1 > 2 > a").l(r(){$("#3-4 2").f("c");$(6).b("2").d("c");n e=$(6).m();9(e.5("1")&&e.5(":8")){$(6).b("2").f("c");e.i("7")}9(e.5("1")&&!e.5(":8")){$("#3-4 1 1:8").i("7");e.u("7")}9($(6).b("2").o("1").p().q==0){j s}t{j k}})',31,31,'|ul|li|menu|wrapper|is|this|normal|visible|if||closest|active|addClass||removeClass|odd|even|slideUp|return|false|click|next|var|find|children|length|function|true|else|slideDown'.split('|'),0,{}))
//]]>
</script> 12. Setelah itu paste tepat di atas kode </body>,
13. Simpan.
Nah itu saja dari Saya semoga artikel ini bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.