Posting ini diambil dari blognya kang Rohman yang membahas tentang
Navigasi yang bernama UvumiTools
Drop Down Menu.
Keunggulan dari UvumiTools Drop Down Menu terletak pada gerakan drop down
menu yang begitu halus nan eksotis ketika membuka serta menutup menu karena
menggunakan Mootools Javascript FrameWork sehingga akan membuat blog anda
tampil lebih Profesional di banding sebelumnya.Original tutorial dari
UvumiTools Drop Down Menu bisa anda baca pada halaman ini, dan tutorial
yang ada pada halaman ini sedikit berbeda pada tampilan menu yang telah
kang rohman poles agar tampil lebih menarik.
Perlu di ingatkan bahwa desain dari satu template dengan template yang lain
adalah berbeda, oleh karena itu anda dituntut untuk menyesuaian dengan
template yang anda gunakan saat ini dengan cara sedikit memodifikasi pada
file CSS yang di berikan.
Persiapan dalam membuat UvumiTools Drop Down Menu :
Keyword
Keyword yang di maksud disini adalah tulisan yang ingin terlihat dalam menu
navigasi. Sebagai contoh, kang Rohman ingin menggunakan keyword Home, Free
Template, Blog Tutorial, Business Guide, dan lain-lain.
Link
Link yang di maksud disini adalah alamat URL yang diinginkan dibuka saat
pengunjung meng-klik tombol navigasi yang ada. Alamat URL bisa menuju blog
yang lain. Contoh :
http://template-tutorial.com
http://www.blogspottutorial.com
http://www.life4business.com
Alamat URL bisa juga membuka halaman yang ada dalam blog anda sendiri,
misalkan halaman postingan ataupun halaman kategori, Yang masih bingung
tentang cara mengetahui alamat dari URL dalam blg anda sendiri, silahkan
baca artikel tentang Tutorial Membuat Horizontal Navigasi, contoh :
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html
http://kolom-tutorial.blogspot.com/2008/03/free-template-magazine-template-1.html
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html
Perlu di ingat kembali bahwa desain template antara yang satu dengan yang
lain sangatlah berbeda, sehingga sangat besar kemungkinan apa yang kang
Rohman terangkan berbeda dengan template yang anda gunakan. Untuk itu kang
Rohman menyarankan agar anda membuat satu blog percobaan, agar jika terjadi
kesalahan tidak merusak blog utama anda, silahkan pilih template white
minima yang biasa.
Mari kita mulai percobaannya ;
Silahkan login ke blogger dengan ID anda Klik Tata Letak.
Klik tab Edit HTML.
Cari Kode kode ]]></b:skin>
Copy paste kode berikut persis di atas kode ]]></b:skin>
.NavbarMenu {
background:#191B1D
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSL2KACogWQWvqfqOwTZE5ASO7KHOyRyZCp7ea1ZtdHOvGTN8eqekf3zB9v6UM_2qmWXC0Jx8ctHjLwf0DiiegnmKnicm3B6elVWCPnXb8FsOfZ2dSEYfZa0Re9byLkyt6VEiw7ybNKTk/s400/button1.gif)
repeat-x top left;
width: 100%;
height: 37px;
color: #FFFFFF;
margin: 0 auto;
padding: 0;
font: bold 8px Arial, Tahoma, Verdana;
clear:both;
border-left:1px solid #333;
border-right:1px solid #333
}
.NavbarMenuleft {
width: 75%;
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 {
color:#fff;
display:block;
text-transform:capitalize;
margin:0;
padding:11px 10px 8px;
font:normal 12px Georgia, Times New Roman;
text-decoration: none;
}
.nav li a:hover, .nav li a:active {
background:#102427
url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif)
repeat-x top left;
;
color:#FFF;
margin: 0;
text-decoration: none;
}
.nav li li a, .nav li li a:link, .nav li li a:visited {
background:#2C5F24
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSL2KACogWQWvqfqOwTZE5ASO7KHOyRyZCp7ea1ZtdHOvGTN8eqekf3zB9v6UM_2qmWXC0Jx8ctHjLwf0DiiegnmKnicm3B6elVWCPnXb8FsOfZ2dSEYfZa0Re9byLkyt6VEiw7ybNKTk/s400/button1.gif)
repeat-x top left;
width:200px;
color:#fff;
text-transform:capitalize;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font: normal 14px Georgia, Times New Roman;
}
.nav li li a:hover, .nav li li a:active {
background:#102427
url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif)
repeat-x top left;
color:#fff;
}
.nav li {
float:left;
padding:0;
}
.nav li a.enclose, .nav li a.enclose:visited {
border-top:1px solid #000;
}
.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: -1px 0 0 220px;
}
.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;
}
#search {
width: 25%;
font-size: 11px;
float: right;
margin: 0;
padding:0;
}
#searchform {
margin:0;
padding:0;
overflow:hidden;
display:inline;
}
#searchbox {
background:#ddd;
padding:0;
margin:0;
}
#search input {
background:transparent;
color:#fff;
float:left;
font-size:12px;
margin: 7px 0 0 10px;
width: 110px;
padding:3px 7px;
border: 1px solid #fff;
font: normal 10px arial, verdana, Times New Roman;
}
#search .btn {
margin:7px 0 0;
padding:0;
width:auto;
border:0;
}
Copy paste kode berikut persis di atas kode </head>
<script type="text/javascript"
src="http://uvumitools.googlecode.com/files/mootools-for-dropdown.js">
</script>
<script type="text/javascript"
src="http://uvumitools.googlecode.com/files/UvumiDropdown-compressed.js">
</script>
<script type="text/javascript">
var myMenu = new UvumiDropdown("dropdown-menu");
</script>
Sedikit ke bagian bawah, lalu cari kode seperti berikut ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Copy paste code berikut persis di bawah kode yang tadi :
<div class='NavbarMenu'>
<div class='NavbarMenuleft'>
<ul id='dropdown-menu' class='nav'>
<li><a href='http://kolom-tutorial.blogspot.com/'
rel='nofollow'>Home</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/search/label/download%20gratis'
rel='nofollow'>Free Template</a>
<ul>
<li><a href='#' rel='nofollow'>Magazine Template Series</a>
<ul><li><a
href='http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html'>Magazine
Template R.1</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2008/03/free-template-magazine-template-1.html'
rel='nofollow'>Magazine Template 1</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2008/09/free-template-magazine-template-2.html'
rel='nofollow'>Magazine Template 2</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2009/03/free-template-magazine-template-3-hijau.html'
rel='nofollow'>Magazine Template 3</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2009/03/free-template-magazine-template-3-biru.html'
rel='nofollow'>Magazine Template 3.2</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Magazine Template R Series</a>
<ul><li><a
href='http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html'>Magazine
Template R.1</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r12.html'>Magazine
Template R.1.2</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2009/04/magazine-template-r13.html'>Magazine
Template R.1.3</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2009/04/free-magazine-template-r14.html'>Magazine
Template R.1.4</a></li>
<li><a
href='http://kolom-tutorial.blogspot.com/2009/07/free-magazine-template-r15.html'>Magazine
Template R.1.5</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Templates Gallery</a></li>
</ul>
</li>
<li><a href='http://www.blogspottutorial.com/' rel='nofollow'>Blog
Tutorial</a></li>
<li><a href='http://www.life4business.com/' rel='nofollow'>Business
Guide</a></li>
</ul></div>
<div id='search'>
<form action='/search/' id='searchform' method='get'
style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value
== "") {this.value = "Search...";}' onfocus='if (this.value == "Search...")
{this.value = ""}' type='text' value='Search...'/>
<input class='btn' name=''
src='http://lh4.ggpht.com/_pt7i0nbIOCY/ScdxoASk9rI/AAAAAAAABoM/3qt9F1KUH_s/views-24_thumb%5B1%5D.png?imgmax=800'
type='image' value='Go'/>
</form>
</div></div>
Klik tombol SIMPAN TEMPLATE.
Selesai.
Untuk tahap awal mungkin ini sudah selesai, pekerjaan anda selanjutnya
adalah mengganti link-link yang kang Rohman cetak merah dengan link atau
alamat URL milik anda sendiri, serta keyword yang diberi warna hijau perlu
juga diganti sesuai dengan keinginan anda.
Tentunya kang Rohman yakin anda harus melakukan sedikit editing di bagian
kode CSS agar sesuai dengan karakteristik template anda.
Selamat mencoba!
Comments :
Posting Komentar
Silahkan berkomentar untuk perbaikan Blog ini, No Syara.