Cara Menciptakan Sajian Horizontal Dan Sub Sajian Di Blog
Navigasi hidangan sangat diharapkan dalam sebuah blog, funsinya memudahkan pengunjung untuk menemukan postingan kita menurut hidangan atau sub hidangan di blog kita. Untuk menciptakan hidangan dan sub hidangan diharapkan pengeditan html.jika masih gundah bagaimana cara mengedit html ikuti langkah dibawah ini,
alasannya ialah untuk mengedit html harus berhati hati, salah satu abjad atau satu tanda saja akan menyebabkan error, untuk itu sebelum mengedit back up dulu, sehingga jikalau ada kesalahan dapat dikembalikan ke semula, atau kita dapat copy dulu di notepad, itu yang saya lakukan
inilah caranya menciptakan hidangan horizontal
masuk dasbor blog klik template
lalu klik edit html
sehabis muncul instruksi kode html nya cari kode
<div class='main-outer'>
untuk mempermudah pencarian klik ctrl+f atau f3 alasannya ialah kita akan sedikit kesulitan untuk mencari instruksi itu diantara ribuan kode
sehabis ketemu copy instruksi ini sempurna diatas instruksi <div class='main-outer'>
kode
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu a</a></li>
<li><a href='#'>Sub Menu b</a></li>
<li><a href='#'>Sub Menu c</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu a</a></li>
<li><a href='#'>Sub Menu b</a></li>
</ul>
</li>
<li><a href='#'>Menu 5</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu a</a></li>
<li><a href='#'>Sub Menu b</a></li>
</ul>
</li>
<li><a href='#'>Menu 6</a></li>
</ul>
</div>
ganti nama Menu hidangan tadi dengan nama Menu yang diinginkan contohnya Menu 1 diganti dengan Beranda, begitupun dengan hidangan menu dan sub hidangan lainnya
untuk mengecek klik pratinjau, jikalau tidak error berarti berhasil
lalu klik simpan template
lihat blog untuk melihat hasilnya, menyerupai inilah tampilannya, disana terlihat hidangan beranda, profil, dst berjajar horizontal
demikianlah cara menciptakan hidangan horizontal dan sub menu
supaya bermanfaat....
Komentar
Posting Komentar