CARA MEMBUAT MENU NAVIGATION BAR SEDERNA
Cara Membuat
Menu Navigation Bar Sederhana Seperti Blog Saya - Sesuai dengan janji saya,
saya akan membuatkan postingan tentang cara membuat navigation menu. Navigation
Menu atau Menu Navigasi ini adalah sebuah tab yang berisikan link atau bahasa
kerennya Shortcut ini berfungsi sebagai penunjuk arah tentang apa saja yang
blog anda promosikan atau sebaliknya. Biasanya ini digunakan dan ditaruh di
header blog atau dimana saja. Screenshotnya bisa dilihat dibawah :
Pengen ?
Liat cara dibawah :
1. Login ke
blogger
2. Masuk ke
Rancangan >> Edit HTML
3. Cari kode
]]></b:skin> lalu paste-kan kode berikut diatasnya
/* Menu Navigasi Sederhana Blog Gunk - D
Starts */
a.burastabs,
a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px;
background:#444444; border:1px solid #ebebeb; margin-top:2px;
text-align:center; text-decoration:none; font-family:arial, sans-serif;
font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px;
overflow:hidden; float:left;}
a.burastabs:hover
{color:#FFFFFF; background:#666666;}
#burasbar
{width:auto; margin:0 auto;}
/* Menu
Navigasi Sederhana Ends */
4. Save
Setelah Itu
5. Lalu
masuk ke Elemen Laman >> Tambah Gadget >> HTML Javascript
6. Paste-kan
kode script berikut
<!-- Menu Navigasi Sederhana
http://gunkdephoenix.blogspot.com Starts -->
<div
id='burasbar'>
<a
class='burastabs' href='#'>Home</a>
<a
class='burastabs' href='#'>About</a>
<a
class='burastabs' href='#'>Tutorial</a>
<a
class='burastabs' href='#'>Widget</a>
<a
class='burastabs' href='#'>Mobile</a>
<a
class='burastabs' href='#'>Facebook</a>
<a
class='burastabs' href='#'>Twitter</a>
<a
class='burastabs' href='#'>Advertise</a>
</div>
<!-- Menu
Navigasi Sederhana Ends -->
7. Jika
semua sudah OK, Tinggal Di Save
Nb :
Jika
kesulitan ingin menempatkan navbar ini, ganti saja Script Navbar Sobat yang
dulu dan paste-kan kode Script yang tadi
Ini adalah
kode yang sebelumnya ada pada Navbar saya :
<!-- only display title if it's non-empty
-->
<b:if cond='data:title !=
""'>
<h2
class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div
class='menuhorisontal'>
<ul>
<li><a
href='#'><img alt='home' border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLN24-vHDjEQFjMpuOHxAdAHKr3GAsqDqi1olye103ZM6D16vR5eOHWcoW5EMmKmrjX2KpCG8vV3EhSJC-MiPfxFE2_xTs8inBQ5vDXEMQYoXjaA12rVhbHnwMYmj5BR5qZbPZFIA3dAW6/s200/icon-home.png'
style='padding:0px;'/></a></li>
<li><a
href='#'>Ukiran Gembol Jati</a></li>
<li><a
href='#'>Buah Naga</a></li>
<li><a
href='#'>Blogging</a></li>
<li><a
href='#'>Pro Blogger Template</a></li>
<li><a
href='#'>UkiranJati.com</a></li>
<li><a
href='#'>RSS Post</a></li>
<li><a
href='#'>RSS Comment</a></li>
</ul>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper'
style='text-align:center'>
<b:section class='crosscol'
id='crosscol' showaddelement='no'/>
</div>
Kode yang
berwarna merah saya ganti dengan kode script yang tadi
Selamat
Mencobanya ,Semoga Berhasil
Sumber
:http://gunkdephoenix.blogspot.com/2012/05/cara-membuat-menu-navigasi-bar.html
0 komentar:
Posting Komentar