Membuat Navbar Menu Di Blogspot


Assalamuallaikum...

Beberapa hari lalu saya bingung bagaimana menaruh link biar gampang di liat di halaman utama codelain menggunakan navigasi menu di bawah header blog ini sobat, ternyata saya mendapatkan solusinya yaitu dengan bantuan mbah google yang saya dapatkan di blog anggaleoputra dan tutorial di sana sangat membantu saya membuat navigasi baru saya seperti di bawah ini :


Memang sih navigasi yang simple tetapi tampilannya unik dan bagus dengan bergaya glosy, untuk menghemat waktu sobat mencobanya silahkan ikuti saja tutorial di bawah ini :

1. Sobat Login dulu ke akun Blogger Sobat,
2. Klik Rancangan > Edit HTML
3. Sobat cari kode berikut ]]></b:skin>
4. Setelah itu masukan Kode CSS di bawah ini tepat di atas kode ]]></b:skin>
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://1.bp.blogspot.com/-pU9036K3xEs/Tk9REC_94QI/AAAAAAAAAHs/-99jF92jghM/s1600/Menu-background-1.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://2.bp.blogspot.com/-rzAcD5El8wg/Tk9RA1WSI6I/AAAAAAAAAHk/_Kz1JYWPBWk/s1600/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://1.bp.blogspot.com/-Whk4GURFMmE/Tk9RCdzSLII/AAAAAAAAAHo/YsSrCWcYM4s/s1600/Menu-kanan.gif) no-repeat right top;
}


5. Kemudia sobat cari lagi kode <div id='content-wrapper'>
6. Selanjutnya letakan kode di bawah ini tepat di bawah  <div id='content-wrapper'>


<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Sobat'><b>Home</b></a></li>
<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
<li><a href='URL-Link-Tujuan6'><b>Judul-Tujuan6</b></a></li>
<li><a href='URL-Link-Tujuan7'><b>Judul-Tujuan7</b></a></li>
<li><a href='URL-Link-Tujuan8'><b>Judul-Tujuan8</b></a></li>
</ul>



*  Tulisan yang berwarna Biru Silahkan sobat ganti dengan URL Tujuan Sobat
    Tulisan yang berwarna Merah Silahkan sobat ganti dengan Judul Tujuan sobat

7. Kemudia Sobat klik Save Template,


Alhamdulillah kerjaan membuat Navbar menu sudah selesai, semoga bermanfaat..




0 Response to "Membuat Navbar Menu Di Blogspot"

Post a Comment