Pages

Cara Membuat Menu Navigasi Horizontal Di Blog

adminPosted by Noochii dateTuesday, September 20, 2011

Selamat Pagi Sobat..
Sebelum berangkat ke sekolah, saya menyempatkan diri untuk memposting Cara Membuat Menu Navigasi Horizontal Di Blog, pasti semua sudah pada tau apa itu menu navigasi, tak heran, karena sudah banyak yang memposting nya.. :D
tapi ada yang berbeda pada postingan saya disini, yaitu cara pengeditan HTML nya,
Menu ini baru saja saya modifikasi di blog saya.. :D
Dan akhirnya berhasil juga saya edit.. :P


Jika sobat merasa tertarik dengan menu navigasi di atas, silahkan baca sampai dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di dapat bisa berbeda dengan contoh diatas karena faktor desain template yang berbeda-beda, oleh kerena itu ada kemungkinan sobat harus sedikit merubah kode yang saya berikan agar cocok dengan template sobat.

Silahkan sobat ikuti cara dibawah ini

Sebelum nya sobat simpan dulu gambar nya,


Kemudian Simpan Gambar nya ke imagehosting yang biasa sobat gunakan contohnya www.Photobucket.com

Sebenarnya sobat boleh menggunakan 3 gambar diatas, karena saya takut tidak sengaja menghapusnya, jadi sebaiknya sobat menggunakan alamat sobat sendiri. biar lebih aman.. :D

Berikut adalah cara" penginstallan nya

Pertama
Login dulu ke account blogger sobat
Klik menu Design/Rancangan
Kemudian klik tab Edit HTML
Jangan Lupa di centang dahulu Expand Widgetnya
Cari code ]]></b:skin>  Dan pastekan code dibawah ini, Diatas code ]]></b:skin>

/* Menu */
#tabs6 {
float:left;width:100%;
background:url("http://i1231.photobucket.com/albums/ee519/noochii/headermenu.png") no-repeat center top;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
}

#tabs6 ul {
margin:0;padding:10px 10px 0 5px;
list-style:none;
}

#tabs6 li {
display:inline;
margin:0;
padding:0;
}

#tabs6 a {
float:left;
background:url("http://i1231.photobucket.com/albums/ee519/noochii/tableft6.png") no-repeat left top;
margin:0;padding:0 0 0 4px;text-decoration:none;
}

#tabs6 a span {
float:left;display:block;background:url("http://i1231.photobucket.com/albums/ee519/noochii/tabright6.png") no-repeat right top;
padding:5px 15px 4px 6px;
color:#fff;
font-weight:bold;
}

/* Commented backslah Hack hides rule from IE5-Mac \*/

#tabs6 a span {
float:none;
}
/* End IE5-Mac hack */

#tabs6 a:hover span {
color:#C2FB77;
}

#tabs6 a:hover {
background-position:0% -42px;
}

#tabs6 a:hover span {
background-position:100% -42px;
}

#tabs6 #current a {
background-position:0% -42px;
}

#tabs6 #current a span {
background-position:100% -42px;
}


Setelah sudah, cari code <div id='content-wrapper'>
Paste lagi code dibawah ini di bawah code <div id='content-wrapper'>


<div id='tabs6'>
<ul>

<!-- Silahkan ganti tanda pagar (#) dengan link milik anda -->

<li id='current'><a href='/' title='Home'><span>Home</span></a></li>
<li><a href='http://www.facebook.com/noochii' target='_blank' title='About Me'><span>About Me</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' target='_blank' title='Edit'><span>Edit</span></a></li>
</ul>
</div><!-- #tabs6 end -->

Setelah sudah semuanya, save template sobat..
akhirnya selesai juga postingan nya, huh
waktunya mandi dan siap-siap untuk berangkat sekolah.. :)
Jika sobat merasa artikel Cara Membuat Menu Navigasi Horizontal Di Blog ini bermanfaat, silahkan Copas artikel ini, tetapi jangan lupa untuk mencantumkan link sumbernya seperti ini : Source:http://noochii-exp.blogspot.com/2011/09/cara-membuat-menu-navigasi-horizontal.html.Saya lebih berterimakasih lagi jika sobat mau mencantumkan link hidup seperti ini : Source: http://noochii-exp.blogspot.com/2011/09/cara-membuat-menu-navigasi-horizontal.html.Mohon dimengerti agar maraknya copas tanpa link sumber mereda, terima kasih.

6 comments

Zh!nTho said...

Yoi Yoi Keren Blognya

Error Shinobi said...

modelnya kayaknya kere nih..
kapan'' ta coba dhe' .... :)

Noochii said...

@Zintho : Terima kasih sob.. :)
@Shinobi : Kere apa keren gan ?? :)) okee silahkan dicoba kapan" gan. blog saya ngga kemana" kok.. :))
Jangan kapok ya main kesini.. :))

nightcrawler said...

hahahaha keren tuh pastinya...aku always main kesini kalo pulang sekolah

sherlina halim said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : asianbet77@yahoo.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

sherlina halim said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : asianbet77@yahoo.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment