Cara Membuat Menu Navigasi About Paling Mudah

Cara  Membuat Menu Navigasi About Paling Mudah

Salah satu persyaratan agar blog anda diakui oleh Google Adsense (GA) dan supaya bisa dipasang iklan adsense yang menghasilkan uang, maka Blog anda harus dipasang  Menu Navigasi Bar atau Menu Navbar seperti : About,Disclaimer, Privacy Policy, TOS, dan Sitemap, bahkan ada juga yang menambahkan Karir, hubungi kami atau Contact Us.

CONTOH Menu Navigasi Bar 

Sebelum menemukan Cara  Membuat Menu Navigasi About Paling Mudah ini, saya sempat googling kebeberapa situs teman-teman blogger yang baik hati dan menemukanlah kode Script untuk membuat Tombol Sederhana, dari blogmuhammad23 DISINI , jujur saja saya kurang mahir dengan Kode-kode HTML, Javascript, dll namun iseng-iseng lalu saya pelajari dan memodifikasinya supaya kode tombol terebut bisa di setting untuk Tombol Navigasi seperti untuk Share ke media social, Menu sebagai pengganti menu Halaman bawaan dari blogspot  yang statis, Tombol Download, dll.

Menu Navigasi yang saya buat ini dapat anda dit ulang dan bebas di pasang dimana saja seperti di Sidebar blog, Header, Footer atau widget lainnya.
Baiklah kita mulai saja Cara Membuat Menu Navigasi About Paling Mudah ini sbb :
1.Copy Kode Script dibawah ini lalu Pastekan di Notepad ,  edit sesuai selera dan kebutuhan blog anda.

<button onclick="window.location=

    'https://hebohhdot.blogspot.com/p/about.html'" style="background-color: black; color: white; font-size: 14px; height: 35px; width: 20%;">About</button>

2. Cara Settingnya adalah sbb :

Perhatikan Kode Script diatas dan kode  yang boleh di edit adalah :

Kode : ‘#’” : 

Tanda atau kode # (tanda pagar) ini adalah alamat URL yang akan di tampilkan, jika Tombol ini di Klik maka akan tampil pada halaman blog , silahkan diganti dengan alamat URL  anda , harap diperhatikan tanda ( ‘ ) dan (  “ )  jangan sampai terhapus, untuk lebih jelasnya lihat contoh  :

(‘#’” ) 

Misalnya diganti menjadi : 

'https://hebohhdot.blogspot.com/p/about.html'"

Untuk setting tampilan warna background, jenis dan ukuran huruf atau text dan  silahkan edit kode script selanjutnya yaitu :

style="background-color: black; color: white; font-size: 14px; height: 35px; width: 20%;"

Keterangan kode script diatas adalah sbb :

Kode : Style=”background-color : black : 

adalah background atau warna tombol dan pada contoh diatas menggunakan warna hitam (black), silahkan diganti tulisan “ Black  “ dengan Warna sesuai selera anda, bisa menggunakan Kode warna HTML atau tulisan seperti  yellow, blue, red (harus bahasa inggris dengan jenis text lowercase atau hurup kecil semua).

Kode : Color:white
ini adalah Warna hurup silahkan anda ganti dengan warna lain, seperti biru, merah, hitam dll atau menggunakan kode warna HTML.

Kode : font-size: 14px; height: 35px; width: 20%;"
Font-size adalah besarnya ukuran hurup dalam bentuk px atau pixel,
Height adalah Tinggi Hurup
Width :20% adalah lebar kotak menu, angka “ 20%” dapat anda ganti dengan nilai Pixel, misalnya 100px,atau 100% untuk halaman full.
Kode <ABOUT>
Ini adalah Nama yang akan tampil pada Menu Navigasi yang sudah di Edit, silahkan ganti sesuai selera anda,

Menambah beberapa Link URL Media Sosial.

Untuk menambahkan kolom Menu Navigasi ini, silahkan anda Copy mulai dari 

<button onclick="window.location=
    'https://hebohhdot.blogspot.com/p/about.html'" style="background-color: black; color: white; font-size: 14px; height: 35px; width: 20%;">About</button>

Tempatkan di akhir Kode Script Menubar yang Pertama setelah kode </button> dan jangan ada SPASI.jika kurang paham lihat contoh Kode Script Menu Navigasi  Bar beberapa Link URL.

<button onclick="window.location=
    ‘#’" style="background-color: black; color: white; font-size: 14px; height: 35px; width: 20%;">About</button>
<button onclick="window.location=
    '#'" style="background-color: yellow; color: white; font-size: 14px; height: 35px; width: 20%;">Disclaimer</button><button onclick="window.location=
    '#'" style="background-color: bred; color: white; font-size: 14px; height: 35px; width: 20%;">Privacy Policy</button><button onclick="window.location=
    '#'" style="background-color: black; color: white; font-size: 14px; height: 35px; width: 20%;">Contact Us</button><button onclick="window.location=
 '#'" style="background-color: black; color: white; font-size: 14px; height: 35px; width: 20%;">Sitemap</button>

Jika anda tidak mau ribet silahkan Copy saja kode di atas dan anda hanya tinggal edit Kode  ini ( # ) saja dengan URL Judul Postingan, atau URL MEdia sosial ( Facebook, Twitter, dll)

Cara Pemasangan Pada Blogspot:

Kode Script Menu Navigasi yang sudah di edit tersebut pastekan pada Widget HTML JAVASCRIPT pada Platform Blog anda dan silahkan di pasang di mana saja sesuai selera dan kebutuhan blog.

Demikian Tutorial tentang  Cara  Membuat Menu Navigasi About Paling Mudah.

Semoga Bermanfaat...!