25 August 2017

Tab Navigasi di Blogger

Tutorial kali ini adalah Cara Membuat Animasi Tab Navigasi Blog/Web Keren di Blogger.
Tab navigasi web/blog ini fungsinya untuk memudahkan pengunjung situs anda dalam mencari halaman halaman yang ada di blog/website, baik jenis artikel, thumbler, downloader dan lain sebagainya supaya tidak tersesat. Di dalam tab navigasi ini terdapat beberapa link yang nantinya akan mengarahkan pengunjung untuk menemukan apa yang sebenarnya dicari dalam website tersebut termasuk di dalamnya category yang disediakan pemilik website.

oke langsung saja membuat tab navigasinya.

sebenarnya menu navigas ini saya lirik dari blog sebelah, namun ada sedikit modifikasi supaya sesuai dengan tema blog yang saya terapkan di sini. Dalam tutorial ini saya hanya memberi tutorial satu jenis menu Tab Navigasi yang menurut saya paling pas dan keren jika di aplikasikan di blog saya. Jika anda ingin lebih banyak pilihan tampilan tab navigasi, bisa anda kunjungi blog sumber nya di sini


hasil dari tutorial ini sama persis dengan Tab Navigasi yang dipakai di Blog ini. dan ± 98% work di blog agan semua karena sudah saya lakukan beberapa perbaikan bug yang ada.

1. Langkah Pertama

Masuk ke menu Layout - Add a Gadget
Pilih HTML/JavaScript 
masukkan kode script di bawah ini pada kolom gadget tersebut


simpan

2. Langkah Kedua

Geser Widget tepat di bawah Header. Simpan. Selesai. Too Easy!! 

** penjelasan kode
   <li><a href='http://www.informationsystem.ga/' itemprop='url' title='Back to Home Page'><span itemprop='name'>Home</span></a></li>
   <li><a href='#' itemprop='url' title=''><span itemprop='name'>Category</span></a>
      <ul>
         <li><a href='' itemprop='url' title=''><span itemprop='name'>Tutorial</span></a>
            <ul>
               <li><a href='http://www.informationsystem.ga/search/label/Tutorial%20Blogger' itemprop='url' title=''><span itemprop='name'>Blogger</span></a></li>
               <!--li><a href='#' itemprop='url' title=''><span itemprop='name'>Sub Category 2.2</span></a></li-->
            </ul>
         </li>


  • kode warna merah : link halaman
  • kode warna biru : Title Tab (Title akan muncul ketika cursor menunjuk ke tab tersebut)
  • kode warna ungu :  Keterangan Tab
  • kode bergaris bawah : sub Tab
  • kode berwarna hijau : sub-sub Tab (tidak di tampilkan karena masih di dalam tag comment CSS <!--script--> jika ingin menambah sub-sub Tab, tinggal hapus tanda comment tersebut)
#cssmenu{font-family:Montserrat,sans-serif;background:#ffffff}
  • kode warna biru muda : warna background tab navigasi
selamat mencoba!!! Tinggalkan komentar di bawah jika mengalami kendala
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post