Cara Membuat Menu Navigasi di Blogger

contoh menu navigasi

Menu navigasi sangatlah penting, kenapa? karena memudahkan para pengunjung untuk berpindah dari satu halaman ke halaman lainnya atau dari satu menu ke menu lainnya. Menu navigasi juga adalah syarat wajib sebelum mendaftarkan blog kita ke Google Adsense.

Di blogspot sebenarnya sudah ada widget pages tapi itu di peruntukan untuk halaman saja dan tidak mendukung menu dropdown. Jadi kita harus membuat menu navigasi yang mendukung dropdown secara manual.

Menempatkan menu navigasi juga harus tepat mudah dilihat, sehingga tidak membingungkan para pengunjung. Biasanya menempatkan menu navigasi di atas header, di bawah header, footer atau di sidebar. Menu navigasi biasanya berisi link home, link menuju ke sebuah halaman yang ada di blog/website kita atau ke sebuah artikel dan link menuju ke website lain.

Oke kali ini saya akan membuat menu navigasi yang sederhana, simaklah baik-baik langkahnya di bawah ini.

Cara Membuat Menu Navigasi di Blogger

Pertama masuklah ke blog sobat kemudian pilih menu Tema > Edit HTML. Kemudian CTRL+F carilah kode </head>. Copy dan paste kode di bawah ini tepat di atas kode tersebut.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Kedua carilah kode ]]></b:skin>. Copy dan paste kode CSS di bawah ini tepat di atas kode tersebut.

.main-nav li > a:after,
.main-nav ul ul li > a:after,
.main-nav ul ul ul li > a:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.main-nav {
    background: #333;
    margin: 0 15px;
}
.main-nav:after {
    content: '';
    display: block;
    clear: both;
}
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav ul li {
    float: left;
    position: relative;
}
.main-nav a {
    color: #ccc;
    display: block;
    line-height: normal;
    padding: 15px 12px;
    text-transform: uppercase;
    position: relative;
}
.main-nav li.current-menu-item > a,
.main-nav li:hover > a {
    background: #2196f3;
    color: #ffffff;
}
.main-nav ul li:hover > ul {
    display: block;
}
.main-nav ul ul {
    display: none;
    background: #333;
    left: 0;
    top: 100%;
    position: absolute;
    z-index: 2;
}
.main-nav ul ul li {
    float: none;
    min-width: 180px;
}
.main-nav ul ul a {
    padding: 10px 12px;
}
.main-nav ul ul ul {
    left: 100%;
    top: 0;
    position: absolute;
}
.main-nav li > a:after {
    content: '\f0d7';
    font-size: 14px;
    margin-left: 5px;
}
.main-nav li > a:only-child:after {
    content: '';
}
.main-nav ul ul li > a:after,
.main-nav ul ul ul li > a:after {
    content: '\f0da';
    right: 15px;
    top: 12px;
    position: absolute;
}
.main-nav .nav-toggle {
    background: #262626;
    color: #ccc;
    cursor: pointer;
    display: none;
    float: left;
    line-height: normal;
    padding: 15px;
    width: auto;
    position: relative;
}
.main-nav .nav-toggle:before {
    content: '';
    border-top: 10px double #ccc;
    border-bottom: 3px solid #ccc;
    height: 17px;
    width: 20px;
    top: 16px;
    position: absolute;
}
.main-nav .nav-toggle span {
    text-transform: uppercase;
    margin-left: 25px;
}

Ketiga itu carilah kode </header> lalu copy dan paste kode HTML di bawah ini, tepat di bawah kode tersebut.

<!-- primary menu -->
<nav class='main-nav'>
	<div class='nav-toggle'><span>menu</span></div>
    <ul>
        <b:if cond='data:blog.pageType in {&quot;index&quot;}'>
            <li class='current-menu-item item-home'><a expr:href='data:blog.homepageUrl'>home</a></li>
        <b:else/>
            <li><a expr:href='data:blog.homepageUrl'>home</a></li>
        </b:if>
        <li><a href='#menu1'>menu 1</a></li>
        <li><a href='#menu2'>menu 2</a></li>
        <li><a href='#menu3'>menu 3</a></li>
        <li><a href='#menu4'>menu 4</a></li>
        <li><a href='#tutorial'>tutorial</a>
            <ul>
                <li><a href='#html'>html</a></li>
                <li><a href='#css'>css</a></li>
                <li><a href='#php'>php</a></li>
            </ul>
        </li>
    </ul>
</nav>

Selanjutnya klik tombol Simpan tema dan lihat hasilnya. Menu 1-4 bisa anda edit sesuai kebutuhan, ubahlah “#menu 1-4” dengan link menuju ke sebuah halaman atau artikel.

Selesai, Selanjutnya baca Cara Membuat Menu Navigasi Responsive lanjutan dari tutorial ini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *