Cara Membuat Tombol Menu Di Bagian Atas Footer Blog

Cara Membuat Tombol Menu Navigasi Di Bagian Atas Footer Blog. Membuat blog terlihat menarik belum tentu dapat memberikan kenyamanan bagi pengunjung, sebaik apapun desain blog anda apakah dapat mengundang daya tarik pengunjung untuk lama-lama bertahan di blog anda? apakah mereka sering berkunjung kembali di blog anda?

Tampilan template bukan satu-satunya yang dapat membuat blog anda kedatangan trafik dan semakin bertambah, bahkan itu bukanlah sesuatu yang sangat signifikan. Selain memaksimalkan konten SEO dalam artikel anda, aksesibilitas adalah faktor yang penting saat pengunjung sedang mengunjungi blog anda, untuk itulah sangat penting membuat blog anda mudah di akses menggunakan menu navigasi.

Cara Membuat Tombol Menu Di Bagian Atas Footer Blog

Disini anda akan saya arahkan untuk pembuatan tombol menu navigasi di blog. Mengapa harus dibagian footer? pada umumnya tombol menu navigasi memang berada pada bagian atas dan bawah header blog, akan tetapi tidak semua blog dapat menampung semua konten atau kategorinya hanya dengan 1 atau 2 tab menu, ini sebenarnya mendasar sesuai kebutuhan masing-masing pemilik situs, jika anda memang hanya memiliki konten yang spesifik dalam blog anda mungkin anda tidak perlu membuat tombol menu tambahan, sebaliknya akan sangat disayangkan jika semua kategori konten anda tidak tampil/terlihat pada laman blog, sebab bisa saja pengunjung tertarik mengunjungi konten selain yang sedang mereka baca.

Ikuti langkah-langkah dibawah ini;

• Masuk ke menu Template pada blogger, klik Edit HTML.
• Setelah jendela editor terbuka klik pada bagian mana saja pada script lalu tekan Ctrl + F, cari kode ]]></b:skin> 
• Letakkan kode CSS di bawah ini berada di atas kode ]]></b:skin> tadi.
  

/* Css Navigasi Menu Footer Style */
.ferstyle-wrap { background:transparent; height:54px; width:98%; text-align:center; overflow:auto; margin-top:-10px; margin-bottom:-10px; margin-left:10px; }
.ferstyle { font:normal 12px Arial; line-height:normal; text-transform:none; color:#f1f1f1; text-decoration:none; margin:0 auto; padding:0 auto; }
.ferstyle ul { margin:0; padding:0; }
.ferstyle li { list-style:none; color:#2c97de; float:left; width:20%; display:inline; position:relative; margin:0; text-align:center; }
.ferstyle li a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXGHIAbMOmnC6XDeVsF2G24iURWQRVyc_zoUAJqAfh4ZRYMi9bkQoiCG7bVwkOFhUI0fXNbspR8txpO73aAymsp4sAgs5RlMMKDrSg9n_DI3ro-T-1KY8tRBeFQFPgPADj8gNw6YsjfD8/s1600/ferstyle.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; }
.ferstyle 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; }
.ferstyle 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); }
.ferstyle 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); }
.ferstyle li ul a:hover { background:#1b1b1b; color:#fff; }
.ferstyle li ul li { float:none; display:block; width:auto; }
.ferstyle li ul ul { top:0; left:100%; }
.ferstyle li a:hover,.ferstyle ul li a:hover { color:#fc0; }

• Selanjutnya cari kode <footer> atau <footer id='footer-wrapper'> atau <div id='footer-wrapper'>, cari di antara ketiga kode tersebut, jika tidak ada yang sama persis cobalah menggunakan kode footer untuk mencari bagian kode yang hampir sama dengan kode di atas. Setiap pendesain template membuat kode markup yang berbeda-beda, terkadang mereka menggunakan nama mereka untuk menandakan kode markup ciptaan mereka seperti <'footer-nama_pendesain'>, namun jika anda kebingungan, nanti anda bisa lihat gambar penempatan posisi dibawah tutorial ini.
• Jika sudah ketemu, copas script HTML dibawah ini kode <footer> tadi.

<div id='footer-wrapper'>
<div class='ferstyle-wrap'>
<div class='ferstyle'>
<ul>
<li><a href='#' target='_blank' title='Menu 1'>Menu 1 <i class='fa fa-home'/></a></li>
<li><a href='#' target='_blank' title='Menu 2'>Menu 2 <i class='fa fa-balance-scale'/></a></li>
<li><a href='#' target='_blank' title='Menu 3'>Menu 3 <i class='fa fa-user'/></a></li>
<li><a href='#' target='_blank' title='Menu 4'>Menu 4 <i class='fa fa-bank'/></a></li>
<li><a href='#' target='_blank' title='Menu 5'>Menu 5 <i class='fa fa-credit-card-alt'/></a></li>
</ul>
</div></div>

• Jika anda membuat menu ini untuk tombol menu media sosmet, ganti tanda # bewarna merah dengan url media sosmed anda, misalnya url di bawah ini yang menuju ke profil facebook saya, ganti juga kode yang berwarna biru dengan title menu yang anda inginkan.

<li><a href='https://www.facebook.com/prastika.prang' target='_blank' title='Menu 1'>Menu 1 <i class='fa fa-home'/></a></li>

• Anda dapat menghapus kode tag class= jika tidak membutuhkannya, atau biarkan saja.
• Analisa kembali semua script, jika sudah klik tombol Pratinjau Template untuk melihat apakah setiap script bekerja dengan baik.
• Setelah itu Simpan/Save Template.

Singkat saja, bahwa Google sekarang memprioritaskan kenyamanan pengguna, itu sebabnya cara membuat tombol menu di atas footer ini sangat dibutuhkan untuk meningkatkan aksesibilitas pengunjung. Untuk menu navigasi di atas dapat anda kreasikan sendiri, misalnya untuk membuat tombol menu privacy, about, kontact us atau menuju kelaman yang anda khususkan. Selamat menu navigasi anda telah jadi.