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;