Sebelum saya memakai template farhan simple ini, dulunya saya juga masih menggunakan template yang diberikkan oleh blogspot, tepatnya simple, mungkin karena waktu itu saya masih belum tahu tentang bagaimana cara mengganti template, akan tetapi, seiring dengan berkembangnya pemikiran saya di dalam dunia blogging (gayanya, wkwk), saya pun akhirnya mengetahui cara mengganti template dari pihak ke-3 dan langsung excited sekali, sampai-sampai bisa mengganti template 10x sehari (norak, wkwk).
Nah, untuk menambah pernak-pernik di blog, kali ini Tuliskan.com akan membagikan suatu widget yang nampaknya akan cocok sekali untuk diterapkan di blog anda, karena widget menu navigasi atau navbar yang akan saya berikan kali ini bertema merah kehitam-hitaman dan terlihat cantik nan sederhana. Jadi buat kamu yang lagi kebingungan memilih-milih tampilan menu navigasi, mendingan pakai navbar yang satu ini deh, kasep pisan, haha. Special thanks juga untuk bloggertrix, karena widget ini saya adopsi dari blog tersebut.
Membuat Menu Navigasi (Navbar) Red Simple di Blog
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Klik tanda panah warna hitam disebelah kode yang mirip <b:skin>....</b:skin> (untuk membuka kode css).
5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat dibawah-nya.
/* www.tuliskan.com CSS Red Simple Navigation Bar Start */
#navbar_tuliskancom {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9M3QB8HBfgWtegONp2DwgROVNT3sk22sTwTKTj_fHtmIM_vCiltLyQ5AH-IMXZdf7H_iASlBzIbtan_l4WSHFkyTmslLqgQVYa-POoegWYkliOncIBT7jGwg4IMviA1ffkYs4kBDjRD8/s1600/round_menu.png);
background-repeat:no-repeat;
margin-left:14px;
padding-left:10px;
height:46px;
}
#nav_tuliskancom {
float:left;
height:27px;
margin-bottom:0;
font-size:100%;
width:1000px;
line-height:normal;
margin-top:0
}
#nav_tuliskancom ul {
list-style:none;
margin:0;
padding:0
}
#nav_tuliskancom li {
display:inline;
margin:0;
padding:0
}
#nav_tuliskancom a {
float:left;
padding-right:1px;
font-weight:bold;
text-decoration:none
}
#nav_tuliskancom 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_tuliskancom a:hover span {
color:blue;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezaXsyobW6zBwLIKHNorOoSk1yBL0h_Tsjw-YPmoMYUMxbEFW3K2UAwRbvaGhvnO3X06cz-zyHtQykyff1MrQkJw2-MngeQ-tnSMb1UUipvkMsr7u1xoHDaGdEfTif9T37_akIhqz3hI/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
}
6. Klik "Save/Simpan" Template.
7. Sekarang pergi ke halaman Tata Letak / Layout.
8. Klik Add Gadget.
9. Pilih HTML/JavaScript.
10. Lalu letakkan kode dibawah ini kedalamnya.
<div id="navbar_tuliskancom">
<div id="nav_tuliskancom">
<ul>
<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Pasang Iklan</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Site Map</span></a></li>
<li><a href="#"><span>TV online</span></a></li>
<li><a href="#"><span>Photoshop Online</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul></div></div>
Keterangan:
- Ganti kode yang berwarna merah dengan URL dari masing-masing menu
- Ganti kode yang berwarna biru dengan Judul dari masing-masing URL menu
11. Klik "Save/Simpan" Gadget, dan selesai.
Bagaimana sobat? mudah sekali bukan untuk membuat menu navigasi sederhana di blog kita. Demikian informasi tentang Membuat Menu Navigasi (Navbar) Red Simple di Blog, simak juga ulasan menarik lainya seputar tutorial blog tentang Membuat Widget Social Media Flipboard Style di Blog, semoga bermanfaat, dan selamat mencoba.
Rekomendasi
EmoticonEmoticon