Cara Membuat Sidebar Menu Vertikal Responsive Keren Di Blog

14:54:00
Cara Membuat Sidebar Menu Vertikal Responsive Keren
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: &#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
+
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&#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
+
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.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

34 Comments

Aghtis Assiddiq 24 January 2015 at 19:14

thanks :2thumbup

Renaldy Ramadani 24 January 2015 at 19:16

:samasama

Aghtis Assiddiq 24 January 2015 at 19:24

gak ada kode nomor 9

Renaldy Ramadani 24 January 2015 at 19:26

tanpa tanda koma :najis

Aghtis Assiddiq 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 Ramadani 24 January 2015 at 19:38

:jaritengah ikut ah :v

Aghtis Assiddiq 24 January 2015 at 19:38

ok di coba dulu

Aghtis Assiddiq 24 January 2015 at 19:41

juga gk ada

Aghtis Assiddiq 30 January 2015 at 14:15

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

Renaldy Ramadani 30 January 2015 at 15:11

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

Aghtis Assiddiq 12 February 2015 at 20:02

Udah Di Kasih Sumber

Renaldy Ramadani 13 February 2015 at 13:21

lain kali jangan copas sembarangan :marah

Aghtis Assiddiq 13 February 2015 at 14:37

:thumbup

Arief Bachrul 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 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 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 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 Ramadani 11 April 2015 at 20:42

wanjer :v :mewek

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

Renaldy 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 Ramadani 16 May 2015 at 08:46

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

: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 !

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

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 Ramadani 17 May 2015 at 19:20

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

Renaldy 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 :)

Renaldy Ramadani 17 May 2015 at 22:07

:2thumbup mantap gan