agung wisudhatama May 04, 2022 Komentar

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

Sebelum saya memosting artikel, perkenankan saya dan keluarga mengucap Minal Aidin Wal Faidzin Mohon Maaf Lahir dan Batin. Lebaran kali ini lebih bermakna, pertama kali setelah 2 tahun berlalu tidak ada acara mudik dikarenakan Covid, maka lebaran kali ini Insyaallah sudah bebas dari virus yang lagi viral menghantui masyarakat kita ini.

Pada postingan kali ini saya akan berbagi tutorial tentang cara membuat menu navigasi blog secara vertikal alias menjuntai dari atas ke bawah bukan menyamping dari kiri ke kanan.

Hal ini dipergunakan untuk blog yang kekurangan ruang untuk menempatkan navigasi. Sehingga dengan bentuk vertikal akan menghemat tempat dan tentu saja menjadi rapi. Karena navigasi akan berbentuk memanjang kebawah.

Baca Juga : 3D Hover Fancy Dropdown Menu dengan Trik CSS

Pada postingan saya sebelumnya saya juga sudah membahas tentang pembuatan navigasi berbentuk animasi yakni pada artikel 3D Hover Fancy Dropdown Menu sebuah navigasi yang hampir mirip dengan navigasi pada postingan kali ini.

Penempatan navigasi yang baik pada sebuah blog atau website akan mempermudah para pengunjung dalam menjelajahinya. Karena dengan navigasi yang jelaslah, maka blog atau website itu dikatakan blog yang bagus. Sehingga orang-orang tidak akan kebingungan dalam mencari artikel. Coba bayangkan bila navigasinya berantakan, orang akan semakin bingung mau klik URL yang mana.

Baca Juga : Menu Button Animasi dengan Trik Kode CSS3

Tentu saja, pada algoritma search engine Google, navigasi yang baik menentukan predikat atau rangking ketika Crawl Robot Search Engine Google merayapi semua artikel dengan navigasi yang terpajang pada blog kita.

Untuk itu kita mulai saja tutorialnya.

Membuat Tab Navigasi URL Blog Vertikal

1. Klik Tema
2. Pilih Sesuaikan : Edit HTML
3. Cari kode ]]></b:skin>
4. Tempelkan kode berikut di atas kode ]]></b:skin> yang sudah ditemukan tadi. Jangan salah tempel lho ya

#alifacodez {
width: 200px;
margin-top: 10px;
}
#alifacodez  li a {
text-decoration: none;
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
}
#alifacodez  li a:link, #alifacodez  li a:visited {
color: #777;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54qidqaKuTNLYI6bukshzHf6YEMzizlWvUpSAXxSHD9C8zOToGM-N3JKA3KB-SIVVFuPBR0AEvuCrgBgSI37E4mLjgxqeo3d3XcPUrLyL8Mem4Mzg9em4wjrwK5cnIM5Lt_T6lsDYyN8/s200/devilz.gif);
padding: 8px 0 0 20px;
}
#alifacodez li a:hover {
color: #257EB7;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54qidqaKuTNLYI6bukshzHf6YEMzizlWvUpSAXxSHD9C8zOToGM-N3JKA3KB-SIVVFuPBR0AEvuCrgBgSI37E4mLjgxqeo3d3XcPUrLyL8Mem4Mzg9em4wjrwK5cnIM5Lt_T6lsDYyN8/s200/devilz.gif) 0 -32px;
padding: 8px 0 0 25px;
}
#alifacodez li a:active {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54qidqaKuTNLYI6bukshzHf6YEMzizlWvUpSAXxSHD9C8zOToGM-N3JKA3KB-SIVVFuPBR0AEvuCrgBgSI37E4mLjgxqeo3d3XcPUrLyL8Mem4Mzg9em4wjrwK5cnIM5Lt_T6lsDYyN8/s200/devilz.gif) 0 -64px;
padding: 8px 0 0 25px;
}
#alifacodez ul {
list-style: none;
margin: 0;
padding: 0;
}

Setelah ditempelkan kode diatas pada template, sekarang waktunya menaruh kode di Tata Letak dan pilih Tambah HTML/Javascript. Ini kodenya

<div id="alifacodez">
  <ul>
    <li><a href="#1" title="Beranda">Alifacode</a></li>
    <li><a href="#2" title="Tentang">Diisi</a></li>
    <li><a href="#3" title="Pelayanan">dengan</a></li>
    <li><a href="#4" title="Support">URL</a></li>
    <li><a href="#5" title="Contact">Artikel</a></li>
    <li><a href="#6" title="Subsribe">Kalian</a></li>
  </ul>
  </div>

Catatan :
Untuk kata Alifacode Diisi dengan URL artikel kalian diiisi dengan nama URL yang kamu tuju sedangkan #1, #2, #3, #4, #5 diisi dengan alamat artikel yang kamu pasang.

Nah sudah jadi khan navigasi vertikalnya. Terima kasih ya yang sudah membaca artikel Membuat Tab Navigasi URL Blog Vertikal . Sekian dan terima kasih. Ketemu lagi lain waktu dengan artikel lainnya. Salam.

Result

Bagikan ke teman-teman kamu

Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Tab Navigasi URL Blog Vertikal . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.