Cara Membuat Menu Navigasi Drop Down Plus Media Sosial

Menu Navigasi merupakan tab menu yang berisi penunjuk arah pada bagian kategori/label yang berisikan link Tujuannya agar sesuai dengan nama menu yang tercantum, misalkan label Tutorial Blogger, maka akan tampil semua yang berbau Tutorial Blogger. Oke pada kesempatan kali ini saya akan share cara membuat menu navigasi kegunaan nya yaitu adalah untuk mengakses link ke halaman tertentu, atau mungkin bisa untuk menggolongkan artikel supaya lebih mudah mengaksesnya. Kita bisa meniru tampilan blogger manapun atau mengintip kode-kode untuk kita terapkan di blogger kita sendiri. Banyak para blogger sudah berbagi script kode menu navigasi seperti; Cara Membuat Menu Navigasi Plus Media Sosial. Oke langsung saja kita praktekan bagaimana caranya.

Catatan: Silakan anda Backup terlebih dahulu, misalkan Copy semua kode HTML kalian ke Notepad. Tujuannya adalah misalkan menu navagasi ini tidak sesuai dengan keinginan anda? maka anda dengan mudah membalikan seperti semula lagi.

Cara Pertama:

1. Masuk ke Blogger.
2. Pilih menu Template - Edit HTML.
3. Copy-paste kode berikut ini, letakkan diatas kode </head> .

<style>
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;Open Sans&#39;;font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;Open Sans&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#fff;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
</style>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

4. Jika sudah? Copy-Paste kode berikut ini, letakkan diatas kode <div class='header-wrapper'> atau juga bisa kode <div id='header-wrapper'> . Jika tidak ketemu juga? Silakan anda copas kode dibawah ini letakkan saja dibawah kode </head>

<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a class='dutt' href='#'>Drop-Down</a>
<ul class='menux'>
<li><a href='###'>Sub-item 1</a></li>
<li><a href='###'>Sub-item 2</a></li>
</ul>
</li>
<li><a class='dutt' href='Link'>Contact Us</a>
<ul class='menux'>
<li><a href='####'>e-mail Form</a></li>
<li><a href='####'>Twitter</a></li>
</ul>
</li>
<li><a href='###'>Privacy Policy</a></li>
<li><a href='###'>Sitemap</a></li>
<li><a href='###'>Disclaimer</a></li>
<li class='sorting-01 facebook'><a href='####'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='####'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='####'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='####'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='####'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>

Catatan: Ganti #### dengan Link kepunyaan anda.

5. Jika Template anda belum terpasang dengan jQuery, maka pasanglah kode berikut ini. Dan letakkan kode berikut ini tepat diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

6. Save Template!

Dan, Taraaaaa Menu Navigasi Plus Media Sosial sudah muncul ^.^

Screenshoot:

Selamat Mencoba . dan Semoga Bermanfaat! - Sekian dari saya!