Cara membuat menu navigasi di blogspot 2012 update

Membuat Menu Navigasi Di Bawah Header

Pada postingan kali ini saya akan posting tentang membuat menu/navigasi di blog , dan anda tidak perlu menggunakan banyak Script untuk membuat-nya. Menu ini terdapat tepat di bawah header atau judul Blog anda, fungsi-nya pun tetap sama, ini agar mempermudah pengunjung Blog anda menelusuri kategori yang terdapat pada Blog. Untuk contoh anda bisa liat gambar di bawah ini, perhatikan Menu di dalam lingkaran merah, dan untuk lebih jelas silahkan klik gambar.

Bagaimana, apakah anda tertarik untuk Membuat Menu Navigasi Di Blog ? Jika iya, berikut cara membuat-nya.

Langkah Pertama:

1. Log in ke account Blogger anda

2. Pada Menu Dashboard klik "Design", setelah itu klik "Edit HTML"

3. Centang kolom "Expand widget template", jangan lupa klik "Download template lengkap" ini memudahkan anda mengembalikan template ketika anda melakukan kesalahan saat pengeditan

4. Cari kode di bawah ini, untuk mempermudah pencarian tekan Ctrl + F lalu masukkan yang anda cari

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

Cat: jika anda tidak menemukan kode-nya, tolong anda perhatikan 'no'/> yang terdapat pada kode di atas, ganti menjadi 'yes'/> setelah itu anda cari kembali kode tersebut, sudah dapat ? Jika sudah dapat silahkan anda lanjut ke Langkah kedua.

5. Setelah ketemu kode-nya, maka kurang lebih tampilan seperti kode di bawah ini, tergantung dari template anda

<div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>

6. Ubah kode showaddelement='no'/> menjadi showaddelement='yes'/>

7. Jika sudah selesai, klik "Save template"/simpan template anda

Langkah kedua:

1. Untuk Langkah kedua, klik "Page Elements", posisi-nya tepat di samping kiri "Edit HTML"

2. Klik "Add a Gadget" yang terdapat di bawah Header/Judul Blog anda, jika di template anda tidak terdapat pilihan "Add a Gadget" tepat di bawah Header, silahkan klik disini Membuat Elemen Halaman Di Bawah Header

3. Setelah anda klik "Add a Gadget", pilih "HTML/JavaScript" lalu masukkan kode di bawah ini

<a href="http://tommymawan.blogspot.com/ " class="navigation">Home</a>
<a href="http://tommymawan.blogspot.com/ " class="navigation">Contact</a>
<a href="http://tommymawan.blogspot.com/ " class="navigation">About Me</a>
<a href="http://tommymawan.blogspot.com/ " class="navigation">Daftar Isi</a>
<a href="http://tommymawan.blogspot.com/ " class="navigation">Facebook</a>
<a href="http://tommymawan.blogspot.com/ " class="navigation">Twitter</a>
<a href="http://tommymawan.blogspot.com/ " class="navigation">RSS</a>
<a href="http://tommymawan.blogspot.com/ " class="navigation">Back Link</a>

4. Untuk Link http://indoblogpost.blogspot.com/ silahkan di ganti dan sesuaikan dengan Link anda, ganti tulisan yang berwarna Biru dengan judul Menu Blog yang anda inginkan

5. Setelah itu klik "Save/Simpan" dan lihat hasil-nya

Sedikit tambahan, jika anda ingin memodifikasi Menu Navigasi Di Blog yang anda buat sehingga menimbulkan efek warna dan background, ikuti langkah-langkah di bawah ini:

1. Masuk kembali ke "Edit HTML"

2. Cari kode di bawah ini, untuk mempermudah anda dalam mencari tekan Ctrl + F

]]></b:skin>

3. Setelah anda menemukan kode di atas, Copy kode di bawah ini dan Paste tepat di atas-nya

a.navigation {
background: #3333ff;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Ket: Ganti angka yang berwarna Merah di atas untuk menyesuaikan jarak antara Menu yang anda buat, untuk mengubah warna tampilan baik saat anda sentuh maupun tidak silahkan ganti tulisan yang berwarna Biru dengan kode warna yang anda inginkan.

4. Jika anda mengerti tentang CSS, anda dapat memodifikasi tampilan Menu seperti pada Gambar di atas, setelah selesai klik "Save template" anda, dan lihat hasil-nya.

 

5.jangan lupa sob..:D

100 % ampuh

http://tommymawan.blogspot.com/