Cara Setting Navigasi Menu Bar Atas di Blogger

Ini merupakan pembahasan yang menyesuaikan Tampilan / Interface Blogger terbaru saat video ini di Upload. 

 

{getToc} $title={Table of Contents}

 

Video setting Menu Atas di Blogger

 

Bagaimana membuat menu bar diatas agar bisa menayangkan / bernavigasi langsung ke kategori tertentu yang udah kita tentukan.

 


 

Sebenarnya, tanpa menu atas pun sudah ada kategori / label yang memudahkan pengunjung untuk memilih kategori apa yang dibutuhkan.

 

Tetapi tetap saja Menu bagian atas itu menjadi pelengkap.

 

Kita bisa buat untuk beberapa link untuk menuju ke halaman khusus atau halaman yang lebih tertata, misalnya untuk panduan blogger pemula.


Atau lebih ke informasi "Produk", Tool, Halaman Website lainnya, atau Panduan yang lebih terurut.



Pada video tersebut dijelaskan ada 2 tipe setting menu atas, sebenarnya 3 sih, tapi untu template blog jaman sekarang / yang baru baru ini... sudah diberikan space atau tempat sendiri di Tata Letak.



Tipe Settingan Menu Atas di Blogger


Tipe 1, Menggunakan Link List

Tipe 2, Menggunakan Edit HTML/Javascript



Penasaran untuk tipe ke 3?

 

Tipe ke 3 sebenarnya kita perlu ngedit sendiri di Editor HTML.

hehe, dimana kalau salah, kadang bikin error.


Tapi memang sudah jarang banget untuk template blogger generasi jaman now.



Bagaimana sih cara settingnya?


Bagi Blogger Pemula, mungkin masih bingung.. bisa play video yang telah kita buat diatas untuk lebih jelasnya.. ^_^, kalo untuk yang udah master.. SKIP aja gpp... hehe, kalo mau silaturahim ya monggoh.. :D



Mode Hemat Quota


Bagi yang kuotanya terbatas, berikut struktur kodenya, biasanya tiap template berbeda beda, tetapi strukturnya hampir sama.



<li><a href="https://www.rahmancyber.net">RahmanCyber</a></li>
 

<li><a href="https://inteenbisnis.rahmancyber.net/search/label/Inspirasi">Inspirasi Bisnis</a></li>


<li class="has-sub"><a href="#">Bisnis Online</a>
  <ul>
    <li><a href="/search/label/Google Adsense">Google Adsense</a></li>
    <li><a href="#">Survei Online</a></li>
    <li><a href="#">Adf Ly</a></li>
  </ul>
</li>


<li><a href="https://inteenbisnis.rahmancyber.net/search/label/Serba%20Serbi%20Bisnis">Serba-Serbi Bisnis</a></li>



class="has-sub" , ini merupakan nama kelas CSS di dalam template, jadi untuk memanggil settingan kode CSS yang telah dibuat dan diatur pembuat template di bagian css

<a href="#">, ini merupakan tag untuk memanggil LINK. biasanya ditutup dengan </a>

<li>, ini merupakan tag list item, untuk mendefinisikan daftar, jadi hitungannya nanti satu baris.

 Defaultnya itu vertikal ya, dari atas ke bawah, tetapi pada menu atas itu udah dibuat horisontal, kanan ke kiri.


https://inteenbisnis.rahmancyber.net/search/label/Serba%20Serbi%20Bisnis , Ini merupakan contoh link untuk pemanggilan label / kategori. Cara dapetinnya, kalian klik pada label yang ada di sidebar biasanya.


/search/label/Google Adsense , ini sama seperti link link diatasnya, cuman kalo pake ini, maka akan lebih fleksibel sesuai dengan url blog / alamat blog, misal https ya pake https, sedangkan http ya pake http, jadi saya rekomendasikan untuk pake ini.

Jadi https://inteenbisnis.rahmancyber.net , dihilangkan aja




Itu untuk yang Tipe 2 yang menggunakan Edit Html di bagian Tata Letak.










Posting Komentar

Untuk posting kode, bisa di parse dulu gan, pake tool parse yang udah disediakan di website ini https://www.rahmancyber.net/p/parse-code.html

agar kodenya tidak hilang... ^_^

Lebih baru Lebih lama

نموذج الاتصال