Melayang

Browse Manual » Wiring » blog » di » dropdown » membuat » menu » tab » Membuat Tab Menu Dropdown di Blog

---

Membuat Tab Menu Dropdown di Blog

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

Lihat Demo

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(){
$(&quot;#nav-one&quot;).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.