Ini cukup mudah dan simple jika sobat mengikuti step step saya berikut ini. Tab menu juga berguna sebagai navigasi pengunjung untuk mendapatkan informasi yang sesuai dengan menu yang diklik. Ini juga penting untuk teknik SEO.
Saya tidak perlu basa basi lagi karena sobat pasti sudah tau tentang menu blog. Sekarang cara membuatnya.
1) Pertama, pergi ke bagian tata letak (layout), lalu pilih add a gadget.
2) Kemudian pilih html/javascript link.
3) Paste kan kode ini didalam konten yang telah disediakan, lalu klik save
<ul id="menu_bar">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 0</a></li>
<li>
Menu 1
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 3</a></li>
</ul>
</li>
<li>
Menu 2
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
4) Selanjutnya kembali ke blogger lalu pilih tema(themes), kemudian pilih sesuaikan (costumise).
5) Pilih lanjutan, dan klik add css
6) Masukkan kode ini kedalam kolom css yang sudah disediakan.
.tabs-inner .widget ul#menu_bar {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
.tabs-inner .widget ul#menu_bar li {
font-size: 12px/18px;
font-family: sans-serif; /* Font for the menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* background colour of the main menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.tabs-inner .widget ul#menu_bar li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#menu_bar li:hover {
background: #555; /* background colour when you roll over a menu title */
color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#menu_bar li:hover a {
background: transparent;
color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#menu_bar li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#menu_bar li ul li {
background: #555; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
text-shadow: 0 -1px 0 #000;
}
ul#menu_bar li ul li a{
color:#fff /* link colour of the sub menu items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#menu_bar li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
7) Kemudian terapkan. dan menu tab sobat sudah jadi.
Catatan: ganti # yang warna merah dengan url blog yang sobat tujukan. Sobat juga bisa mengganti kata menu dengan kata yang sobat inginkan seperti tutorial, blogging, manga, dll.
Sekarang menu blog sobat sudah jadi. Semoga dengan adanya menu blog ini maka blog sobat dapat ramai pengunjung. Share kepada teman yang membutuhkan.
"Ada tantangan yang harus dihadapi. Ada perjuangan yang harus dimenangkan. Itulah hidup" #mudahberbagi
