BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Pasang Navigasi Bar Ala Boogle Blog

Jika ente tidak tertarik dengan Navbar default dari blogger dan ingin menggantikan dengan Navbar seperti yang terdapat pada blog ini, ente bisa menggikuti tutorial di bawah secara step by step.

Langkah Pertama :

Menghilangkan Navbar Blooger dengan cara menambah kode css ini

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

Simpan sebelum tag body ini.

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  dan seterusnya
  }

 

Langkah Kedua :

Tambahkan kode css navigasi ini.

/************** NAV1 *************/

#nav1{
height:32px;
line-height:32px;
background:white;
padding:0 10px;
background:transparent;
border-bottom: 1px solid #cfe4f2;
}
#nav1 ul,
#nav1 ul li
{
margin:0;
padding:0;
list-style:none;text-align:left;
    }
#nav1 ul li{
float:left;
display:block;
    }
#nav1 ul li a:link,
#nav1 ul li a:visited{
color:#0007EE;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;;
display:block;
    }
#nav1 ul li a:hover{
color:black;
    }
#nav1 ul li ul li{
float:none;
display:block;
    }
#nav1 ul li ul li a:link,
#nav1 ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
    }
#nav1 ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
    }
.submenu {
position: absolute;
width: 160px;
background: #fff;
padding:10px;
border:solid 1px #2E4B88;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
    }

#nav1 ul li#nav1_rss {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4QTx25aszbBOfbMu5vw0ITKIHNt0dw5YW05UD8D0Gm-ehLKxmgAq1NouHQsxNdiC3DTzucCxsXI2JA9vpymXh8MVxbpb89XZabFo-Nf1fsgz9AFCpnk6pJHK4Pfc3RkZMGBmgnQpB6E5j/') no-repeat 10px;
padding-left:26px;
float:right;
}
#nav1 ul li#nav1_cat {
background:transparent;
float:right;
padding-left:10px;
}

Simpan sebelum kode ini.

]]></b:skin>

Langkah Ketiga :

Tambahkan javascript ini

<script src='http://santi23.fileave.com/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
function nav1(){
    $(&quot;div#nav1 ul li&quot;).mouseover(function() {
            $(this).find(&#39;ul:first&#39;).show();
    });
    $(&quot;div#nav1 ul li&quot;).mouseleave(function() {
        $(&quot;div#nav1 ul li ul&quot;).hide();
    });
    $(&quot;div#nav1 ul li ul&quot;).mouseleave(function() {
        $(&quot;div#nav1 ul li ul&quot;).hide();
    });
};
$(document).ready(function(){
    nav1();
});
</script>

Simpan javascript di atas sebelum kode ini

</head>

Langkah Keempat;

Masukan html navigasi ini.

<div id='nav1'>
<ul>
    <li><a href='url / alamat link tujuan' >Home</a></li>
    <li class=''><a href='#' title='About'>About</a></li>
        <li><a href='#' title='Child Pages Test'>Cara Membuat Blog</a>
          <ul class='submenu'>
       <li><a href='url / alamat link tujuan' title='Membuat Blog'>Membuat Blog</a></li>
       <li><a href='url / alamat link tujuan'  title='pengaturan blog'>Pengaturan</a></li>
       <li><a href='url / alamat link tujuan'  title='membuat tulisan'>Menulis</a></li>
          </ul>
        </li>
        <li id='nav1_rss'>    <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to Feed</a></li>
    <li id='nav1_cat'><a href='/'>Categories &#9660;</a>
        <ul class='submenu'>

            <li><a href='url / alamat link tujuan'  title='View all posts filed under Test category'>Test category</a></li>
        <li><a href='url / alamat link tujuan' title='category 2'>Test category 2</a></li>
        <li><a href='url / alamat link tujuan' title='category 3'>Test category 3</a>
        </li>

        </ul>
    </li>
</ul>
</div>

Simpan kode di atas sesudah kode ini.

<body>

Langkah Kelima

Setelah itu klik “ Save Template “ ( Simpan Template )

Bagaimana cara menggedit link pada navigasinya

Setelah Navbar –nya terinstall di blog kita, sekarang yang perlu ente pelajari dan lakukan adalah menggedit link url pada menu –nya sesuai dengan keingginan link tujuan ente.

coba perhatikan ini.

<li><a href='url /alamat blog ente'>Home</a></li>

Url / alamat blog ente = ganti tulisan itu dengan url blog ente misal; http://www.namablog.blogspot.com/ – dengan demikian maka setiap penggunjung menekan menu “ Home “ maka ia akan kembali pada halaman depan blog ente.

