Kamis, 01 November 2012

Cara Membuat Menu di atas Header Blog

Hai sob.. Sobat ingin tampilan blog sobat lebih keren dan pastinya pengunjung sobat tertarik dengan blog sobat?
nah, kali ini saya akan beri tips buat sobat tentang bagaimana cara membuat menu di atas header blog.
nah, dengan header itu pengunjung blog sobat dapat memilih bagian mana yang sekiranya ada bacaan yang menarik untuk dibaca.

Langsung aja ya sob ke TKP !!!

Pertama :
sobat log in dulu di blog

Kedua :
sobat masuk ke menu templates => edit HTML kemudian centang expand yang ada di kiri atas.

Ketiga :
sobat cari kode ]]></b:skin> (mudahnya tekan tombol kombinasi CTRL+F, kemudian cari kode tadi)

Keempat :
sobat letakkan script berikut di atas kode itu.

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}


Kelima :
 sekarang sobat  cari kode </head>

Keenam :
 silakan letakkan script berikut di bawah kode tadi

 
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li>
<li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>


Ketujuh :
 ganti kode  url / link 1' dengan url link yang ingin sobat jadikan menu. dan ganti  judul link dengan judul lonk yang sobat inginkan. Contohnya : Link exchange.

seperti ini sob salah satu contohnya 

<li><a href='http://fajarwahyuutama.blogspot.com/2012/10/ayo-bertukar-link.html'>Link Exchange</a></li>

Kedelapan :
silakan simpan.

Jadi deh..
Cara membuat menu di atas header blog  ini sebenarnya mudah kalau sobat mau berusaha. 
Nah, silakan mencoba ya sobat...
good luck! semoga tips yang saya berikan selalu bermanfaat buat sobat.
terimakasih ^_^

21 komentar:

  • Anonim says:
    2 November 2012 pukul 21.50

    bagus juga sob, sepertinya kapan2 harus dicoba. nih ..nuhun

  • Unknown says:
    3 November 2012 pukul 00.25

    hehe, oke bang.. selamat mencoba ya. semoga berhasil deh. makasih ya udah mampir :)

  • Unknown says:
    5 November 2012 pukul 16.39

    maksudnya gimana to jar????

  • Unknown says:
    7 November 2012 pukul 01.03

    @ahmadi tanjung.. makasih sob udh mampir. mampir lgi sob. gausah ragu" :D

    @Fariz Fajar : cermati dlu sob kata demi kata.
    hub.i sya d sklh jika ad wktu :)

  • barizi aw aw says:
    24 November 2012 pukul 18.45

    Makacih ya mas brooo

  • Hidayat Firmansyah says:
    25 November 2012 pukul 22.15

    kunjungin blog saya sob!
    http://gudang2share.blogspot.com

  • Unknown says:
    27 November 2012 pukul 23.27

    @bang Barizi : oke mas bro!! sama-sama udah mampir di blog ane :D
    @Hidayat F : oke bang! siap meluncur nih :D

  • Gombal Mukiyo says:
    29 Desember 2012 pukul 07.25

    Keren mas brow.Saat gua masukin alamt blog gua kok disuruh login ke email dulu.gimana ya brow??maaf newbi

  • Unknown says:
    4 Januari 2013 pukul 11.21

    http://down-dc-seven.blogspot.com/

  • Unknown says:
    4 Januari 2013 pukul 16.51

    @SDN 3 Sumberejo : itu disuruh konfirm di e-mail amda dulu sob.. coba buka inbox e-mail sobat. jika ada perintah untuk mengkonfirmasi klik aja peritah itu sob :)
    @Zale, oke sob.. kunjubngan balik :D

  • Basri says:
    4 Februari 2013 pukul 19.52

    udah nyoba, kren kawan

  • Unknown says:
    8 Februari 2013 pukul 17.18

    @M Basri : oke bang.. semoga bermanfaat ya :D
    makasih udah mampir :)

  • Unknown says:
    12 Februari 2013 pukul 07.23

    cakep sob...
    =============================
    visit cirebon4rt.blogspot.com

  • mahfoedz says:
    25 Maret 2013 pukul 06.55

    wah sob.... q coba kok kagak bisa ya sob?

    ngalimahfud.blogspot.com

  • Unknown says:
    28 Maret 2013 pukul 05.44

    mantab gan,, tapi dah coba kok jadinya menurun yawh???? kok g bisa ke samping

  • Unknown says:
    26 April 2013 pukul 15.18

    maaf sob itu jadinya, vertikal, bukan horizontal kayak punya ente..

  • Unknown says:
    17 Juni 2013 pukul 01.29

    @Warok : maksd ente gimana ya? hehe.. nyatanya punya saya jadi :)
    @pawi roys : hehe iya sob mkasih atas kritiknya itu bisa membuat saya lebih teliti kedepannya :)

  • Aldy Rizki says:
    24 Juli 2013 pukul 21.59

    bagus tuh info nya ! makasih banyak ya gan.

  • Unknown says:
    12 Agustus 2013 pukul 07.45

    hehe.. oke bang samasama ya semga bermanfaat :)

  • Pangeran Wortel says:
    20 Maret 2014 pukul 09.34

    Gaul totornya gan, ngebantu untuk revisi blog gue www.tulisanwortel.com. Thank's ya gan, kalo ada waktu mampir di blog gue juga ya.

  • Unknown says:
    30 April 2015 pukul 23.01

    MANTAP,,,thanks tips yang bagus ini gan...

Posting Komentar

maaf kalu komentar sobat-sobat tidak dibalas dengan cepat. karena adminnya hanya saya yang tidak 24jam. Dan berkomentarlah yang sopan.
no spam, no rasist, no anarkis

StatCounter

View My Stats
Ping your blog, website, or RSS feed for Free
AutoBacklinkGratisMajlis Link OtomatisFree Smart Automatic BacklinkMalaysia Free Backlink Services FreewebsitepromotionLink Portal Teks TVjapanese instant free backlink Free Plugboard Link Banner ButtonFree Automatic Backlink Service
.

  • .

Brows