Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menambah Menu Navigasi Di Footer Blog

Cara Menambah Menu Navigasi Di Footer Blog - Pada umumnya menu diletakkan di posisi bagian atas atau di header blog maupun dibawah header blog. Akan tetapi ada juga yang sengaja menambahkan menu navigasi dibagian bawah blog atau di footer.

Dengan alasan apapun itu sah-sah saja, seperti menu di header blog yang difungsikan sebagai main menu yang berisikan link ke label postingan dan di footer ditambahkan menu untuk menuju label page seperti privacy policy, disclaimer, about atau yang lain.

Menambahkan menu pada blog ini sangat penting karena untuk mempermudah navigasi pengunjung.

Apalagi sebagai syarat untuk diterima Google Adsense adalah harus memberikan navigasi yang mudah kepada para pengunjung.

Selain itu dengan menambahkan menu bisa membuat desain atau tampilan blog menjadi lebih menarik.

Menu Navigasi Di Footer Blog

Cara Mudah Membuat Menu Diatas Footer Blog

Langkah-langkah yang harus dilakukan adalah sebagai berikut:

1. Buka dashborad blogger.
2. Klik Theme atau Template dan pilih Edit HTML.
3. Cari kode ]]></b:skin> ata klik pada keyboard CTRL+F dan pastekan kode ]]></b:skin>
4. Copy kode dibawah dan paste di atas kode ]]></b:skin> tersebut.

.menuku-wrap{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyd9oSjdL9tp3IlAr8VJRYtiR5uUvc3Tm4Or6LMeXTAOp8ATQe1yty84oGA9jkkOaM2VwoKMEZr4EDqEBrrKYNBy92hxiFLmuHCII-gGYM8tfFzgQ5eV23g0KpbFMTtZqiwht5uKwSO30/s1600/seocips-menuku.png) repeat-x top;height:54px;width:100%;overflow:auto}.menuku{font:normal 12px Arial;line-height:normal;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0 auto;padding:0 auto}.menuku ul{margin:0;padding:0}.menuku li{list-style:none;color:#b69786;float:left;width:20%;display:inline;position:relative;margin:0;text-align:center}.menuku li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkS43ekD-IH_EaTHRysuku9Os1BxbJCGNH8a5Xv7BxUsm2_NM3K1-xWSV3fi60AwTv8Xu_EcQX__zkvn94uz8-1m-tAXQqADzUf-OoLIisAbi_fLpei0sGfe5ETc6OZpFZ3n6efIauh2s/s1600/seocips-mnubg.png) repeat-x top;display:block;text-decoration:none;font-weight:700;color:#ccc;text-shadow:1px 1px 2px #111;outline:0;margin:10px 4px 8px;padding:8px 16px;border:1px solid #111}.menuku li a:hover{background:#333;-moz-box-shadow:inset 2px 2px 2px #151515;-webkit-box-shadow:inset 2px 2px 2px#151515;box-shadow:inset 2px 2px 2px #151515}.menuku li ul{position:absolute;z-index:10;left:0;top:100%;height:30px;width:170px;display:none;margin:0;padding:0;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}.menuku li ul a{margin:0;font:12px Arial;background:#2c2c2c;border-left:none;border:0;display:block;padding:7px 10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6)}.menuku li ul a:hover{background:#1b1b1b;color:#fff}.menuku li ul li{float:none;display:block;width:auto}.menuku li ul ul{top:0;left:100%}.menuku li a:hover,.menuku ul li a:hover{color:#fc0}@media screen and (max-width:960px)
@media screen and (max-width:622px) {
    .menuku-wrap {display:none}}
5. Cari kode <div id='footer'> atau footer (letaknya dibagian bawah halaman code HTML, setiap template kadang menggunakan istilah yang berbeda)
6. Copy kode dibawah dan pastekan di dalam area <di id='footer'> atau dibawah area <div id='footer'> seperti pada blog ShareKu

<!--Footer Navigation-->

<div class='menuku-wrap'>
<div class='menuku'>
<ul>
<ul>
<li><a href='#' title='About'>About</a></li>
<li><a href='#' title='Contact'>Contact</a></li>
<li><a href='#' title='Privacy'>Privacy</a></li>
<li><a href='#' title='Sitemap'>Sitemap</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
</ul>
</ul>
</div></div>
Catatan: Ganti tanda # dengan url page kalian.
Contoh penempatan pada blog saya seperti ini:

7. Save template

Sekian cara membuat menu navigasi di footer blog dari ShareKu, selamat berkreasi. Dan apabila sobat ingin blog terlihat keren dan mantap, sobat bisa menambahkan icon di menu navigas blog sobat. Terima kasih atas kunjungannya.

3 komentar untuk "Cara Menambah Menu Navigasi Di Footer Blog"

  1. bang untuk menu footer yang biasa seperti blog abang bagaimana caranya?

    BalasHapus
    Balasan
    1. Ini sudah bawaan dari template viomagz bang, jadi settingnya bisa lewat menu tata letak

      Hapus
  2. Makasih infonya bang

    #usmansan99
    #honja

    BalasHapus