Cara Membuat Menu di Blog / Menambahkan Navigasi Menu Blogger

Cara Membuat Menu di Blog / Menambahkan Navigasi Menu Blogger

Membuat Mmenu di blog - Navigation menu biasanya terletak di bagian atas sebelah kanan blog di sebelah logo

Fungsinya adalah sebagai tombol navigasi utama Blog

Sedangkan navigasi pelengkap biasanya diletakkan di bagian sidebar (sisi sebelah kanan dan kiri)

cara-membuat-menu-di-blogger

Mengedit / Menambahkan Menu

Bila teman teman menggunakan template buatan gurublogger, maka untuk menambahkan menu di blog caranya adalah:

cara-membuat-menu-di-blogspot
  1. Login ke blogger kemudian pilih menu theme
  2. Klik 3 titik di sebelah My Theme
  3. Selanjutnya akan keluar pop up menu dan pilih Edit HTML
cara-membuat-menu-blog
  1. Kita akan dibawa ke template editor, selanjutnya gunakan tombol ctrl + F di keyboard untuk mencari Menu1, kemudian tekan enter
  2. Selanjutnya kita akan dibawa ke script html yang bertanggung jawab atas menu, ganti menu1 - menu 6 sesuai keinginan.
  3. #1 - #6 adalah link, masukkan juga link atas menu menu yang telah dibuat,
  4. selesai

Cara Membuat Sub Menu di Blog

Setelah membuat menu, biasanya pemilik blog juga menyediakan submenu dalam navigasi.

Berikut ini adalah ilustrasi tentang bagaimana cara membuat submenu :

cara-membuat-submenu-di-blog

Umumnya menu dibuat menggunakan list (unordered list maupun ordered list)

Untuk membuat sub menu, kita harus memasukkan list ke dalam sebuah list

Perhatikan opening tag dan closing tag dari li

submenu harus dibuat didalamnya sehingga menjadi seperti ini :

cara-membuat-navigasi-submenu-di-blogger

Pada akhirnya submenu1, submenu2, dan submenu3 akan menjadi submenu dari menu6.

Berikut ini adalah kode submenu yang sudah jadi dan teman teman bisa langsung copy paste kan sebelum closing tag </li>

<ul >
       <li><a href='#1'>SubMenu1</a></li>
       <li><a href='#2'>SubMenu2</a></li>
       <li><a href='#3'>SubMenu3</a></li>
</ul>

Gurublogger sendiri tidak mengaplikasikan penggunaan submenu didalam blog

Kenapa?

Karena pada dasarnya penggunaan sub menu tidak efektif

sesuatu yang tidak terlihat secara kasat mata kurang diperhatikan oleh pengunjung blog (harus di klik baru keluar menunya)

Guru blogger sendiri lebih menyukai penggunaan menu di navigasi atas tanpa sub menu

Cara Membuat Menu di Blog dari nol

Membuat menu di blogger pada dasarnya adalah belajar tentang banyak hal diantaranya adalah

schema, navigasi, kode html berupa unordered dan ordered list, dan juga link.

Dan tentu saja jangan lupakan visitor workflow serta transisi ketika dilihat menggunakan mobile device (hp).

Topik ini akan terdengar membosankan dan sangat ribet, cara paling mudah memang langsung saja dengan menginstall template gratis buatan gurublogger, atau copy kode dibawah ini kedalam template yang digunakan

Paste kode html setelah kode </header>

<!-- Start Nav -->
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<input class='menu-btn' id='menu-btn' type='checkbox'/>
<label class='menu-icon' for='menu-btn'><span class='nav-icon'/></label>

<ul class='menu'>
  <li><a class='oranye' href='#1'>Menu1</a></li>
  <li><a href='#2'>Menu2</a></li>
  <li><a href='#3'>Menu3</a></li>
  <li><a href='#4'>Menu4</a></li>
  <li><a href='#5'>Menu5</a></li>
  <li><a href='#6'>Menu6</a></li>
</ul>
</nav>
<!-- End Nav -->

CSS Code, Paste dibawah kode ]]></b:skin>

<style>
#navigation {
float: right;
background-color: #1d2b35;
overflow: hidden;
box-shadow: 0px 0px 7px 0px rgba(54, 57, 73, 0.32);
width: 100%;
max-width: 70%;
z-index: 3;
margin: 5px;
}

#navigation li a:hover {
color: #fe741c;
}

.oranye {
color:#fe741c!important;
}

.oranye:hover {
color:#00d07e!important;
}

/* menu */

#navigation ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #1d2b35;
}

#navigation li a {
display: block;
padding: 15px 15px;
color: #ffffff;
text-decoration: none;
}

#navigation .menu-btn:hover {
background-color: #f4f4f4;
}

#navigation li a:hover,
#navigation .menu-btn:hover {
background-color: #1d2b35;
}

/* navigation menu */
#navigation .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}

/* menu icon */
#navigation .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}

#navigation .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 30px;
}

/* menu btn */
#navigation .menu-btn {
display: none;
}

#navigation .menu-btn:checked ~ .menu {
max-height: 300px;
}

#navigation .menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}

#navigation .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}

#navigation .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}

/* Responsive 970 */
@media (max-width: 970px) {

#navigation {
margin: 0px;
min-width: 100%!important;
background-color: #1d2b35;
}

#navigation .menu-icon .nav-icon {
background-color: #ffffff;
}

#navigation .menu-icon .nav-icon:before, #navigation .menu-icon .nav-icon:after {
background: #ffffff;
}

#navigation li a {
padding: 10px;
}

#navigation {
text-align: center;
}
}

@media (min-width: 970px) {
#navigation li {
float: left;
}

#navigation .menu {
clear: none;
float: right;
max-height: none;
}

#navigation .menu-icon {
display: none;
}
}

/* Responsive 710 */
@media (max-width: 710px) {
#navigation .menu-icon {
padding-right: 10px;
}
}

#navigation .menu-icon .nav-icon:before,
#navigation .menu-icon .nav-icon:after {
content: &#39;
&#39;;
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}

#navigation .menu-icon .nav-icon:before {
top: 8px;
}


#navigation .menu-icon .nav-icon:after {
top: -8px;
}
</style>

Save template kemudian lihat hasilnya.

Komentar
Silahkan, saya ga nggigit !
  1. bang, saya blogger pemula, saya bingung di masukan link menunya, gimana cara buat Link menunya?

    BalasHapus
    Balasan
    1. Sudah lengkap langkah langkahnya di sub judul : Mengedit / Menambahkan Menu

      Ada di paragraf ke empat om.

      Ga papa dicoba coba aja, kalau rusak tinggal copas lagi template hasil downloadan sebelumnya...nanti balik seperti semula

      Semangat !!

      Hapus