Pasang Tab Menu di Bagian Top BAr

V r.Beta Yok kita lanjutin lagi tentang membuat tab menu, namun sekarang tab menu-nya kita taruh di bagian top bar- bagian atas halaman blog . seperti tab menu yang ada di atas blog Coretan Dingding ini.

Model gambar Tab Menu di atas, kodenya saya dapatkan dari cssplay.co.uk  sedangkan Template yang saya gunakan adalah MINIMA sebagai korbanya.

hasil akhirnya bisa kamu lihat di blog WS Rendra ini DEMO

INSTALL TAB MENU TOP BAR

Pertama : Biar seragam kita mesti install dulu New blogger baru dengan template Minima  atau Minima black .

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

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: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */
.menu1 {padding:0 0 0 155px; margin:0; list-style:none; height:35px;
background:#fff url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;} .menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px;
color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif);}
.menu1 li.current a b {background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button2.gif);}
.menu1 li a:hover b {background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button2.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/tab%20menu_02/button3.gif) no-repeat right top;}
</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.

<ul class="menu1">
<li><a href="#nogo"><b>Home</b></a></li>
<li class="current"><a href="#nogo"><b>Privacy Policy</b></a></li>
<li><a href="#nogo"><b>Products</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>

Keterangan :
Ganti tulisan #nogo, 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.

PENJELASAN

Sorry ngga ada penjelasan apapun, karena saya juga ngga ngerti kenapa mesti seperti itu.

Jika gagal dalam pengeksekusiannya, coba periksa lagi semua kodenya, dan perhatikan tulisan peringatan dari pihak blogger. 

Adapun untuk tab menu-nya sendiri jika tampilannya kurang puas . kamu bisa mendapatkannya di blog-nya Kolom-Tutorial milik Kang Rohman.

Atau koleksi lainnya bisa kamu lihat di cssplay.co.uk

Technorati tags: Ngeblog, New Blogger