begitu juga

Url / alamat link tujuan = ganti dengan url / alamat link yang ingin ente tuju. misalkan jika ente punya alamat facebook jadi www.myfacebookuuu.com dst.

Sesuaikan juga nama menu navigasinya  dengan url / alamat link. misal Membuat Blog di ganti dengan Myfacebook. dst.

Setelah beres menggedit link url –nya seperti biasa Simpan Template

Technorati tags: ,
Page views this post: reader

25 komentar:

Anonymous said...

Hallo...Mas..

Oy,..Td saya udah Pasang tab menu di blogspot saya...
trs saya mau nanya nih...!!! Gmn cara Nge-Gunakan / mengedit tab Menunya ...???? trs,..Gmn cara ganti nama pada Tab Menu...???

Tolong ya mas Kasih tau'in....^_^
soalna,..Saya Masih baru dlm menggunakan blogspot...!!!

Toloong Balas Ke Email saya: DC.Xv3ze@gmail.com

Anonymous said...

anda telah di tag di http://teranung.blogspot.com/

Anonymous said...

saya dah pake nih ( tapi dari langkah ke 4 )ga dari (1,2,3)

yang saya mo tanyain bisa di taruh di antara header - main post ga yah...?

kalo yang sekarang kan adanya di atas header..

Anonymous said...

@dvallen
kalau tab menunya di taruh di bawah header letakan saja, kode menu yg kelima di atas kode ini :

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

Anonymous said...

Mas maaf ganggu dan sebelumnya thx atas tutorialnya. Saya coba merubah header, tapi dampaknya tab horisontal saya jadi pindah ke atas, padahal sebelum ganti header tab nya ada di bawah. Gimana caranya biar kembali ke bawah? Oh ya blog yg saya buat thifanpokhan.blogspot.com. Thx ya

Anonymous said...

kalau tag Css ngga di rubah..

masuk saja ke tab Elemen Html kemudian.. drag elemen yang bertulisan HTML/Javascript jadi di bawah tulisan HEADER..

Thifan Po Khan .. Tanjung Priok Bukan Bang ??

Anonymous said...

ada kesalahan di bagians "font: $bodyfont;"

maaf bukannya sok tahu, aku juga newbie,, masih sekolah, tapi aku adalah konsumen script anda, he2,, alias lgi nyoba juga, n kbetulan tau bagian mana yg salah,,

oke...

keren ko bang, nih aku pakai..

Anonymous said...

eh sorry,, aku baru nyambung kenapa anda buat seperti itu,,, he..
terima kasih

123 said...

tanya... bos. di tab menu itukan ada judul home, prifacy policy, contac us dan search... nah, kendala aku begini : bagaimana cara menambah judul menu dengan menggunakan kode yang telah bos terangkan di atas. misalnya saya ingin menambah music, puisi, software, dll. thanks atas bantuannya. ditunggu jawaban secepatnya. sekali lagi terima kasih....

123 said...

Ok... bos... menambah judul menu saya sudah berhasil.... sekarang saya mo nanya lagi... gimana agar agar tab menu kita berada di tengah / center dari blog kita...? hehehe sory banyak tanya... masih newbie...

Jaloee said...

<ul class="menu1">

simpanya di sini

</ul>

contoh kode-nya sperti ini:

<li><a href="#nogo"><b>Musik</b></a></li>

Jaloee said...

masukan text-align:center;

pd kode di bawah

.menu1 { text-align:center; dts }

the pilot said...

mas punyaku jadi acak2kan ya
napa?

IDHANGDOANG said...

OK BANGET

Anonymous said...

nanti halamannya gimana?

Jaloee said...

@ Sigidh-Boedhy

untuk blogspot halaman-nya di taut kan secara manual..

Sand! BloG said...

Sukses abiz Boz stelah @ praktekin,liat aj di www.audiavidianto.blogspot.com

bismuth said...

makasih banget tutornya.... saya dah coba
sukses.......

Jaloee said...

@ yoe

sip sy dah liihat blog na

Laptop Murah said...

Muter-muter..pusing..gak ngerti...

Laptop Murah

Jaloee said...

@ Laptop Murah

hehehe.. itu tulisan rada jadul jg.. mungkin akan sy update biar.. gmpang di cerna

arief said...

Masih Bingung bos mohon dipermudah :)

Jaloee said...

@ Bronis Mancipta

ini tulisan lama boss.. mungkin perlu saya update. thank atas masukanya

ali afif said...

Thanks neh Mas, udah separuh berhasil neh....

Pancanaka said...

makasih banget atas infonya boss....

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