Pages

Jumat, 01 Juni 2012

Cara Edit SubMenu bawaan Template


hanya kita mencoba dan mengutak-atik kode HTML blog itu sendiri, jadi bila tidak bisa mungkin sekilas membaca setidaknya bisa memahaminya. langsung saja, mungkin kuranglebih tampilan sub menu sobat seperti ini :





1. Buka/Login Blogger

2. Pilih Template > Edit HTML





3. Kemudian Lanjutkan/Proceed Kemudian sobat ditunjukkan kode HTML blog sobat.

4. cari tulisan seperti yang ada di atas atau nama subMenu sobat, misalnya Business dengan menggunakan shortcut Ctrl + F :


5. Ganti tulisan tersebut dengan yang sobat inginkan seperti EDUKASI, begitu juga dengan yang lainnya.

6. Dan ganti lambang # dengan link URL artikel sobat bukan link halaman awal sobat seperti : http://blog-anak-nurulfikri.blogspot.com tetapi dengan link artikel seperti : http://blog-anak-nurulfikri.blogspot.com/2012/05/membuat-menuhorizontal-dengan-submenu-2.html 

7. kemudian simpan

catatan :
  1. kode dibawah tulisan <ul class='children'> adalah submenu lanjutan dari submenu sebelumnya seperti contoh :
<li><a href='#'>MenuHorizontal</a>
<ul class='children'>
<li><a href='#'>SubMenu</a></li>
<li><a href='#'>SubMenu</a></li>
<li><a href='#'>SubMenu</a>
<ul class='children'>
<li><a href='#'>SubMenu</a></li>
<li><a href='#'>SubMenu</a>
</li>
</ul>
</li>
</ul> 
</li>
     2. perhatikan, terdapat 2 tulisan <ul class='children'> mengapa ada dua karena yang pertama setelah Menu Horizontal adalah submenu dari MenuHorizontal, sedangkan yang kedua adalah  submenu dari submenu yang kedua yang ketika disimpan akan ada submenu ke samping dari sub menu yang sebelumnya, hasilnya akan seperti ini :


  
    3.  untuk menambahkan SubMenu silahkan saja tambahkan kode berikut :

<li><a href='#'>MenuHorizontal</a>
<ul class='children'>
<li><a href='#'>SubMenu</a></li>
<li><a href='#'>SubMenu</a></li>
<li><a href='#'>SubMenu</a>
<ul class='children'>
<li><a href='#'>SubMenu</a></li>
<li><a href='#'>SubMenu</a>
</li>
</ul>
</li>
</ul> 
</li>

semoga bermanfaat, bila kurang paham silahkan bertanya... 

0 komentar:

Posting Komentar

IP

sites - info

Cool Blue Outer Glow Pointer
Twitter Delicious Facebook Digg Stumbleupon Favorites More