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)
Mengedit / Menambahkan Menu
Bila teman teman menggunakan template buatan gurublogger, maka untuk menambahkan menu di blog caranya adalah:
- Login ke blogger kemudian pilih menu theme
- Klik 3 titik di sebelah My Theme
- Selanjutnya akan keluar pop up menu dan pilih Edit HTML
- Kita akan dibawa ke template editor, selanjutnya gunakan tombol ctrl + F di keyboard untuk mencari Menu1, kemudian tekan enter
- Selanjutnya kita akan dibawa ke script html yang bertanggung jawab atas menu, ganti menu1 - menu 6 sesuai keinginan.
- #1 - #6 adalah link, masukkan juga link atas menu menu yang telah dibuat,
- 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 :
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 :
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>
<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>
<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>
#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: '
';
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.
bang, saya blogger pemula, saya bingung di masukan link menunya, gimana cara buat Link menunya?
BalasHapusSudah lengkap langkah langkahnya di sub judul : Mengedit / Menambahkan Menu
HapusAda di paragraf ke empat om.
Ga papa dicoba coba aja, kalau rusak tinggal copas lagi template hasil downloadan sebelumnya...nanti balik seperti semula
Semangat !!