Cara membuat menu navigasi horizontal sederhana di blogspot

Menu navigasi pada web atau blog sangatlah penting dan bahkan wajib, karena akan memudahkan pengunjung blog untuk menggunakan fitur-fitur yang sudah kita sediakan. Tutorial tentang cara membuat menu navigasi horisontal ini khusus untuk dipasang pada template blogspot. Menu ini berbasis text, jadi loadingnya lebih cepat dibandingkan dengan yang berbasis image. Script code ini diperoleh dari http://www.dynamicdrive.com

 

Langkah-langkahnya adalah sebagai berikut:
1. Silahakan masuk ke menu Dashboard -> pilih Design -> pilih Edit Html
2. Carilah script kode di bawah ini (tekan menu F3 untuk menampilkan menu find pada browser Anda):

]]></b:skin>

</head>

Masukkan script kode di bawah ini tepat di bawah kode tersebut di atas:

<style type='text/css'> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .mattblacktabs{ width: 100%; overflow: hidden; border-bottom: 1px solid black; } .mattblacktabs ul{ margin: 0; padding: 0; padding-left: 10px; /*offset of tabs relative to browser left edge*/ font: bold 12px Verdana; list-style-type: none; } .mattblacktabs li{ display: inline; margin: 0; } .mattblacktabs li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: OldLace; background: #FDF5E6; /*background of tabs (default state)*/ } .mattblacktabs li a:visited{ color: OldLace; } .mattblacktabs li a:hover, .mattblacktabs li.selected a{ background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ } </style>

3. Klik tombol "Save Template"
4. Klik Design -> Page Element
6. Pada Element Header , klik " Add a Gadget"
7. Pilih HTML/Javascript
Pada kotak dialog configure HTML/javaScript, masukkan code script di bawah ini pada kotak isian content:

<div class="mattblacktabs"><ul><li><a href="http://www.sbmcomputers.blogspot.com" target="_blank">Home</a></li> <li><a href="http://www.baitulamin.org" target="_blank">My Spiritual</a></li> <li><a href="http://www.flixya.com/user/Han76" target="_blank">My Pictures & Video</a></li> <li><a href="http://jemberkab.go.id" target="_blank">Local News</a></li> <li><a href="http://www.facebook.com/hanung.sudrajad" target="_blank">My Network</a></li> </ul></div>

Keterangan:
- Ganti tanda # dengan alamat url blog/web Anda, misalnya tombol menu Home diisi dengan http://sbmbisnis.blogspot.com
Demikian seterusnya, silahkan dimodifikasi sendiri

Jika Anda masih ingin menambah link menu navigasi, caranya adalah:
Sebelum kode di bawah ini;

</ul>

</div>

tambahkan kode ini:

<li><a href="url tujuan" target="_blank">teks yang akan ditampilkan</li>

Klik tombol Save

*** SELESAI ***

Posted in: Blog Tips