Blog Tutorial - Bagi sobat yang sudah sering nyasar ke blog Doodey pasti sudah tidak asing lagi dengan horizontal menu navigasi. Nah, pada postingan kali ini, doodey akan mencoba membuat navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger. Dengan sedikit sentuhan pada CSS, widget Linklist yang semulanya banyak digunakan sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi secara horizontal.
Mari kita mulai tutorial blog-nya! :)
Pertama masuk dulu ke halaman Edit HTML, kemudian copy-paste semua kode CSS di bawah ini lalu letakan di atas kode ]]></b:skin>
Masih pada halaman Edit HTML kemudian cari kode <div id='outer-wrapper'><div id='wrap2'>, biasanya kode ini terletak di bawah HTML tag <body>. Kemudian copy-paste semua kode di bawah ini, dan letakan kodenya di bawah kode warna merah di atas.
Silakan disimpan templatenya dan lihat sendiri hasilnya bagaimana, bagus apa tidak? Jika masih kurang cocok dengan mata, sobat bisa menyesuaikan sendiri warna latar dan teksnya, Ok. :)
Untuk menambah menu, silahkan buka kembali "Elemen Halaman", kemudian perhatikan widget paling atas, disitu sudah terlihat widget baru dengan title "Top Tabs", silahkan klik edit dan tambahkan menu yang sobat ingin tampilkan.
Selamat Mencoba :)
Mari kita mulai tutorial blog-nya! :)
Pertama masuk dulu ke halaman Edit HTML, kemudian copy-paste semua kode CSS di bawah ini lalu letakan di atas kode ]]></b:skin>
/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}
/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}
Masih pada halaman Edit HTML kemudian cari kode <div id='outer-wrapper'><div id='wrap2'>, biasanya kode ini terletak di bawah HTML tag <body>. Kemudian copy-paste semua kode di bawah ini, dan letakan kodenya di bawah kode warna merah di atas.
<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == '') {this.value = 'Cari artikel disini';}' onfocus='if (this.value == 'Cari artikel disini') {this.value = '';}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Silakan disimpan templatenya dan lihat sendiri hasilnya bagaimana, bagus apa tidak? Jika masih kurang cocok dengan mata, sobat bisa menyesuaikan sendiri warna latar dan teksnya, Ok. :)
Untuk menambah menu, silahkan buka kembali "Elemen Halaman", kemudian perhatikan widget paling atas, disitu sudah terlihat widget baru dengan title "Top Tabs", silahkan klik edit dan tambahkan menu yang sobat ingin tampilkan.
Selamat Mencoba :)