Monday, March 29, 2010

Membuat top menu di blogger

Kebetulan template yang saya gunakan sudah memiliki top menu. Sebenarnya, bisa saja kita membuat top menu pada blog yang belum memilikinya.

Sebelum Anda mengikuti langkah-langkah di bawah ini, sebaiknya salin dulu semua kode ke notepad untuk menyesuaikan dengan template Anda, baik ukuran, warna, dan sebagainya. Kalau sudah, silakan ikuti langkah di bawah ini.

  • Salin kode berikut lalu paste di atas ]]></b:skin>.

/* navbar

================== */

#bg_nav {

background: #0e3300;

width: 770px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #caf99b;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #0e3300;

border-bottom: 1px solid #0e3300;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #FFFFFF;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}

#navleft {

width: 440px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 200px;

font-size: 11px;

float: right;

margin: 0px;

padding: 6px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #0e3300;

color: #FFFFFF;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #000000

}

#nav a:hover {

background: #729e51;

color: #FFFFFF;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}

#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #729e51;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #000000;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}

#nav li li a:hover, #nav li li a:active {

background: #0e3300;

padding: 7px 30px 7px 10px;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

clip_image002

  • Salin kode di bawah ini lalu paste di bawah widget id='Header1'. Setiap template bisa berbeda. Jika tidak ditemukan, cari yang mirip secara manual.

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.sudarma.info/'>home</a></li>
<li><a href='http://facebook.com/sudarma.sopian'>My Facebook</a></li>
<li><a href='http://templates.sudarmaster.com/'>Free Template</a></li>
<li><a href='http://blogkuring.com/'>Blogkuring</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://www.sudarma.info/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

    </div>

</div><!-- akhir bg_nav -->

clip_image004

  • Klik SAVE TEMPLATE.
Previous Post
Next Post

post written by:

0 komentar: