Xivanki Share !!: Cara Mudah Membuat Menu Navigasi Responsive di Blog

Cara Mudah Membuat Menu Navigasi Responsive di Blog - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Mudah Membuat Menu Navigasi Responsive di Blog !! Semoga tulisan dengan kategori Tutorial Blogger !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Mudah Membuat Menu Navigasi Responsive di Blog ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Menu Navigasi adalah suatu elemen penting bagi suatu blog. Karena dengan adanya menu navigasi, pengunjung akan lebih mudah mencari suatu postingan yang ada di blog kita.

Setiap blog wajib memiliki menu navigasi.

Coba sobat bayangkan jika suatu blog tidak memiliki menu navigasi, maka blog tersebut akan terlihat tidak profesional. Dan juga, hal ini sangat tidak disukai oleh mesin pencari maupun pengunjung.

Pada kesempatan kali ini, saya akan membagikan tutorial untuk membuat menu navigasi Responsive untuk Blog sobat. Sebenarnya tutorial untuk membuat menu navigasi sudah banyak bertebaran di luar sana, tapi di sini saya akan menyampaikannya kepada sobat se-sederhana mungkin agar sobat menjadi paham.

Berikut ini langkah-langkah membuat menu navigasi dropdown horizontal untuk blog.

1. Masuk ke Blogger, pilih blog sobat

2. Klik menu Template > Edit HTML

3. Setelah itu, silahkan sobat cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan pencarian)

4. Jika sudah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* menu navigasi responsive */
#menu{background:#1E90FF;color:#fff;height:40px;width:100%;z-index:99;}#menu ul,#menu li{margin:0 auto;padding:0;list-style:none}#menu ul{height:40px;width:100%}#menu li{float:left;display:inline;position:relative;font:bold 11px 'Open Sans',Arial;text-transform:uppercase}#menu a{display:block;line-height:40px;padding:0 12px;text-decoration:none;color:#fafafc;transition:all 0s ease-in-out}#menu li a:hover{-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;transition: all .4s ease-in-out;border-color:#222;color:#fff;background:#222;}#menu li ul li{float:none}#menu li .submenu:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:6px;color:#fff}#menu input{display:none;margin:0;padding:0;width:80px;height:30px;opacity:0;cursor:pointer}#menu label{font:bold 30px 'Open Sans',Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}#menu label span{font-size:15px;position:absolute;left:35px;padding:1px}#menu ul.menus{height:auto;overflow:hidden;width:14em;background:#fff;position:absolute;z-index:99;display:none}#menu ul.menus li{display:block;width:100%;font:14px 'Open Sans',sans-serif}#menu ul.menus a{color:#444;font-weight:bold;border-bottom:1px solid #ddd;font-size:10px}#menu ul.menus a:hover{background:#EEE;color:#555;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}#menu li:hover ul.menus{display:block}
@media only screen and (max-width:768px){
#menu{position:relative;margin:0;width:100%}#menu ul{background:#1E90FF;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}#menu ul.menus{width:100%;position:static;padding-left:20px}#menu li{display:block;float:none;width:auto}#menu li:hover > ul{width:100%;-webkit-padding-start:0}#menu input,#menu label{position:absolute;top:0;left:0;display:block}#menu input{z-index:4}#menu input:checked + label{color:#fff}#menu input:checked ~ ul{display:block;width:100%}
}

5. Cari lagi kode </header>

6. Jika sudah ketemu, letakkan kode berikut tepat di bawah kode </header>

<!-- menu start -->
<nav id='menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label>≡<span>Menu</span></label>
<ul>
<li><a class='active' href='/' itemprop='url' title='Home'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='#' itemprop='url'>Menu 1</a></li>
<li><a href='#' itemprop='url'>Menu 2</a></li>
<li><a class='submenu' href='#' itemprop='url'>Menu 3</a>
<ul class='menus'>
<li><a href='#' itemprop='url'>Sub Menu 1</a></li>
<li><a href='#' itemprop='url'>Sub Menu 2</a></li>
</ul>
</li>
</ul></nav>
<!-- menu end -->

Keterangan :
ganti tanda # dengan link tujuan sobat , sedangkan tulisan yang bercetak miring, silahkan sobat ganti dengan tulisan yang ingin sobat tampilkan pada menu navigasi.

7. Lalu klik Simpan Template dan silahkan cek Blog sobat


Isilah menu tersebut dengan link yang dibutuhkan blog sobat, seperti Daftar Isi, Kontak, Label, Privacy Policy dan lain-lain.

Demikianlah postingan saya kali ini, semoga bermanfaat.