Cara Menciptakan Sajian Dengan Sub Sajian Di Blog

Cara menciptakan hidangan ini tidaklah terlalu sulit, sehabis surfing beberapa kali risikonya aku menemukan caranya dan sesuai dengan yang aku inginkan.
dimana tampilan menu nantinya akan ibarat hidangan di blog saya ini, update : tampilan sudah beda/tidak sama dengan blog ini. apabila kursor mouse diarahkan ke hidangan utama maka akan keluar sub-sub hidangan di bawahnya.
berikut ini caranya:

1. Login dulu ke blog anda.
2. Pilih Template kemudian Edit Html.
3. kemudia beri tanda centang pada Expand template widget. (Update : Sudah Tidak ada tombol centang, pribadi saja no 4.)
4. kemudian cari isyarat berikut ]]></b:skin>. untuk mempermudah mencarinya gunakan  CTRL + F.
5. kemudian copy pastekan kode/script ini (dibawah ini) sempurna di atas/sebelum isyarat ]]></b:skin>.

#NavbarMenu { background: #808080; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

6. sehabis itu simpan template.
7. kemudian kembali ke Rancangan/ Element laman dan tambah Gadget dibawah header kemudian pilih Html/Java Script
8. kemudian pastekan kode/script dibawah ini:

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='http://www.pengetahuanq-aziest.blogspot.com/'>HOME</a> </li>
<li><a href='gresekilmu.xyz/search?q=islami'>ISLAMI</a>
<ul>
<li><a href='gresekilmu.xyz/search?q=islami'>NAMA</a> </li>
<li><a href='gresekilmu.xyz/search?q=islami'>NAMA</a> </li>
<li><a href='gresekilmu.xyz/search?q=islami'>NAMA</a> </li>
</ul> </li>

<li><a href='gresekilmu.xyz/search?q=islami'>ELEKTRONIKA</a>
<ul>
<li><a href='gresekilmu.xyz/search?q=islami'>NAMA</a> </li>
<li><a href='gresekilmu.xyz/search?q=islami'>NAMA</a></li>
<li><a href='gresekilmu.xyz/search?q=islami'>NAMA</a> </li>
</ul> </li>

<li><a href='http://www.blogger.com/profile/13499923304171328307'>ABOUT ME</a>
<ul>
<li><a href='http://www.facebook.com/profile.php?id=100000038095865&ref=tn_tnmn'>ME ON FACEBOOK</a> </li>
<li><a href='https://twitter.com/#!/aziestsembilant'>ME ON TWITTER</a> </li>
</ul> </li>
</ul>
</div>

KETERANGAN:
#warna merah merupakan URL untuk hidangan utama, sanggup anda ganti dengan URL yang akan anda tujukan.
#warna biru merupakan URL untuk Sub-sub menunya, sanggup anda ganti dengan URL yang akan anda tujukan.
#dan yang dicetak tebal merupkan Nama URL tersebut uang akan muncul di menunya, ganti sesuai keinginan.
apabila ingin menambah menunya, tinggal tambah saja, sanggup dianalisa dari script diatas.

9. kemudian simpan dan lihat hasilnya.
SELESAI

Tweet

Subscribe to receive free email updates: