Cara Membuat Menu Navigasi Template Blog Seo Fast Load

Salah satu ciri blog yang disukai oleh Para pengunjung blog/website adalah halaman blog memiliki menu navigasi yang jelas. Sehingga tidak membingungkan pengunjung dalam menelusuri halaman-halaman yang ada di blog tersebut.

Pada serial sebelumnya kita telah berhasil membuat template blog mulai dari nol sampai akhir, sekarang kita akan coba membahas tentang cara membuat Menu Navigasi Horisontal pada blog.

Pada Kesmpatan kali ini kita akan belajar bagaimana cara membuat menu navigasi blog yang sederhana. Kenapa Saya sebut dengan Menu sederhana..?  karena menu navigasi ini murni merupakan modifikasi CSS saja, sehingga dijamin sangat ringan.

Ide dasar menu navigasi ini berasal dari Unordered List HTML, yang dipanggil menggunakan tag ul (unordered list). Setiap itemnya berada di dalam tag li (list).

Karena kita akan membuat menu navigasi, maka tag ul dan tag li dapat diletakkan di dalam tag nav seperti berikut.

<nav>
<ul>
  <li><a href="https://adsenstock.blogspot.co.id/">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
</nav>

Selanjutnya Di sini Anda juga dapat melihat tag a untuk membuat link. Jadi ketika menu navigasi di-klik masing-masing akan mengarah menuju halaman yang kita tentukan.

Untuk Posisi menu navigasi diletakkan di bawah header wrapper, di atas content dan sidebar wrapper. Sehingga di dalam source code template blog Anda, tag nav diletakkan di bawah tag penutup header.

...
</b:section>
</header>
  /* Menu Navigasi di sini */
<div class='clearfix'/>
<aside id='content-wrapper'>
...

Jika Anda kesulitan untuk mencari tag penutup header, gunakan fitur pencarian dengan menekan Ctrl+F pada keyboard di dalam Template Editor.

Sekarang silahkan anda Coba praktekkan dan simpan template blog Anda. Seharusnya tampilan blog Anda akan seperti gambar di bawah ini.

Selanjutnya kita akan coba atur tampilannya menggunakan CSS, untuk yang pertama kita coba  menghilangkan bullet atau lingkaran hitam yang berada di depan menu. Caranya adalah dengan menambahkan atribut list-style-type:none di dalam tag ul.

#menu {width: 100%;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}

Kemudian sekarang kita lihat menu navigasi kita telah tersusun menyamping, bukan ke bawah lagi. Akan tetapi tampilannya masih terlihat kacau, masih perlu sentuhan beberapa CSS lagi untuk mempercantik menu navigasi kita.

Selanjutnya kita coba ubah warna backgroundnya menjadi warna gelap (background-color), dan tentukan ketinggian pasti menu navigasi (height).

#menu {width: 100%; background-color: #4d4544; height: 35px;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}

Maka kita lihat tampilan blog kita sudah berubah menjadi seperti ini:

Kemudian Kita Tambahkan CSS berikut untuk mengatur tampilan tag a di dalam kotak menu navigasi.

#menu {width: 100%; background-color: #4d4544; height: 35px;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px;}

Display:block dan line-height kita coba tambahkan agar bukan hanya text link saja yang dapat diklik, tetapi juga kotak background menunya. Padding ditambahkan untuk mengatur jarak dalam antar menu.

Kemudian Tambahkan CSS untuk mengatur tampilan tag a:hover di bawah ini, berfungsi mengatur tampilan ketika kotak menu

navigasi disorot oleh kursor (hover).

#menu {width: 100%; background-color: #4d4544; height: 35px;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px;}
#menu ul li a:hover {color: #000; background: #BABABA;}

CSS color di atas akan membuat warna link teks berubah menjadi #000 (hitam). Background mengatur warna kotak menu yang bertindak sebagai latar belakang.

Tampilan blog Anda dengan menu navigasi yang baru saja kita buat seharusnya seperti gambar di bawah ini.

Sekarang saya ingin membuat tulisan di dalam menu navigasi menjadi huruf kapital semua, maka saya cukup menambahkan text-transform:uppercase di dalam tag menu.

