Ads (728x90)

Latest Post

Kesehatan

Tips


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc1A8DuZOD-XfsVILyz3yZbouaUf1EdaJt-mImDdWklLeVvbuJpZ77DsGZzaj6VdBugsLolgpSNsGhyP0E81oTpIt2Hy68o3zZVoPQmfVfCett4WRgqwd04pnn3cBuy03I8c1E9apiMg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKiOF_a9dpK65oiYmiY3kQwpveBtjVx1TcFMMMak23fa-RWdQyLax-1u71T1tP_hVVj-bWN3SJ3O1fjoerd2NVNBNIf1ibUSJVgPfrc91KZvYJpYMgh19VB6uPkVGL7ViKIEsFsZCet4/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........

Post a Comment