Membuat tab menu dropdown di blog
merupakan lanjutan untuk melengkapi tutorial panduan dan cara membuat
blog pada blog Super-Bee ini. Namun berbeda dengan tab menu dropdown
yang sering kita lihat dari kebanyakan blogger yang menggunakan tab menu
dropdown yang nantinya akan saya jelaskan. Saya menamakan
tab menu dropdown
ini adalah tab menu mega dropdown, karena dengan style yang berbeda
serta keunikan dan memiliki multi tab menu yang dapat kita gunakan dan
manfaatkan.
Sebelum kita memasuki cara membuat menu dropdown, perlu saya sampaikan bahwa ketika kita sudah membuat
tab menu mega dropdown
ini, ada sedikit perbedaan pada halam dasbor blog yang kita miliki.
Akan tetapi perubahan ini tidak berpengaruh pada konten serta postingan
artikel didalam blog Anda. Hal ini dikarenakan setiap masing-masing
template memiliki
struktur dan bagian template blog
yang berbeda. Saya sudah menguji coba tab menu mega dropdown ini pada
beberapa template blog yang memiliki struktur berbeda, dan hasilnya
befungsi 100 persen. Bentuk menu mega dropdown ini dapat Anda lihat
seperti screnshot dibawah ini
Saya yakin sekali setelah Anda melihat demo tab menu dropdown ini, Anda
tertarik untuk mengaplikasikannya kedalam blog yang anda miliki. Jika
demikian saya akan memandu anda untuk membuat tab menu dropdown ini,
seperti tutorial yang dapat anda baca dibawah ini.
1. Login ke account blogger Anda
2. Untuk dasbor blogger baru
Klik template > Edit HTML > Klik Lanjutkan > Beri ceklis/centang pada kotak kecil Expan template widget
Untuk dasbor blogger lama
Klik rancangan > Edit HTML > Beri ceklis/centang pada kotak kecil Expand template widget
Sebelum kita muali untuk menambah kode tab menu dropdown ini saya sangat
menganjurkan kepada Anda untuk mendownload lengkap template Anda dulu.
Hal ini dilakukan untuk membeckup template lama dan berjaga-jaga jika
nanti terjadi kesalahan. Untuk dasbor blogger baru tombol untuk
mendownload template ada pada opsi Cadangkan/Pulihkan yang berada pada
kiri atas dasbor blog Anda. Jika sudah saya Akan melanjutkan tutorial
berikutnya.
3. Cari kode ]]></b:skin> (gunakan ctrl + f atau F3 untuk mempermudah pencarian)
4. Jika sudah dapat masukkan kode berikut ini tepat diatas ]]></b:skin>
/* Menu Live
----------------------------------------------- */
#Live ul, li{
padding: 0px;
margin: 0px;
}
#Live ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
#Live .dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
#Live .dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
#Live .dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
#Live .dropmenu li a:hover span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
#Live .dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul li{
border: 0;
float: none;
}
#Live .dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-transform: none;
}
.dropmenu a.selected, .dropmenu a:hover{
color: #0657AD !important;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live a.selected span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
#Live .dropmenu div ul{
position: relative;
display: block;
}
#Live .dropmenu li div{
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
#Live .dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
#Live .dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
#Live .dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
#Live .dropmenu li div div a{
display: inline;
border: none;
color: #0657AD;
padding: 0px;
margin: 0px;
text-transform: none; /*
text-decoration: underline; */
}
#Live .dropmenu li div div a:hover{
color: #F67A00;
text-decoration: none;
border-bottom: 1px dashed #000;
}
#Live ul.left{
float: left;
width: 145px;
}
#Live ul.right{
float: right;
width: 145px;
}
#Live .small{
color: #666;
font-size: 11px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
#Live .products{
width: 300px;
padding: 15px !important;
}
#Live .products ul{
width: 100%;
}
#Live .products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
#Live .products img{
float: left;
padding-right: 10px;
}
#Live .products ul li a{
display: inline;
border: none;
color: #666;
padding: 0px;
margin: 0px;
text-transform: none; /*
text-decoration: underline; */
}
#Live .products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
border-bottom: 1px dashed #000;
}
#Live .tutorials{
width: 300px;
}
#Live .profile{
width: 300px;
padding: 15px !important;
}
#Live .profile ul{
width: 100%;
}
#Live .profile ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .profile h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .profile p{
color: #666;
font-size: 10px;
padding: 0px;
margin-left: 120px;
}
#Live .profile img{
float: left;
padding-right: 10px;
border: 1px solid rgb(226, 226, 226);
width: 100px;
height: 100px;
padding: 5px;
margin-top: 17px;
margin-right: 10px;
}
#Live .profile a:hover {
background:none;
}
#Live .login{
padding: 15px !important;
width: 180px;
}
#Live input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
#Live label{
padding: 0px 0px 4px 0px;
display:block;
}
#Live button{
background: #4A779D url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}
Rekomendasi : Agar ukuran kode CSS menjadi lebih kecil, saya merekomendasikan dan menyarankan kepada Anda untuk
mengkompres kode css diatas. Hal ini dilakukan untuk menghindari lambatnya loading blog yang anda miliki. Anda dapat menguunakan
CSS compressor tool yang telah saya sediakan dan sangat mudah dalam penggunaannya.
5. Kemudian Anda lanjutkan dengan mencari kode </head> jika sudah dapat, masukkan kode berikut ini tepat diatasnya
<!-- Live Menu by Super-Bee -->
<script src='http://reog.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/dropmenu.js' type='text/javascript'/>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu();
});
</script>
6. Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian
<body> atau jika template masih setandar letakkan pada bagian
<div id='outer-wrapper'> namun ada beberapa template yang memiliki
struktur kode yang berbeda seperti
template blogger standar pada demo, saya meletakkan kode berikut ini dibawah tag penutup </header> (masing-masing template berbeda).
<div id='Live'>
<ul class='dropmenu' id='nav-one'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Forum</a>
<ul>
<li><a href='#'>Support</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Examples</a></li>
<li><a href='#'>Your work</a></li>
</ul>
</li>
<li>
<a href='#item3'>Downloads</a>
<ul>
<li><a href='#'>Tools</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Custom projects</a></li>
</ul>
</li>
<li>
<a href='#'>Services</a>
<div class='products'>
<ul>
<li><img alt='Thumb' border='0' height='40'
src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TaO0_4J88II/AAAAAAAAAWQ/jXzJP5JiRr4/design.png'
width='40'/><h2>Design Template</h2><p><a
href='#'>Desig Template Blogger</a></p></li>
<li><img alt='Thumb' border='0' height='40'
src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1GgOaqvI/AAAAAAAAAWU/9Gy6ImALKXk/gallery.png'
width='40'/><h2>Gallery Blogger</h2><p><a
href='#'>View and Download Template</a></p></li>
<li><img alt='Thumb' border='0' height='40'
src='https://lh6.googleusercontent.com/_HR8egC6j8tg/TaO1MROxsBI/AAAAAAAAAWY/d6UthoqsB0I/help.png'
width='40'/><h2>Blogger Help</h2><p><a
href='#'>Can Help Blog Problem</a></p></li>
<li><img alt='Thumb' border='0' height='40'
src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1T5uh_VI/AAAAAAAAAWc/SrFLXC-dwPM/safety.png'
width='40'/><h2>Blogger Safety</h2><p><a href='#'>Safety Blogger Template</a></p></li>
</ul>
<div class='small'><a href="http://super-bee.blogspot.com/"> Panduan dan Cara Membuat Blog</a></div>
</div>
</li>
<li>
<a href='#'>Tutorials</a>
<div class='tutorials'>
<ul class='left'>
<li><a href='#'>Javascript</a></li>
<li><a href='#'>Python</a></li>
<li><a href='#'>PHP</a></li>
</ul>
<ul class='right'>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>ASP.NET</a></li>
<li><a href='#'>Actionscript</a></li>
</ul>
<div class='small'>View <a href='#'>all categories</a> or a <a href='#'>list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href='#'>Links</a>
<ul>
<li><a href='#'>Programming</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>My websites</a></li>
<li><a href='#'>Clients</a></li>
<li><a href='#'>Cool stuff</a></li>
<li><a href='#'>Sitebase</a></li>
<li><a href='#'>Other</a></li>
</ul>
</li>
</ul>
</div>
Perhatikan tanda pagar yang saya beri warna merah pada kode diatas,
tanda pagar tesrsebut dapat Anda ganti dengan url/link yang Ada pada
blog Anda dan sesuaikan juga textnya dengan yang anda inginkan.
7. Klik pratinjau untuk melihat hasil sementara, jika tidak mengalami masalah, kemudian save dan lihat hasilnya.
Anda dapat memodifikasi tab menu dropdown diatas dengan tampilan yang lebih bagus lagi, jika Anda sudah mengerti CSS dan
bagian template blogger. Sampai disini dulu penjelasan
panduan dan cara membuat blog khususnya
membuat tab menu dropdown yang dapat saya sampaikan, kita akan berjumpa
kembali pada kesempatan yang berbeda dengan tutorial-tutorial menarik
yang berbeda pula. Untuk itu saya harapkan bagi Anda untuk terus
memantau blog Super-Bee ini karena akan selalu Anda postingan yang
menarik yang dapat Anda baca dan jumpai.