#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px;}
#menu ul li a:hover {color: #000; background: #BABABA;}

Kemudian saya ingin coba menghilangkan garis bawah yang terdapat pada tulisan. Caranya dengan menambahkan text-decoration:none di dalam tag a menu navigasi.

#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none;}
#menu ul li a:hover {color: #000; background: #BABABA;}

Sepertinya tata letak menu navigasi kita agak ke tengah sedikit. Saya ingin menu Home dimulai dari pojok kiri, berarti saya harus mengatur padding tag ul menjadi nol.

#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none;}
#menu ul li a:hover {color: #000; background: #BABABA;}

Saya rasa saya ingin tiap menu memiliki warna background yang berbeda saja. Caranya tambahkan tag nth-child berikut.

#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li:nth-child(1){background-color:#4285F4;}
#menu ul li:nth-child(2){background-color:#EA4335;}
#menu ul li:nth-child(3){background-color:#FBBC05;}
#menu ul li:nth-child(4){background-color:#34A853;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none;}
#menu ul li a:hover {color: #000; background: #BABABA;}

Wow, saya suka menu navigasi warna-warni ini, tetapi tulisan menu-menunya jadi sulit untuk dibaca. Solusinya dengan mengubah warnya tulisannya menjadi lebih kontras dengan memainkan color pada tag a menu navigasi. Di sini saya akan membuat warnanya menjadi putih.

#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li:nth-child(1){background-color:#4285F4;}
#menu ul li:nth-child(2){background-color:#EA4335;}
#menu ul li:nth-child(3){background-color:#FBBC05;}
#menu ul li:nth-child(4){background-color:#34A853;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none; color:#fff;}
#menu ul li a:hover {color: #000; background: #BABABA;}

Selamat anda sudah bisa membuat menu navigasi pada template blog anda sendiri, untuk hasil dari Keseluran kode diatas maka hasilnya seperti dibawah ini:

Hasil Dari Kode Diatas:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html> <head> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/> <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if> <b:if cond='data:blog.metaDescription != ""'> <meta expr:content='data:blog.metaDescription' name='description'/> <b:else/> <meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/> </b:if> </b:if> <!-- SEO Title Tag --> <b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if> <b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if> <b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if> <b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if> <b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if> <b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if> <b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if> <style type="text/css"><!-- /*<b:skin><![CDATA[ ]]></b:skin> <style type='text/css'> /* RESET */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;} blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;} blockquote, q {quotes: none;} :focus {outline: 0;} .clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;} body {background-color: #cab894;background-position: center center;} a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;} a:hover {color: #4d4544;} a {color: #3094db;} #wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;} #header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;} .header {text-align:center} #menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;} #menu ul {list-style-type: none; padding: 0;} #menu ul li {float: left;} #menu ul li:nth-child(1){background-color:#4285F4;} #menu ul li:nth-child(2){background-color:#EA4335;} #menu ul li:nth-child(3){background-color:#FBBC05;} #menu ul li:nth-child(4){background-color:#34A853;} #menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none; color:#fff;} #menu ul li a:hover {color: #000; background: #BABABA;} #content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;} #sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;} #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;} .clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;} #blog-pager-newer-link {float: left;} #blog-pager-older-link {float: right;} #blog-pager {text-align: center;margin: 20px 0px 0px 1px;} .status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative} .status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative} .status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1} .status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4} .status-msg-hidden{visibility:hidden;padding:.3em 0} .status-msg-wrap a{padding-left:.4em;text-decoration:underline} </style> <!--<head/>--> <body> <div id='wrapper'> <header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget> </b:section> </header> <nav id='menu'> <ul> <li><a href="https://teknomia.blogspot.co.id/">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <div class='clearfix'/> <aside id='content-wrapper'> <b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget> </b:section> </aside> <aside id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside> <div class='clearfix'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'></b:section> </footer> </div> <!--</body>--> </HTML>
Demikian adalah cara membuat Menu Navigasi pada Template blog,Semoga bermanfaat, Jika anda mengalami kendala atau ada yang mau menambah terkait cara diatas silahkan beri masukkan pada kolom komentar.

Share this post