BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Memasang tab menu di new blogger

Banyak cara yang di lakukan orang untuk menampilkan blog biar lebih menarik lagi, salah satunnya yaitu memasang tab menu baik di atas judul blog ( top bar ) atau di bawah judul blog.

Dan untuk memasang tab menu ini pun banyak sekali cara yang bisa kita pakai, salah satu-nya bisa saudara baca dalam tulisan ini. dan hasilnya bisa di lihat pada blog DEMO ini.

INSTALL TAB MENU

Pertama : Untuk latihan lebih baik kita pakai atau membuat sebuah blog baru di new blogger. dan pilih template yang standar template Minima .

Kedua : Setelah beres meng-installnya, buka Template-> Edit Html. kemudian tambahkan kode di bawah ini, di atas tag body.

lihat yg di pertebal sebagai kode tambahan.

#outer-wrapper{ }

#navbar-iframe { height:0px; visibility:hidden; display:none }

/* Use this with templates/template-twocol.html */

body { background:#000000 ;

* Keterangan *

- memindahkan Outer-wrapper ke atas biar lebarnya sama dengan Body halaman blog.

- Sedangkan Navbar-iframe untuk menghilangkan navbar blogger.

Ketiga : Kemudian geser kebawah, dan cari kode ini.

/* Outer-Wrapper ----------------------------------------------- */ #Outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Setelah ketemu ganti dengan kode di bawah ini.

/* Content-Wrapper ----------------------------------------------- */ #content-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Keempat : Geser lagi ke bawah cari kode ini.

]]></b:skin>

Setelah ketemu masukan kode di bawah, setelah kode ]]></b:skin> tersebut.

<style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .invertedshiftdown{ padding: 0; width: 100%; border-top: 5px solid #D10000; /*Red color theme*/ background: transparent; voice-family: "\"}\""; voice-family: inherit; } .invertedshiftdown ul{ margin:0; margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0; list-style: none; } .invertedshiftdown li{ display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; } .invertedshiftdown a{ float: left; display: block; font: bold 12px Arial; color: black; text-decoration: none; margin: 0 1px 0 0; /*Margin between each menu item*/ padding: 5px 10px 9px 10px; /*Padding within each menu item*/ background-color: white; /*Default menu color*/ /*BELOW 4 LINES add rounded bottom corners to each menu item. ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS REMOVE IF DESIRED*/ -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; } .invertedshiftdown a:hover{ background-color: #D10000; /*Red color theme*/ padding-top: 9px; /*Flip default padding-top value with padding-bottom */ padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/ color: white; } .invertedshiftdown .current a{ /** currently selected menu item **/ background-color: #D10000; /*Red color theme*/ padding-top: 9px; /*Flip default padding-top value with padding-bottom */ padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/ color: white; } #myform{ /*CSS for sample search box. Remove if desired */ float: right; margin: 0; margin-top: 2px; padding: 0; } #myform .textinput{ width: 190px; border: 1px solid gray; } #myform .submit{ font: normal 12px Verdana; height: 22px; border: 1px solid #D10000; background-color: black; color: white; } </style>

Kelima : Geser lagi ke bawah kemudian cari kode ini.

<!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span>

Setelah ketemu masukan kode di bawah ini. setelah kode di atas tersebut.

<div class="invertedshiftdown"> <ul> <li><a href="alamat url" title="Home">Home</a></li> <li><a href="alamat url" title="New">New</a></li> <li class="current"><a href="alamat url" title="Revised">Revised</a></li> <li><a href="alamat url" title="Tools">Tools</a></li> <li><a href="alamat url" title="CSS">CSS</a></li> <li><a href="alamat url" title="DHTML Forums">Forums</a></li> </ul> <form id="myform"> <input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" /> </form> </div> <br style="clear: both;" />

Keterangan : Ganti tulisan " alamat url ", dengan alamat link Url yang kamu inginkan. Misalkan: " http://blogkamu.blogspot.com/ "

Keenam: Geser lagi ke bawah kemudian cari kode ini.

<div id='content-wrapper'>

Setelah ketemu ganti dengan kode ini.

<div class='clearfix' id='content-wrapper'>

Ketujuh : Geser lagi kebawah kemudian cari kode ini.

<!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

Setelah ketemu ganti dengan kode ini.

<!-- spacer for skins that want sidebar and main to be the same height--> <div style='clear:both;'/></div> <!-- end content-wrapper -->

Setelah beres coba tekan tulisan PRATINJAU. kalau telah sukses kemudian klik SIMPAN TEMPLATE.

Pasang Tab Menu di bawah Judul Blog

Tulisan di atas saya menyimpan tab menunya di bagian atas judul blog. untuk memasangnya di bawah judul blog simpan code langkah yang kelima, di atas code ini.

<div class='clearfix' id='content-wrapper'>

Technorati tags: ,
Page views this post: reader

7 komentar:

iEn said...

thx for diz tutorial.. i did it, but part of search engine didnt work.. no script ya?

Ali said...

kang pusing!

Dg.Narang said...

weleh-weleh kok gak berhasil yach..
----------------------------------------------
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "body" must be terminated by the matching end-tag "".
----------------------------------------------
Kang, kayaknya ada yg kurang nih. Ada tag yg belum ditutup, tapi yg mana yach.....

saya coba di http://narangbelajar.blogspot.com dan gak berhasil....

please bantuannya......klo berhasil mau di aplikasikan di http://www.dg-narang.co.cc

THE SILENT ADVOCATE said...

WALAH KANG RUMIT YA, TAPI OK GW COBA, YHANKS YA...

banyuwangi said...

gak bisa.

tulisan jono said...

hemh,,,
rada ribet jg iah
okh la,,
"jangan takut untuk mencoba"

^_^v

TONSKI said...

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "body" must be terminated by the matching end-tag "".

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial