Pages

Laman

Sabtu, 09 Mei 2015

Cara Mengedit bagian Top Menu pada template blogger,

Kali inii saya mau berbagi informasi mengenai cara mengedit top menu pada template blog kita. seperti menu home,pages, comment,posts,coments,,,,, sampai skarang sepertinyaa belum ada cara supaya dapat mengedit secara mudah dan praktis, jadi harus ngoprek html gtoo,,,tapi no problem koq,,pasti teman teman bisa deh,,,,,,

... untuk itu,tak usah lama lama lagi, langsung kita peajari cara mengedit bagian top menu pada blogger kita harus dan ada sedikit mengubah kode script html template blognya... jadii ingat sugeesti saya untukmemperthatikan dengan seksama,,,,okeeee

>> 1st example,Check it Out Guys
1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( don't forget centang expand template widget )... Kemudian Copy-Paste dahulu semua kode HTML template widget blog kamu ke dalam wordpad atau notepad, lalu simpat... untuk jaga-jaga gitu...
2. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html saya mungkin ada beberapa script html yang berbeda dengan blog kalian, jadi kalau yang menggunakan fasilitas template otomatis yang baru, bisa di "find" kata kunci seperti home dan lainnya,,,lalu chek bagian tersebut
3. 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 kasih warna ungu, sesuai keinginan
> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan sendiri...

4. Finally simpan template kamu lalu lihat blog yang sudah di update dengan refresh, atau klik ''lihat blog''

...Jika kalian mau menambah lagi menu blog,tinggal copy-paste kode html top menu-nya 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 bisa seperti dibawah ini>>>>>>

>>2nd example 
1. Jika kode html top menu di 1st example 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 selesai kemudian 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>
 Semoga berhasil kawan,,,,jngan lupa tinggalkan komentar yaaa,,,,

Tidak ada komentar:

Posting Komentar