SEO BLOG kali ini akan berbagi tips-trik tentang cara membuat Tab Menu seperti yang ada di bagian sidebar SEO BLOG ini. Membuat Tab Menu ini memiliki fungsi ganda, yaitu selain berfungsi untuk menghemat tempat serta membuat blog/website menjadi lebih sistematis dan teratur, juga memiliki fungsi tambahan memudahkan visitor atau pengunjung blog saat menjelajahi seluruh isi blog/website yang kita miliki.Tab Menu atau Multi Tab ini memiliki bentuk dan warna tampilan yang sama persis dengan Tab Menu atau multi tab yang ada di blog ini. Walau demikian saya akan coba jelaskan lebih detail, dari menambah jumlah menu tab, mengganti warna menu tab baik pada saat aktif ataupun ketika hover, sehingga anda dapat menyesuaikan sendiri dengan tampilan blog anda.
Tutorial ini saya update atas permintaan salah satu sobat blogger yang menginginkan Tab Menu atau multi tab yang sama dengan yang ada di blog ini. Dan untuk anda yang juga menginginkan Tab Menu atau multi tab ini, anda bisa ikuti langkah - langkah dibawah ini :
Seperti biasa ....
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode di bawah ini atau yang mirip dengan kode ini : </head> letakkan script di bawah ini tepat di atasnya.
5. Pada langkah ini saya contohkan tab menu diletakkan pada bagian
sidebar. Silahkan anda cari pada bagian sidebar, pada blog ini kodenya
seperti berikut : <div id='rsidebar-wrapper'>
Catatan :
- Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
- Anda juga bisa meletakkan pada bagian tengah atau bagian "main-wrapper"
6. Letakkan kode HTML dibawah ini setelah kode diatas (dibagian Sidebar)
Catatan :
- Teks warna biru adalah Judul tab menu.
- Untuk membuat judul tab menu, saran saya gunakan kata yg singkat, disesuaikan dgn lebar sidebar blog anda.
- Warna Hijau, Coklat, dan ping pada kode diatas adalah bagian setiap tab menu.
Langkah selanjutnya anda tinggal mengisi tab menu dengan gadget yang anda suka. Langsung saja anda menuju "ELEMEN LAMAN", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja anda buat :
Bila anda ingin mengganti warna tampilan agar sesuai dengan blog anda, berikut bagian - bagian tab menu pada kode CSS (kode pada langkah ke 4) yang perlu di ganti :
<style type='text/css'>.tabberlive{
margin-left:0px;
margin-right:0px;
padding-left:5px;
padding-right:5px;
padding-top:6px;
padding-bottom:5px;
clear:both;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTMzqAXZNYf6axjcZR4DD0Ybxl4n_uT7cwMcghRIeamUkWnY-M3A3EkPT3lzaDI0DevL7k09nK_-R2T419gzHqywS5mewnwTnQ9GufoKOPQNGlO43tJWzKNnJ4qpKZ0rHULEsqP8UWSU/h1600/bg_post.jpg) top left repeat-x;
border:1px solid #DDD;
}
<---------------------------------------------------------->
Warna biru adalah background tab menu menggunakan background gambar, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->
.tabbernav {
list-style:none;
list-style-type:none;
margin-left:0;
padding-left:0px;
padding-top:7px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
list-style-type:none;
width:20%;
margin-right:1px;
margin-bottom:0px;
display:inline;
}
.tabbernav li a {
padding-top:7px;
padding-bottom:7px;
padding-left:6px;
padding-right:6px;
list-style:none;
list-style-type:none;
margin-right:1px;
background:#3e5fa2;
text-decoration:none;
color:#ffffff;
outline:none;
}
<---------------------------------------------------------->
Warna biru adalah background Judul tab menu (#3e5fa2 / biru tua), dan warna hijau adalah warna teks Judul tab menu (#ffffff/ putih). Silahkan anda lihat tab menu yang ada di blog ini.
<---------------------------------------------------------->
.tabbernav li a:hover {
list-style:none;
list-style-type:none;
color:#000;
background:#7290ce url() center left no-repeat;
text-decoration:none;
outline:none;
}
<---------------------------------------------------------->
Warna biru adalah warna background Judul tab menu (#7290ce / biru muda) ketika hover, dan warna hijau adalah warna teks Judul tab menu (#000/hitam)ketika hover. Silahkan anda lihat dan coba arahkan mouse anda pada tiap-tiap judul tab menu yang ada di blog ini.
<---------------------------------------------------------->
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
list-style:none;
list-style-type:none;
background:#fff;
color:#3e5fa2;
outline:none;
padding-bottom:22px;
padding-left:6px;
padding-right:6px;
border-right:2px solid #ddd;
border-left:2px solid #ddd;
border-top:1px solid #ddd;
}
<---------------------------------------------------------->
Warna biru adalah warna background Judul tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna teks Judul tab menu (#3e5fa2/biru tua)ketika aktif. Silahkan anda lihat dan coba Klik pada tiap-tiap judul tab menu yang ada di blog ini.
<---------------------------------------------------------->
.tabberlive .tabbertab {
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding-top:5px;
padding-left:6px;
padding-right:6px;
padding-bottom:5px;
background:#fff;
border:2px solid #ddd;
}
<---------------------------------------------------------->
Warna biru adalah warna background konten tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna border konten tab menu (#ddd/abu-abu).
<---------------------------------------------------------->
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
margin-top:5px;
margin-left:5px;
padding:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTMzqAXZNYf6axjcZR4DD0Ybxl4n_uT7cwMcghRIeamUkWnY-M3A3EkPT3lzaDI0DevL7k09nK_-R2T419gzHqywS5mewnwTnQ9GufoKOPQNGlO43tJWzKNnJ4qpKZ0rHULEsqP8UWSU/h1600/bg_post.jpg) top left repeat-x;
}
<---------------------------------------------------------->
Warna biru adalah background pada widget yang menggunakan tag "ul", contohnya bisa anda lihat pada tab menu "Arsip" yg ada di blog ini. Background "ul" tab ini menggunakan gambar gradasi abu-abu putih, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->
.tabbertab .widget-content ul a:hover{
text-decoration:none;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnuFd0AiIXPBA7f5BnB6SVqc-IqF2Rno38xI9sIRSmZhaUtEaxtIGHWD2qVKkggRiEkDCFJ41KD4EisIRRymwEKmUg7ZvQmvYcJx7Q6Oam_o6RVQffObqqpzkY8UBVOSGYr4VASDaUYOY/h1600/bg_menu.jpg)top repeat-x;
}
<---------------------------------------------------------->
Warna biru adalah background pada widget yang menggunakan tag "ul" ketika hover. Background "ul" hover tab ini menggunakan gambar gradasi abu-abu putih terang, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #fff;
<---------------------------------------------------------->
.tabbertab .widget-content li {
color:#488040;
border-bottom:1px solid #ddd;
margin:0 5px;
padding:5px;
}
</style>
Nah, semuanya telah selesai, mudah - mudahan penjelasan diatas membantu mempermudah anda.
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Sumber inspirasi : http://www.carabuatwebgratis.com/2012/03/cara-buat-tab-menu-atau-multi-tab.html
0 komentar "CARA GAMPANG MEMBUAT TAB MENU DI BLOG", Baca atau Masukkan Komentar
Posting Komentar