Cara Mudah Menambahkan Menu Responsif Mobile di Blogger

Menu atau yang lebih dikenal dengan menu navigasi sangat berguna untuk menyediakan lingkungan yang user-friendly bagi pengunjung Anda. Menu memungkinkan pengunjung Anda mencari konten yang tepat yang mereka cari dengan mengunjungi kategori tertentu.

Namun, sekarang menu hari telah berubah menjadi menu Responsif yang memberikan keleluasaan bagi pengguna ponsel untuk bernavigasi melalui situs Anda dengan mudah. Jika Anda ingin menambahkan menu mobile responsif ke blog blogger Anda, maka Anda beruntung berada di tempat yang tepat. Hari ini di artikel ini, kami akan menunjukkan cara mudah menambahkan menu responsif mobile di blogger.

Menu Responsif apa?
Menu responsif adalah menu navigasi seperti itu, yang fleksibel dan user-friendly pada saat yang bersamaan. Mereka memberikan pengalaman berkualitas bagi pengguna desktop ke pengguna ponsel. Saat di desktop mereka tampil dengan cara tradisional, namun di ponsel mereka tampil seperti aplikasi mobile yang lebar, tinggi dan tertata rapi. Pada screenshot berikut, Anda bisa dengan jelas melihat menu yang sama tampil berbeda di desktop dan di smartphone.

Live preview dari menu ini bisa dilihat di situs ini http://movieismdemo.blogspot.co.id/



Bagaimana cara mudah menambahkan menu Responsif di Blogger?
Ketika membuat menu responsif di blogger, kami memiliki berbagai teknik tentang bagaimana cara menangani menu navigasi untuk perangkat layar kecil seperti ponsel, smartphone, dan lain-lain. Sumber daya yang harus kami capai ini tidak terbatas. Pada artikel ini, kita akan menunjukkan konsep utama yang lebih mudah diimplementasikan dan memiliki kelebihan dibanding kelemahan.

Hal pertama yang perlu Anda lakukan adalah pergi ke Blogger.com> Template> Edit HTML dan tempelkan kode berikut di mana saja setelah tag <body>. (Perlu diingat paste kode ini dengan tepat di mana Anda ingin menu Anda 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'/>

Sekarang Anda untuk gaya menu, Anda perlu menambahkan CSS ke template Anda. Untuk melakukannya lagi di template, cari }}]> </ b: skin> tag dan tepat di bawahnya sisipkan kode berikut

#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-main {
    background-color: #279CEB;
    margin: 0px;
    float: left;
}
#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#nav-main li {
    display: inline-block;
    float: left;
    ont-family: &#39;
    Open Sans&#39;
    , sans-serif;
}
#nav-main li:last-child {
    border-right: none;
}
#nav-main a {
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
    display: block;
}
#nav-main a:hover {
    background-color: #3AB0FF;
    text-decoration: none;
    color: #fff;
}
#nav-mobile {
    position: relatifve;
    display: none;
}
#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 ul {
    padding: 0;
    margin: 0;
}
nav#nav-mobile a {
    display: block;
    color: #29a7e1;
    padding: 10px 0px;
    text-decoration: none;
    border-bottom: 1px solid #00aeef;
    text-align: center;
}
nav#nav-mobile a:hover {
    background-color: #111;
    color: #fff;
}
nav#nav-mobile li {
    display: block;
}
nav#nav-mobile {
    display: none;
}
/* =Media Queries
-------------------------------------------------------------- */

@media all and (max-width: 900px) {
    #nav-trigger {
        display: block;
    }
    #nav-main {
        display: none!important;
    }
    nav#nav-mobile {
        display: block;
    }
}

Setelah menambahkan pengkodean inti HTML dan CSS, tanpa menambahkan kode JavaScript berikut, menu tidak akan bekerja dengan benar. Karena itu, tambahkan kode berikut tepat di atas tag </ 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>

Setelah selesai menambahkan tiga kode di atas dalam template Anda, simpan dengan menekan "Save Template". Selamat, Anda telah berhasil menambahkan menu responsif ponsel di blogger. Sekarang pergi dan uji situs Anda dari desktop dan mobile untuk mengalami perbedaannya.

Pertanyaan yang Sering Diajukan
Mengapa ketika saya klik Menu itu tidak terbuka?
Jawab: Pastikan Anda telah mengikuti petunjuk yang disebutkan di atas dengan benar. Jika Anda yakin telah mengikuti langkah-langkahnya dengan benar, Anda mungkin akan kehilangan file jquery.min.js, sementara harus memicu menu di ponsel. Pergi ke Blogger >> Template >> Edit HTML >> cari <head> dan di bawahnya paste kode berikut ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

Semoga tutorial ini bisa membantu setiap orang dalam belajar cara mudah menambahkan menu responsif di blogger tanpa menghadapi banyak kekhawatiran. Jika Anda menyukai artikel ini, bacalah dengan teman Anda.



SUBSCRIBE TO OUR NEWSLETTER

close