Home » » Cara Membuat Menu Navigasi (Navbar) Red Simple di Blog

Cara Membuat Menu Navigasi (Navbar) Red Simple di Blog

Ditulis oleh Dicky Fajriansyah pada Rabu, 12 Juni 2013 | 04.31


Pada kesempatan kali ini Dicky's akan share lagi Tips Blog yang berjudul Cara Membuat Menu Navigasi (Navbar) Red Simple di Blog | Menu Navigasi yang Dicky's share ini berwarna Merah Kehitam-hitaman, jadi yang mempunyai blog Merah Kehitam-hitaman ayo segera pasang Menu Navigasi (Navbar) ini, dan pastinya akan menghiasi tampilan blog sobat. Oke, langsung saja ini Tips-nya.

Berikut Cara Membuat Menu Navigasi (Navbar) Red Simple di Blog :
  • Login ke Blogger, atau klik disini
  • Pilih Template --> Edit HTML --> Proses (loading dulu)
  • Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* dickyz-blog.blogspot.com/ CSS Red Simple Navigation Bar Start */
#navbar_db {
background-image:url(http://3.bp.blogspot.com/-8pMSbMwRMOI/UbbzldiEJcI/AAAAAAAAHs4/gJmkPrCNUVQ/s1600/round_menu.png);
background-repeat:no-repeat;
margin-left:14px;
padding-left:10px;
height:46px;
}
#nav_db {
float:left;
height:27px;
margin-bottom:0;
font-size:100%;
width:1000px;
line-height:normal;
margin-top:0
}
#nav_db ul {
list-style:none;
margin:0;
padding:0
}
#nav_db li {
display:inline;
margin:0;
padding:0
}
#nav_db a {
float:left;
padding-right:1px;
font-weight:bold;
text-decoration:none
}
#nav_db a span {
display:block;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
height:27px;
color:#FFF;
font-size:100%;
border-left:0 solid #dcdcdc;
margin-right:0;
float:none
}
#nav_db a:hover span {
color:blue;
background-image:url(http://4.bp.blogspot.com/-g7ZTQu-GcRI/UbbzlWBcXqI/AAAAAAAAHs8/J6xeaPZ5CzI/s1600/round_hover.png);
background-color:maroon;
background-repeat:repeat-x;
height:27px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
font-size:100%;
background-position:0 0
}


  • Simpan Template
  • Belum selesai sob, selanjutnya pergi menuju Tata Letak --> Tambahkan Gadget --> Pilih HTML/JavaScript
  • Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript

<div id="navbar_db">
<div id="nav_db">
<ul>
<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About Me</span></a></li>
<li><a href="#"><span>Daftar Isi</span></a></li>
<li><a href="#"><span>Contact Me</span></a></li>
<li><a href="#"><span>Link Exchange</span></a></li>
<li><a href="#"><span>Cek PageRank</span></a></li>
<li><a href="#"><span>TV Online</span></a></li>
<li><a href="#"><span>Kode Warna HTML</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul></div></div>

Keterangan :
- Kode yang berwarna MERAH yaitu URL/Link Menu sobat, ganti dengan URL/Link Menu sobat
- Kode yang berwarna BIRU yaitu Judul Menu Sobat, ganti dengan Judul Menu Sobat


Semoga Tips Blog yang berjudul Cara Membuat Menu Navigasi (Navbar) Red Simple di Blog bisa bermanfaat......
dan selamat mencoba........
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Menu Navigasi (Navbar) Red Simple di Blog
Posted by:Dicky Fajriansyah
Published :2013-06-12T04:31:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Menu Navigasi (Navbar) Red Simple di Blog

0 komentar:

Posting Komentar