Skip to content Skip to sidebar Skip to footer

Cara Membuat Menu Responsive Pada Blog

Menu atau lebih dikenal dengan menu navigasi yang sangat berguna untuk pengunjung blog anda. Menu memungkinkan pengunjung anda untuk mencari konten yang tepat yang mereka cari melalui kategori tertentu. Namun, menu sekarang telah berubah menjadi menu Responsif memberikan fleksibilitas bagi pengguna ponsel untuk menavigasi melalui situs anda dengan mudah. Jika anda ingin menambahkan menu yang responsif terhadap blog blogger anda maka anda beruntung berada di tempat yang tepat. Hari ini di artikel ini, serbacara.com akan menunjukkan cara membuat menu responsive dengan mudah.

Apa yang dimaksud dengan menu responsive?
Menu responsive adalah menu navigasi yang fleksibel. Memberikan pengalaman berkualitas bagi pengguna desktop dan pengguna ponsel. Ketika pada desktop mereka muncul dengan cara tradisional, tetapi pada ponsel mereka muncul seperti aplikasi mobile lebar, tinggi dan diatur dengan baik. Dalam screenshot berikut, anda dapat melihat dengan jelas menu yang sama tapi muncul berbeda pada desktop dan smartphone.


Cara Membuat Menu Responsive


Cara Mudah Menambahkan Menu Responsive di Blogger
Ketika membuat menu responsive di blogger, serbacara.com memiliki berbagai teknik tentang bagaimana kita dapat menangani menu navigasi kami untuk perangkat layar kecil seperti ponsel, smartphone, dan lain-lain sumber daya yang kita punya untuk mencapai tujuan ini tidak terbatas. Dalam artikel ini, serbacara.com akan menunjukkan konsep utama yang lebih mudah untuk menerapkan menu responsive pada blog.



Hal pertama yang perlu anda lakukan adalah login ke Blogger.com - Template - Edit HTML dan paste kode berikut di mana saja setelah <body>. Jika kode <body> tidak ada anda bisa mencari kode </body> dan pastekan kode dibawah ini di atasnya kode </body>. (Perlu diingat sisipkan kode ini persis di mana anda ingin menu muncul). 

<!---Menu--> <nav id='nav-main'>
    <ul>
        <li><a href=''>Home</a></li>
        <li><a href=''>About</a></li>
        <li><a href=''>Gallery</a></li>
        <li><a href=''>Tutorials</a></li>
        <li><a href=''>Contact</a></li>
    </ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>
Ambil kode menu diatas disini: pastebin.com/BiiZbDZt
  


Sekarang untuk gaya menu, Anda harus menambahkan CSS ke template anda. Untuk melakukannya cari kode </b:skin> dan pastekan kode berikut di atas kode </b:skin>.    


#nav-trigger {
    display: none;
    text-align: center;
}
#nav-trigger span {
    display: block;
    background-color: #279CEB;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
}
nav#nav-mobile {
    margin: 0px;
}
nav {
    margin-bottom: 30px;
}
nav#nav-main {
    background-color: #279CEB;
    margin: 0px;
    float: left;
}
nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
nav#nav-main li {
    display: inline-block;
    float: left;
    ont-family: 'Open Sans', sans-serif;
}
nav#nav-main li:last-child {
    border-right: none;
}
nav#nav-main a {
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
    display: block;
}
nav#nav-main a:hover {
    background-color: #3AB0FF;
    text-decoration: none;
    color: #fff;
}
nav#nav-mobile {
    position: relatifve;
    display: none;
}
nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ddf0f9;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 30px;
text-decoration: none;
border-bottom: 1px solid #00aeef;
}
nav#nav-mobile a:hover {
background-color: #e6002d;
color: #fff;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
    display: block;
}
nav#nav-main {
    display: none;
}
nav#nav-mobile {
    display: block;
}
Ambil kode CSS-nya disini: pastebin.com/3Mc4yyqM



Setelah menambahkan kode HTML dan kode CSS diatas, anda harus menambahkan kode JavaScript supaya menu bekerja dengan benar. Oleh karena itu, tambahkan kode berikut tepat di atas </ head>.

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
        }
    });
});
//]]>
</script>
Ambil kode HTML disini: pastebin.com/PSxe8tac



Setelah anda selesai menambahkan tiga kode diatas dengan benar. klik "Simpan Template". Selamat, anda telah berhasil menambahkan menu responsive di blog anda. Sekarang kunjungi blog Anda dengan desktop dan smartphone untuk memastikan sudah terpasang dengan benar.
 
Serbacara.com berharap tutorial cara membuat menu responsive ini dapat membantu setiap orang untuk belajar dengan mudah menambahkan menu responsif di blogger tanpa menghadapi banyak kekhawatiran. Jika anda menyukai artikel ini share ke facebook, twitter atau yang lainnya. Dan bila ada pertanyaan tanyakan di kolom komentar.

Post a Comment for "Cara Membuat Menu Responsive Pada Blog"