Cara Membuat Menu Dropdown Melayang Responsive Pada Header Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Sebagai seorang Blogger yang profesional mengikuti kemajuan teknologi terutama bagi anda para Webmaster dan para Blogger yaitu teknologi desain dan jaringan yang merupakan cikal bakal terbentuknya sebuah Website atau Blog tentu anda memerlukan tutorial untuk membuat menu dropdown melayang dan responsive pada header Blogger atau disebut "Header Dropdown Menu Sticky And Floating Responsive", sebagai seorang Blogger yang suka dan sering melanglang buana didunia internet tentu anda sering menemukan banyak Website, Blog dan Portal yang menggunakan menu tersebut. Menu ini juga memanjakan pengunjung dan memudahkan mereka dalam menjelajahi sebuah Website atau Blog dalam mencari berbagai keperluan, misalnya pengunjung yang mengunjungi suatu blog untuk mencari sebuah tutorial.
Dengan fitur melekat dan melayang atau "Sticky And Floating " ketika kursor di seret ke bawah akan memudahkan bagi pengunjung yang menggunakan waktu singkat dalam mencari keperluan pada sebuah blog karena pengunjung tidak perlu mengulang scroll ke atas untuk memilih pada pilihan menu, karena semakin modern sebuah teknologi adalah semakin memudahkan dan berbagai keluhan teratasi dengan pertumbuhan ilmu yang meningkat untuk sebuah penyempurnaan. Perlu anda ketahui bahwa menu ini sangat responsive juga adaptif pada tampilan desktop dan mobile. Desain dizaman sekarang tidak lagi terlalu banyak dekorasi warna karena zaman modern adalah zaman simple tetapi simple yang mengagumkan, bukan simple dalam arti polos total tetapi simple kedewasaan yang mudah difahami. Sedikit saya tambahkan penjelasan bahwa suatu Website, Blog atau Portal tidaklah bagus dan modern jika terlalu simple karena terlihat kurangnya upaya seorang admin dan tidak indah dan tidak mengagumkan akan suatu penilaian.

Jika anda sudah memahami penjelasan saya, mari ke tutorial⇨

1. Login ke Blogger>Template>Edit HTML

2. Letakkan CSS berikut diatas/sebelum tag </head>⇩

/*******************************************************************************
Header Dropdown Menu Sticky And Floating Responsive By www.BloggerAutodidact.com
*******************************************************************************/
<style>
#menutop{width:100%;max-width:100%;margin:0 auto;height:45px;background:#000000;border:0px solid #ffffff;}
#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:13px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#ffffff;}
#menutop ul li:hover a{color:#006600;}
#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:#006600}
#menutop ul li ul li a{color:#006600;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#000000;position:absolute;z-index:99;color:#006600;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:#000000;color:#006600;}
#menutop ul li ul li a:hover{background:#000000;color:#006600;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.soundcloud{background:#000000;text-align:center;color:#ffffff;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.soundcloud:hover{color:#006600;}
#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.soundcloud .fa.fa-soundcloud{color:#ffffff;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.soundcloud:hover{background:#000000;color:#ffffff;}
#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.soundcloud:hover .fa.fa-soundcloud{color:#006600;}

@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #006600;}
#menutop{position:relative;border:none;border-bottom:4px solid #006600;}
#menutop ul{background:#000000;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:#006600}
#menutop li a:hover{background:#006600;color:#006600;}
#menutop li:hover{background:#006600;color:#006600;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#006600;color:#006600;}
#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:#006600;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#006600;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#006600;}
#menutop ul li ul li a:hover{background:#006600;color:#006600;}
#menutop ul.menux a{background:#006600;color:#006600;}
#menutop ul.menux a:hover{background:#006600;color:#006600;}
#menutop ul.menux li{background:#006600;color:#006600;}
#menutop ul.menux li:hover{background:#006600;color:#006600;}
#menutop ul.menux li a{background:#006600;color:#006600;}
#menutop ul.menux li a:hover{background:#006600;color:#006600;}
</style>

3. Letakkan HTML berikut dibawah / selepas tag </head>⇩

<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerAutodidact.com Starts -->
<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='/p/get-in-touch.html'>Contact</a>
<ul class='menux'>
<li><a href='#'>e-mail Form</a></li>
</ul>
</li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
</ul>
</li>
<li class='sorting-02 twitter'><a href='https://twitter.com/username' target='_blank'><i class='fa fa-twitter fa-lg' title='Twitter'/><span class='inv'/></a></li>
<li class='sorting-01 facebook'><a href='https://www.facebook.com/username' target='_blank'><i class='fa fa-facebook fa-lg' title='Facebook'/><span class='inv'/></a></li>
<li class='sorting-06 soundcloud'><a href='https://soundcloud.com/username' target='_blank'><i class='fa fa-soundcloud fa-lg' title='SoundCloud'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='https://www.youtube.com/channel/username' target='_blank'><i class='fa fa-youtube fa-lg' title='YouTube'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='https://plus.google.com/u/0/usernname' target='_blank'><i class='fa fa-google-plus fa-lg' title='Google Plus'/><span class='inv'/></a></li>
</ul>
</nav>
<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerAutodidact.com Ends -->

4. Letakkan jQuery berikut dibawah / selepas tag <head>⇩
Nota: Jika pada template blog anda sudah terpasang jQuery berikut maka abaikan saja

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5. Untuk membuat menu menjadi melekat dan melayang atau "Sticky And Floating " ketika scroll ke bawah, maka tambahlah JavaScript berikut dengan meletakkannya diatas / sebelum tag </body>⇩

<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerAutodidact.com Starts -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menutop').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        if (scrollTop > stickyNavTop) {
            $('#menutop').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menutop').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerAutodidact.com Ends -->

6. Save Template.

7. Alhamdulillaah, tutorial sudah siap.