04 May 2022

Tab Menu Navigasi CSS3 di Header Horizontal

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Tab Menu Navigasi CSS3 di Header Horizontal

Setelah sebelumnya saya memosting artikel tentang navigasi blog bentuk vertikal, sekarang saatnya saya memberikan trik masih seputar navigasi blog yaitu di atas header berbentuk horizontal atau berjejer kesamping.

Sering kita temui navigasi diatas header paling atas sendiri dan disitu tercantum Home, About, Contact, Policy, Disclaimer biasanya item-item tersebut menghiasi atas header untuk mempermudah pengunjung membaca profil blog.

Baca Juga : Membuat Running Text di Atas Header Blog Aktif

Keuntungan menggunakan navigasi model seperti ini adalah kita akan cepat mengklik profil artikel yang akan kita baca. Dan tentu saja halaman atas tidak kosong mlompong serta memperbagus index di search engine, menurut saya seperti itu.

Bila kalian menginginkan cara ini bisa diterapkan di blog kalian, bisa ikuti tutorial dibawah ini. Sehingga dengan menu navigasi yang sudah jelas dan tertata rapi, tentu saja blog kalian sudah selangkah lebih maju menjadi blog yang bisa dibilang valid.

Baca Juga : Navigasi Button Pop Up Corner Berefek Animasi di Kiri Atas Blog

Oke kita mulai saja ya

Tab Menu Navigasi CSS3 di Header Horizontal


1. Tentu saja kalian masuk dulu di Tema
2. Kemudian pilih Sesuaikan : Edit HTML
3. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas persis kode ]]></b:skin> tersebut
.navmenu li {
float:left;
}
.navmenu li a {
float: left;
display: block;
color:#ffffff;
text-decoration: none;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: left;
cursor: pointer;
}
.navmenu li a b {
float: left;
display: block;
padding: 0 8px 0 8px;
}
.navmenu li.current a,
.navmenu li a:hover {
color: #00bfff;
padding: 0 8px 0 8px;
}
.navmenu li.current a b,
.navmenu li a:hover b {
color: #00bfff;
}


Setelah itu ditempel, sekarang kalian cari kode <div id='header-wrapper'>. Terus taruh kode dibawah ini persis diatas kode <div id='header-wrapper'> itu
<ul class='navmenu'>
<li class='current'><a href='URL Blog kalian disini'>Home</a></li>
<li><a href='URL artikel blog kalian'>About</a></li>
<li><a href='URL artikel blog kalian'>Contact</a></li>
<li><a href='URL artikel blog kalian'>Policy</a></li>
<li><a href='URL artikel blog kalian'>Disclaimer</a></li>
<li><a href='URL artikel blog kalian'>Sitemap</a></li>
<li><a href='URL artikel blog kalian'>Term of Service</a></li>
</ul>


Catatan :
Untuk URL artikel blog kalian diisi sesuai dengan nama URL yang termpang misal About = https://blablabla.com/2022/01/About.html. Dan seterusnya diganti yang sesuai ya


Setelah semua dilakukan saatnya save pekerjaan kamu dan lihat blog. Sudah jadi pastinya. Thanks ya yang sudah sudi mampir disini di artikel Tab Menu Navigasi CSS3 di Header Horizontal. Semoga berhasil utak-atik blognya ya. Salam dan sampai jumpa besok lagi. Salam.

Bagikan ke teman-teman kamu
Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tab Menu Navigasi CSS3 di Header Horizontal . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon