May 30, 2010

Tab Menu Navigasi

Panduan bagaimana mencipta menu tab navigasi dalam blog.

Tab atau Flag dalam Menu berfungsi sebagai kemudahan navigasi bagi pengunjung blog untuk membuka dan mendapatkan sesuatu carian yang disediakan dalam blog dengan mudah dan jelas.


Tab "Utama" misalnya akan diklik untuk pengunjung membuka laman utama blog. Tab "Pesanan" diklik untuk membuka pautan di mana pengunjung akan mengisi barang pesanan misalnya. Tab "Album Gambar" kalau diklik akan membuka pautan yang mengandungi album gambar yang telah disediakan.

Sediakan terlebih dahulu tab dan pautan yang diperlukan untuk kemudahan pengunjung melayari blog. Sediakan pos atau pautan kepada laman lain yang berkenaan bagi setiap satu tab. Jika sesuatu tab dipautkan kepada sesuatu pos dalam blog, pinda kebelakangkan tarikh pos untuk mengelakkan supaya pos berkenaan tidak dipaparkan dalam muka utama blog.

Cara menyediakannya.

Salin kod CSS berikut dan paste masukkan dalam kod template blog lokasinya sebelum kod ]]></b:skin>:


#navmenutab {
font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
position: left;
top: 230px;
left: 0%;
width: 760px;
margin: 0 54px 0 0px;
padding: 5px 16px; /* duplicate the tab size */
text-align: left;
display: block;
}

#navmenutab li {
margin: 0;
padding: 0;
text-transform: none;
display: inline;
}

#navmenutab a {
color: #FFFFFF;
background: #771100;
font-weight: normal;
height: 19px;
padding: 5px 16px;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

#navmenutab a:hover {
color: #fff;
background: #771100;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

#navmenutab .current_page_item a {
color: #cdd;
background: #cda;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

Dalam papan pemuka Blogger pilih Design, kemudian pilih dibawahnya Edit HTML:


Tandakan kotak "Expanda Widget Templates". Paste masukkan kod yang disalin sebelum kod ]]></b:skin>


Kemudian salin kod berikut. Pinda pautan URL didalamnya dengan pautan sebenar yang telah disediakan. Warna biru adalah pautan dan warna merah adalah tajuk dalam tab. Salin dan buat pindaan menggunakan NotePad. Paste masukkan kod ini kedalam kod template blog mengikut contoh dibawah:


<ul id='navmenutab' style='list-style-type:none'>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Utama</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Struktur</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Newbie</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Widgets</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Header</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Sidebar</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Bantuan</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Email</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Blog</a>
</ul>
<br/>

Telusur dalam kod template blog cari kod <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>.

Kod <div id='header-wrapper'> ini akan ditutup dengan kod </b:section> </div>.

Paste masukkan kod di atas di bawahnya seperti berikut:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Panduan Blogger Baru (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--Show image as background to text-->
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span<data:description/></span></p>
</div>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:widget>
</b:section>
</div><!-- header wrapper -->


<ul id='navmenutab' style='list-style-type:none'>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Utama</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Struktur</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Newbie</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Widgets</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Header</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Sidebar</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Bantuan</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Email</a>
<li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Blog</a>
</ul>
<br/>

Pinda untuk tambah ruang butang tab width: 760px; dalam #navmenutab jika ruangan tidak mencukupi asal tidak melebihi ruang asal header blog anda.

#navmenutab {
font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
position: left;
top: 230px;
left: 0%;
width: 760px;
margin: 0 54px 0 0px;
padding: 5px 16px; /* duplicate the tab size */
text-align: left;
display: block;
}

#navmenutab a adalah warna latar belakang kesemua butang tab. Pinda warna latar butang tab (background: #771100;) dengan kod warna lain supaya sesuai dengan latar belakang blog. color: #FFFFFF; adalah warna tulisan dalam butang tab. Dapatkan kod warna dalam panduan "Kod Hexadecimal Untuk Warna":

#navmenutab a {
color: #FFFFFF;
background: #771100;
font-weight: normal;
height: 19px;
padding: 5px 16px;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

#navmenutab a:hover bermakna warna butang tab bila cursor mouse dilalu atau diletak diatas butang tab sebelum diklik. color: #fff; adalah warna tulisan dalam butang tab, juga boleh dipinda dengan warna yang sesuai, background: #771100; adalah warna latar butang tab. Pinda warna latar dengan warna yang sesuai:

#navmenutab a:hover {
color: #fff;
background: #771100;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

#navmenutab .current_page_item a adalah warna butang tab yang terakhir diklik atau kedudukan butang tab terkini. Waran tulisan dan warna latar juga boleh dipinda dengan warna yang sesuai:

#navmenutab .current_page_item a {
color: #cdd;
background: #cda;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;

13 comments:

yumz said... [Balas komen ini]

boleh dcoba nih....

adib said... [Balas komen ini]

bile ctrl f nak cari

id='header-wrapper
tak jumpe??
why?

Abiggaill said... [Balas komen ini]

tak faham;[

Calipso said... [Balas komen ini]

maaf terlalu banyak komen tidak berjawab kerana tersilap link...

Adib sesetengah blog kod template guna perkataan lain, cuba sema bahagian header dalam kod CSS.

Calipso said... [Balas komen ini]

Ainnz, mana yang tak faham tu? belah atas blog ni ada satu link untuk forum komuniti blogger. boleh tengok dalam forum tu panduan lanjut...

ada masalah boleh tulis pos dalam forum, tak perlu daftar pun tak apa... nanti boleh kita pandu sedapat mungkin...

ϟ TacaaTravolta ϟ said... [Balas komen ini]

pergh , bnyk nye ,

Unknown said... [Balas komen ini]

edc dah cari kod <div id='header-wrapper'
dgn cara ctrl + F xjmpa pon..
mcm mna nie??

Calipso said... [Balas komen ini]

@[U]ndeR[G]rounD

Kadang separuh template dari 3rd party nama header wrapper nya nama lain.

cuba pastekan dalam forum boleh kita chek tengok...

Unknown said... [Balas komen ini]

@Calipso

forum??

Unknown said... [Balas komen ini]

mslah nie dah settle calipso..
sy rujuk tuto nie http://calipso-tutorialblogger.blogspot.com/2011/02/tab-menu-template-ethereal-blogger.html lagi mudah..thx

Calipso said... [Balas komen ini]

oh ok kalau template baru blogger dah sedia ada ruang untuk tab menu dia...

kita ada forum sendiri, link ada dalam sidebar...

Unknown said... [Balas komen ini]

bagaimana buat post kita ikut kategori tab menu navigation selain home ??? saya sudah buat 1 post,, tapi nak tambah post baru bagaimana??

pink cottage said... [Balas komen ini]

Salam..calipso..
minta tolong setkan top menu di blog saya... step di atas rasa konfius and takut error nanti...boleh ye....terima kasih..

Post a Comment