Menu Dropdown

Banyak sekali pernak-pernik yang ditambahkan para blogger ke falam blog-nya, salah satu yang umum dilakukan ialah Menambahkan Menu Dropdown Horizontal pada header. Selain mempercantik blog, menambahkan menu ini juga merupakan salah satu cara memberikan informasi tersendiri kepada pengunjung. Sobat bisa membubuhkan tentang diri Sobat pada menu ini, atau bahkan iklan-iklan tertentu.Tentunya mengasyikkan . . .

Menu ini cukup panjang dan berhubungan dengan kode-kode pada template. Sebelum melakukan langkah-langkah yang satu ini, sebaiknya Sobat membackup dulu template Sobat sebelum diedit, yaitu dengan cara mendownload template Sobat.
Mari kita langsung ke langkah-langkahnya,

1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Edit HTML.
4. Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
5. Centang pada Expand Widget Template.
6. Cari kode </b:skin> dan letakkan kode berikut sebelum kode </b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}
.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}
/* CSS classes applied to down and right arrow images */
.downarrowclass{
position: absolute; top: 12px; right: 7px;}
.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

7. Kemudian letakkan kode berikut sebelum kode </head>

<!–[if lte IE 7]>
<style type=”text/css”>
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]–>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js&#8217; type=’text/javascript’/>
<script src=’ http://h1.ripway.com/anshul555/slidemenu_horiz.js ‘ type=’text/javascript’/>

8. Cari kode yang mirip seperti ini

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Judul Blog Sobat (Header)’ type=’Header’/>
</b:section>
</div>

Warna merah : Judul Blog Sobat
9. Kemudian letakkan kode berikut tepat setelah kode di atas

<div class=’jqueryslidemenu’ id=’myslidemenu’>
<ul>
<li><a href=’http://miscah.blogspot.com’>Home</a></li&gt;
<li><a href=’URL’>Daftar Isi</a></li>
<li><a href=’URL’>Tutorial Blog</a>
<ul>
<li><a href=’URL’>Sub Item 1.1</a></li>
<li><a href=’URL’>Sub Item 1.2</a></li>
<li><a href=’URL’>Sub Item 1.3</a></li>
</ul>
</li>
<li><a href=’URL’>Islam</a></li>
<li><a href=’URL’>Folder 2</a>
<ul>
<li><a href=’URL’>Sub Item 2.1</a></li>
<li><a href=’URL’>Folder 2.1</a>
<ul>
<li><a href=’URL’>Sub Item 2.1.1</a></li>
<li><a href=’URL’>Sub Item 2.1.2</a></li>
<li><a href=’URL’>Folder 3.1.1</a>
<ul>
<li><a href=’URL’>Sub Item 3.1.1.1</a></li>
<li><a href=’URL’>Sub Item 3.1.1.2</a></li>
<li><a href=’URL’>Sub Item 3.1.1.3</a></li>
<li><a href=’URL’>Sub Item 3.1.1.4</a></li>
</ul>
</li>
<li><a href=’URL’>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=’http://prasutan.blogspot.com’>Link Exchange</a></li>
</ul>
<br style=’clear: left’/>
</div>

10.Setelah itu Simpan Template sobat.
Tanda ‘URL’ (warna merah) sobat ganti sendiri dengan url yang Sobat inginkan. Oke sob, selamat mencoba ya !

Perihal hidayat
Hanya seorang manusia biasa

3 Responses to Menu Dropdown

  1. Sepuluh Jariku mengatakan:

    Contoh yang udah jadi ada nggk gan?
    Bingung juga..
    Salam kenal

  2. Ping-balik: The Making of The Repsol Honda Commercial « repsolhondahrc

  3. adon mengatakan:

    wah…bingung saya..
    i need a help…
    setelah beberapa kali saya coba, ternyata tetap gak bisa untuk menambahkan tool read me serta tool menu dropdown tersebut. mohon bantuannya dengan sedetil-detilnya. lagi buntu ne. kayaknya blogsop lebih susah daripada wordpress ya.

    thanks ya mas…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: