Monday, July 19, 2010

Mengedit Top Menu Pada Template

Materi kali ini merupakan pembahasan dari pertanyaan dari sobat blogger yunblogs.. " Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  "

Memang belum tersedia fitur untuk mengedit top menu pada template blogger, tapi mungkin nanti akan ada fitur untuk mengubah menu top blogger, seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah.


Cara Pertama.

1. Login ke blogger > rancangan > edit html > edit template, centang expand template widget.

2. Backup. Copas dahulu seluruh kode html template ke dalam Notepad dan simpan.

3. Ctrl F lalu cari kode "<div id='menu'>", kalau di 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>

Ket.
1) Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
2) URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Simpan template & reload blog.


Jika ingin menambah lagi menu blog tinggal copas kode html top menunya 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>


Cara Kedua

1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu, coba yang ini.

2. Ctrl F lalu cari kode "<div class='Menu'>".

3. Nanti akan ada kode sesudah "<div class='Menu'>" 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>
Ket.
1) Ubah nama menu yang diwarnai ungu.
2) Url yang diwarnai biru juga diubah, sesuaikan saja.

5. Simpan template & reload blog.


Jika ingin menambah lagi menu blog tinggal copas kode html top menunya 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>


Selamat Mencoba.