1. Guru Blogger ID
Cara Membuat Menu di Blog / Menambahkan Navigasi Menu Blogger

Cara Membuat Menu di Blog / Menambahkan Navigasi Menu Blogger

Dalam artikel kali ini gurublogger akan membahas tentang bagaimana cara membuat menu di blog

Baik untuk template buatan gurublogger maupun template default bawaan blogger.

Navigation menu biasanya terletak di bagian atas sebelah kanan blog di sebelah logo.

Fungsi utama menu ini adalah sebagai tombol navigasi utama Blog

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

cara-membuat-menu-di-blogger


1. Mengedit / Menambahkan Menu GuruBlogger V.1.1.0


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


2. 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 atau template buatan gurublogger.

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)

Gurublogger sendiri lebih menyukai penggunaan menu di navigasi atas tanpa sub menu dan menu lain di bagian sidebar bila dibutuhkan.


3. Cara Membuat Menu di Blog dari nol


Membuat men u di blogger pada dasarnya adalah belajar tentang schema, navigasi, html unordered dan ordered list, serta 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

HTML Code paste 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 !