satu lagi...
"Bagaimana cara membuat horizontal dan vertikal navigasi menu di blogspot?". inilah cara membuat Navigasi Menu
_____________________________________________________________
Inysa Allah saya dapat membantu. setelah membaca email dari anda ada beberapa hal yang ingin saya sampaikan :
Di bawah ini adalah langkah-langkah yang benar silakan di ikuti.
Langsung Aja yuk kita praktik kang fatur bagaimana cara membuat Horizontal Menu Blog :
1. Cari Kode kode ]]></b:skin>
2. Copy paste kode berikut simpan persis di atas kode ]]></b:skin>
3. Tuju bagian bawah, lalu cari 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>
4. Copy paste code berikut persis di bawah kode yang tadi :
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='ask-uang.blogspot.com/'>home</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://alamat-url-anda.blogspot.com.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
</div>
</div><!-- akhir bg_nav -->
5. Klik tombol SIMPAN TEMPLATE.
6. Selesai.
* Gantilah tulisan yang berwarna merah sesuai alamat blog yang anda inginkan.
Catatan :
Navbar yang saya buat sudah saya modifikasi sehingga memiliki fungsi dropdown menu. Jika anda ingin menghilangkan fungsi dropdownnya hapus saja <ul> dan </ul></li> contoh :
Untuk sementara percobaan ini sudah selesai, namun tentunya jika kamu menerapkan pada template kamu, ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :
/* navbar
================== */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
kamu juga harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template kamu. misal : width:990px.
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
Catatan : Untuk Membuat Vertikal Menu Navigasi :
Tambahkan kode dibawah ini sesudah kode <style type="text/css"> dan sebelum kode </style>, tempatnya di mana saja asalkan di antara kode tadi.
.ask-uang{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i811.photobucket.com/albums/zz36ask-uang/menu.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}
.ask-uang:hover{ background:#97A4B9 url(http://i811.photobucket.com/albums/zz36/ask-uang/menu.gif) top right no-repeat;
text-decoration:none;
}
Catatan : kedua alamat url photobucket di atas adalah bentuk dari tombol navigasi yang saya buat, kamu bisa mengubahnya sendiri.
1. yang pertama adalah tampilan button dasar dari navigasi. terlihat saat mouse tidak di arahkan kesana
2. adalah tampilan button 2 terlihat saat mouse di arahkan menyentuh tombol navigasi, sehingga bisa berubah warna dan da bentuk. (tergantug kita membutnya)
3. jika di samakan seperti contoh di atas navigasi tersebut tidak akan berubah warna.
Setelah selesai Simpan Tamplate
Langkah berikutnya adalah.
1. Pilih Tata Letak
2. Tambahkah Widget/Gedget Baru
3. Pilih HTML / Javascript
4. Silakan Copy kode Di bawah ini dan Pastekan Widget baru tadi kamu pilih !
Yang inipun sama, kamu harus mengubahnya sesuai dengan nilai yang pas untuk template kamu
<a class="ask-uang" alamatBlogAnda.blogspot.com">Menu</a><span class="hide"> | </span>
<a class="ask-uang" alamatBlogAnda.blogspot.com">Bisnis Online</a><span class="hide"> | </span>
<a class="ask-uang" alamatBlogAnda.blogspot.com">Tukar Link</a><span class="hide"> | </span>
<a class="ask-uang" alamatBlogAnda.blogspot.com">Tips Anda Trick</a><span class="hide"> | </span>
<a class="ask-uang" href="alamatBlogAnda.blogspot.com">Nama Menu Anda</a><span class="hide"> | </span>
Setelah itu Simpan dan lihat hasilnya. sekarang anda sudah memiliki navigasi horizontal Menu
Semoga dapat membantu anda ^_^
"Bagaimana cara membuat horizontal dan vertikal navigasi menu di blogspot?". inilah cara membuat Navigasi Menu
_____________________________________________________________
Inysa Allah saya dapat membantu. setelah membaca email dari anda ada beberapa hal yang ingin saya sampaikan :
Di bawah ini adalah langkah-langkah yang benar silakan di ikuti.
Langsung Aja yuk kita praktik kang fatur bagaimana cara membuat Horizontal Menu Blog :
1. Cari Kode kode ]]></b:skin>
2. Copy paste kode berikut simpan persis di atas kode ]]></b:skin>
3. Tuju bagian bawah, lalu cari 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>
4. Copy paste code berikut persis di bawah kode yang tadi :
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='ask-uang.blogspot.com/'>home</a></li>
<li><a href='#'>Info Serba-Serbi</a></li>
<ul>
<li><a href='Namaanda.blogspot.com'>Serba-serbi</a></li>
<li><a href='http://Namaanda.blogspot.com/'>lifestyle</a></li>
<li><a href='http://Namaanda.blogspot.com/'>Other</a></li>
</ul>
</li>
<li><a href='#'>Internet</a></li>
<ul>
<li><a href='ask-uang.blogspot.com/search/lebel/internet'>Jaringan</a></li>
<li><a href='http://ask-uang.blogspot.com/search/lebel/seo/'>Tips SEO Backlink </a></li>
<li><a href='http://ask-uang.blogspot.com/search/lebel/tips blog/'>Tips and Trick </a></li>
<li><a href='http://ask-uang.blogspot.com/seacrh/lebel/make money/'>Bisnis Online </a></li>
</ul>
</li>
<li><a href='#'>Teknologi Informasi </a></li>
<ul>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
</li>
<li><a href='#'>Belajar Ilmu Komputer</a></li>
<ul>
<li><a href='portal-komputer.blogspot.com/'>Belajar Komputer</a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='http://ask-uang.blogspot.com/search/lebel/anti virus/'>Anti Virus </a></li>
</ul>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://alamat-url-anda.blogspot.com.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
</div>
</div><!-- akhir bg_nav -->
5. Klik tombol SIMPAN TEMPLATE.
6. Selesai.
* Gantilah tulisan yang berwarna merah sesuai alamat blog yang anda inginkan.
Catatan :
Navbar yang saya buat sudah saya modifikasi sehingga memiliki fungsi dropdown menu. Jika anda ingin menghilangkan fungsi dropdownnya hapus saja <ul> dan </ul></li> contoh :
<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>
<ul> <= hapus
<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>
<li><a href='alamat-url-anda.blogspot.com’>Multimedia'></a></li>
</ul> <= hapus
</li> <= hapus
*Hapuslah Kode Yang telah saya beri tanda Merah hapus untuk menghilangkan fungsi dropdown menu!
Sehingga hasilnya akan menjadi seperti di bawah ini :
<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>
<li><a href='#’>Multimedia'></a></li>
Untuk sementara percobaan ini sudah selesai, namun tentunya jika kamu menerapkan pada template kamu, ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :
/* navbar
================== */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
kamu juga harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template kamu. misal : width:990px.
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
Catatan : Untuk Membuat Vertikal Menu Navigasi :
Tambahkan kode dibawah ini sesudah kode <style type="text/css"> dan sebelum kode </style>, tempatnya di mana saja asalkan di antara kode tadi.
.ask-uang{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i811.photobucket.com/albums/zz36ask-uang/menu.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}
.ask-uang:hover{ background:#97A4B9 url(http://i811.photobucket.com/albums/zz36/ask-uang/menu.gif) top right no-repeat;
text-decoration:none;
}
Catatan : kedua alamat url photobucket di atas adalah bentuk dari tombol navigasi yang saya buat, kamu bisa mengubahnya sendiri.
1. yang pertama adalah tampilan button dasar dari navigasi. terlihat saat mouse tidak di arahkan kesana
2. adalah tampilan button 2 terlihat saat mouse di arahkan menyentuh tombol navigasi, sehingga bisa berubah warna dan da bentuk. (tergantug kita membutnya)
3. jika di samakan seperti contoh di atas navigasi tersebut tidak akan berubah warna.
Setelah selesai Simpan Tamplate
Langkah berikutnya adalah.
1. Pilih Tata Letak
2. Tambahkah Widget/Gedget Baru
3. Pilih HTML / Javascript
4. Silakan Copy kode Di bawah ini dan Pastekan Widget baru tadi kamu pilih !
Yang inipun sama, kamu harus mengubahnya sesuai dengan nilai yang pas untuk template kamu
<a class="ask-uang" alamatBlogAnda.blogspot.com">Menu</a><span class="hide"> | </span>
<a class="ask-uang" alamatBlogAnda.blogspot.com">Bisnis Online</a><span class="hide"> | </span>
<a class="ask-uang" alamatBlogAnda.blogspot.com">Tukar Link</a><span class="hide"> | </span>
<a class="ask-uang" alamatBlogAnda.blogspot.com">Tips Anda Trick</a><span class="hide"> | </span>
<a class="ask-uang" href="alamatBlogAnda.blogspot.com">Nama Menu Anda</a><span class="hide"> | </span>
Setelah itu Simpan dan lihat hasilnya. sekarang anda sudah memiliki navigasi horizontal Menu
Semoga dapat membantu anda ^_^
:)happy 
:(sad
;)winking
;;)batting eyelashes
>:D<big hug
:-/confused
:xlove struck
:">blushing
:Ptongue
:-*kiss
=((broken heart
:-Osurprise
X(angry
:>smug
B-)cool
:-Sworried
#:-Swhew!
>:)devil
:((crying
:straight face
/:)raised eyebrow
O:-)angel
:-Bnerd
=;talk to the hand
:o3puppy dog eyes - New!
:-??I don't know
:@)pig
3:-Ocow
:()monkey
~:>chicken
@};-rose
%%-good luck
**==flag
(~~)pumpkin
~O)coffee
*-:)idea
8-Xskull
=:)bug
>-)alien
:-Lfrustrated
[-O<praying
$-)money eyes
:-"whistling
b-(feeling beat up
:)>-peace sign
[-Xshame on you
\:D/dancing
>:/bring it on
;))hee hee
:-@chatterbox
^:)^not worthy
:-joh go on
(*)star
o->hiro
o=>billy
o-+april
(%)yin yang
