Cara Membuat Sidebar Menu Vertikal Responsive Keren Di Blog

Renaldy Ways

Web ini renaldyways.com tidak akan diperpanjang lagi dan akan kembali menggunakan platform default blogger. Admin mohon pamit undur diri untuk fokus ke Web Pendidikan Ilmu Malas :).

Google Plus

Facebook

Twitter

Join this blog

Cara Membuat Sidebar Menu Vertikal Responsive Keren

View

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

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: &#39;Oswald&#39;, Sans-serif;font-size: 14px;position: relative;} #menu-wrapper a {line-height: 1.3;padding: 12px 15px;} #menu-wrapper {width: 100%;} #menu-wrapper &gt; ul &gt; li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;} #menu-wrapper &gt; ul &gt; li:first-child {border-top:none;} #menu-wrapper &gt; ul &gt; li:last-child {border-bottom:1px solid #3d3d3d;} #menu-wrapper &gt; ul &gt; li:last-child &gt; a {border-bottom: 1px solid #161616;} #menu-wrapper &gt; ul &gt; li &gt; a {font-size: 14px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #2C2C2D;padding: 12px 15px;} #menu-wrapper &gt; ul &gt; li &gt; a:hover {text-decoration: none;color:#ea5c35;box-shadow: inset 4px 0 #07ACEC;} #menu-wrapper &gt; ul &gt; li.active {font-weight:700;box-shadow: inset 4px 0 #07ACEC;color: #07ACEC;cursor: default;} #menu-wrapper &gt; ul &gt; 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 &gt; ul &gt; li.has-sub &gt; a:after {content: &#39;&#39;;position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;} #menu-wrapper &gt; ul &gt; li.has-sub.active &gt; 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

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&#39;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

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.

34 Comments

Balas Hapus

Unknown 24 January 2015 at 19:14

thanks :2thumbup

Renaldy Rizki Ramadani 24 January 2015 at 19:16

:samasama

Unknown 24 January 2015 at 19:24

gak ada kode nomor 9

Renaldy Rizki Ramadani 24 January 2015 at 19:26

tanpa tanda koma :najis

Unknown 24 January 2015 at 19:30

ini udah tau caranya

Tsani Aziz 24 January 2015 at 19:35

coeg coba cari kode <body class='loading'> di blog lu paste script nya yg cara ke-8 dibawhnya :jaritengah

Renaldy Rizki Ramadani 24 January 2015 at 19:38

:jaritengah ikut ah :v

Unknown 24 January 2015 at 19:38

ok di coba dulu

Unknown 24 January 2015 at 19:41

juga gk ada

Unknown 30 January 2015 at 14:15

cara mengganti header di blogku gimana gan headernya tu gpake edit html

Renaldy Rizki Ramadani 30 January 2015 at 15:11

headernya default dari subculture gan,, nggak ane ubah ubah -_- :capedeh

Unknown 12 February 2015 at 20:02

Udah Di Kasih Sumber

Renaldy Rizki Ramadani 13 February 2015 at 13:21

lain kali jangan copas sembarangan :marah

Unknown 13 February 2015 at 14:37

:thumbup

Dewa Teknik 16 February 2015 at 00:09

This comment has been removed by the author.

fadhilakbarblogger 5 March 2015 at 15:11

ribet amat gan tapi gapapa sih:iloveindonesia

Renaldy Rizki Ramadani 6 March 2015 at 13:31

:2thumbup woke gan :3

Anonymous 14 March 2015 at 07:56

katanya responsive, kok g ada css responsivenya gan ? :ngakak :ompong

Renaldy Rizki Ramadani 14 March 2015 at 12:43

masih dalam perbaikan :2thumbup

Anonymous 15 March 2015 at 12:55

gimana ni bro, ane lagi cari nav yang responsive. dan kebetulan nav yang ente punya keren sayang tidak responsive :sorry

Renaldy Rizki Ramadani 16 March 2015 at 14:25

makasih gan :2thumbup maaf kalo kurang responsive :shakehand

Anonymous 6 April 2015 at 17:11

bukan kurang responsive tapi g responsive :v
g nyatu judul artikel ama isi artikel. kasih kode responsivenya gan. kalau g bisa ganti judul aja :thumbup

Renaldy Rizki Ramadani 11 April 2015 at 20:42

wanjer :v :mewek

Kang Farhan 12 May 2015 at 13:41

:marah ini blog Tutorial tapi gk bisa di copas Adminnya :jaritengah

Renaldy Rizki Ramadani 13 May 2015 at 19:45

maaf bang, sekarang sudah di fix, silakan bisa di copas dengan cara ctrl + c :mewek

Khaerul usman 16 May 2015 at 05:52

gan tolong lihat blog ane dong, kok jadinya beda yah..???? khaerul-12.blogspot.com

Renaldy Rizki Ramadani 16 May 2015 at 08:46

templatenya ga cocok gan, udah ada menu atas tidak bisa diterapkan menu sampingnya :2thumbup

Kang Farhan 16 May 2015 at 16:32

:bingung Gan Cara Membuat Menu Yang Punya Abang Sekarang ini gimana dan cara membuat notifikasi pas Klik Kana gimana,terus Cara membuat Tulisan New Gimana ane masih Newbie Tolong Share Di Blog Ya bang !

Kang Farhan 16 May 2015 at 16:33

Sekalian Bang Tolong Liat Blog Ane Ya Mungkin Blog sya Ada yg salah
sepoel-cyber.blogspot.com

Kang Farhan 16 May 2015 at 16:35

Maaf Gan Repotin Abang yah
Namnya Juga Newbie

Khaerul usman 16 May 2015 at 17:33

wah.. syang yh gan... :capedeh gan cara agar bkin emot kaskus + widget sosmed gimana gan, ma'af gan udh bnyk terlalu nanya.... :ngakak

Renaldy Rizki Ramadani 17 May 2015 at 19:20

pm aja gan biar enak :2thumbup disini kalo ngasih script2 nya nggak cukup :cekpm

Renaldy Rizki Ramadani 17 May 2015 at 22:07

kalo yang klik kanan ini gan http://renaldyways.blogspot.com/2014/12/cara-membuat-disable-klik-kanan-seperti.html, kalo yang new itu belum tahu saya, itu default template subculture :)

:2thumbup mantap gan