Cara Mengedit Top Menu Pada Template Blogger

Postingan ringan lagi.... yang merupakan pertanyaan dari sobat yunblogs.. " Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  " ..oke setelah dua hari libur ngeblog... now here we go again... :)

...Memang belum tersedia fitur untuk mengedit top menu pada template blogger ..belum secanggih itu... tapi mungkin mbah google suatu saat nanti  akan mendukung juga fitur untuk mengubah menu top blogger...wow hehe :D .. idak seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah

... Untuk mengedit top menu pada template blogger kita harus sedikit mengubah kode script html template blognya... jadi perhatikan caranya berikut ini :

>> Contoh I

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga...

3. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html blog saya seperti ini.. biasanya ada sedikit perbedaan dengan kode template blog kalian.. 

4. Nanti akan terlihat kode sesudah " <div id='menu'> " yang seperti contoh dibawah ini...

<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>
   </ul>
  </div>

    </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div id='menu'>

   <ul>

    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><div class='gap'/></li>

    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>

    <li><div class='gap'/></li>

<li><a href='menambah menu di tengah'>Tambah Menu di tengah</a></li>

    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>

    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>

    <li><div class='gap'/></li>

    <li><a href='http://www.blogger.com/'>Login</a></li>

    <li><a href='menambah menu dibawah'>Tambah Menu dibawah</a></li>

   </ul>

  </div>

ATAU....

>> Contoh II 

1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu.. coba yang ini.. 
2. Tekan Control+F lalu cari kode " <div class='Menu'> " ...

3. Nanti akan terlihat kode sesudah " <div class='Menu'> " yang seperti contoh dibawah ini...

<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>
                <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>
                </ul>
            </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Dan jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>

                <li><a href='menambah menu di tengah' title='#'><span>Tambah Menu di tengah</span></a>

</li>

                 <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>

                <li><a href='menambah menu dibawah' title='Extras'><span>Tambah Menu dibawah</span></a>

</li>

                </ul>
            </div>

mudah bukan