Menu Navigasi Blogger

Membuat menu navigasi responsive dengan desain menu navigasi yang menarik dan sederhana untuk dipasang pada blog (dalam hal ini platform blogger) diperlukan pengetahuan tentang kode-kode css, html dan javascript untuk membuatnya. Bagi seorang web desainer untuk membuat menu navigasi mungkin bukan suatu masalah yang besar, tapi bagaimana dengan orang-orang yang baru belajar membuat blog dan masih awam dengan kode css, html serta javascript?

Menu Navigasi Blogger

Jawabannya pasti bisa, lalu bagaimana caranya? tenang, jangan terburu-buru. Sebelum membuat menu navigasi, sebaiknya ketahui terlebih dahulu seberapa pentingkah menu navigasi yang dipasang pada sebuah blog/website. Apakah blog/website yang Kamu buat memerlukan menu navigasi? 

Pentingnya memasang Menu Navigasi pada blog/website

Menu Navigasi merupakan komponen yang sangat penting untuk dipasang pada blog/website, hal ini bertujuan untuk mempermudah pengunjung menemukan halaman-halaman lainnya yang terdapat pada blog/website yang Kamu miliki. Link-link yang ditampilkan pada menu navigasi biasanya berupa halaman seperti About Us, Contact Us, Sitemap, Category dan lain-lain yang bisa disesuaikan oleh pemilik blog/website.

Bagaimana cara membuat menu navigasi di blogger?

Cara membuat menu navigasi untuk dipasang pada blog/website yang menggunakan platform blogger memiliki 2 (dua) cara. Untuk cara yang pertama yakni dengan menambahkan gadget/widget yang terdapat pada tata letak dari dashboard blogger dan yang kedua dengan menambahkan kode css, html dan javascript melalui editor edit html dari template blogger. 

Untuk membuat menu navigasi dengan menambahkan kode css, html dan javascript menggunakan platform blogger, pertama-tama login ke platform blogger menggunakan akun blogger yang Kamu miliki.

Pada dashboard blogger pilih Template ➤ Edit HTML, kurang lebih tampilannya seperti pada gambar dibawah ini :

Dashboard Blogger

Setelah masuk ke editor html, cari kode ]]></b:skin> atau </style>. Agar lebih mudah, gunakan CTRL + F pada keyboard, maka akan tampil kotak pencarian pada halaman editor html blogger. Jika sudah ditemukan, salin kode css dibawah ini dan letakkan di atas kode ]]></b:skin> atau </style>

/* S MENU */
nav {
    font-size: 120%;
    background-color: #191970;
    box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
    /*margin: 3em 0 6em;*/
    padding: 0 1em;
    height: 44px;
    /* Menu height */
    overflow: hidden;
    /* Don't show anything outside the nav */
    top: 0px;
    position: sticky;
    position: -webkit-sticky;
    margin: auto;
    z-index: 2;
    text-transform: uppercase;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 88px;
    /* Menu height x 2 */
    position: relative;
    /* Position the menu button relative to this item */
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    padding: 0 1em;
    color: rgb(236, 236, 236);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 44px;
    /* Menu height */
    height: 44px;
    /* Menu height */
}

nav a:hover {
    background-color: #0000CD;
}

nav li:last-child {
    /* The menu button */
    position: absolute;
    /* Move the menu button out of flow */
    right: 0;
    bottom: 44px;
    /* Move upwards, the same distance as the menu height */
    background-image: linear-gradient(to right, rgba(19, 51, 61, 0) 0, #191970 2em);
    padding-left: 3em;
}

nav li:nth-last-child(2) {
    /* The close button */
    display: none;
}

nav#menu:target {
    height: auto;
    padding: 0;
}

nav#menu:target ul {
    max-height: none;
}

nav#menu:target li {
    display: block;
}

nav#menu:target a {
    display: block;
    padding: 0 2em;
    background-color: rgba(255, 255, 255, 0.05);
}

nav#menu:target a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

nav#menu:target li:not(:first-child) {
    margin-top: 2px;
}

nav#menu:target li:last-child {
    display: none;
}

nav#menu:target li:nth-last-child(2) {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border-left: 2px solid rgb(19, 51, 61);
}

/* E MENU */

Setelah kode css diatas terpasang, lanjutkan dengan mencari kode </header>, kemudian salin kode html dibawah ini dan letakkan dibawah kode tersebut.

<nav id='menu'>
    <ul id='menu-closed'>
        <li><a href='/'>Home</a></li>
        <li><a href='#'>About Us</a></li>
        <li><a href='#'>Contact Us</a></li>
        <li><a href='#'>Sitemap</a></li>
        <li><a href='#menu-closed'>&#215; Close menu</a></li>
        <li><a href='#menu'>&#9776; Menu</a></li>
    </ul>
</nav>

Jika sudah terpasang, menu-menu pada kode html diatas yang berwarna merah bisa Kamu ganti dengan kata-kata yang diinginkan dan jangan lupa untuk mengganti juga tanda # dengan alamat url tujuan. Setelah itu, lanjutkan dengan melakukan save template untuk perubahan.

Menu navigasi diatas merupakan salah satu menu navigasi responsive yang bersumber dari salah satu blogger juga yang Saya lupa nama blognya. Tapi jika pembaca mengetahuinya Saya harap dapat memberitahukan dengan mengisi kolom komentar agar bisa disertakan sumbernya pada blog ini, terimakasih.

Semoga tulisan ini dapat bermanfaat khususnya bagi yang baru memulai dan belajar seperti Saya di dunia blogger.