Menu horizontal dengan fungsi search

Menu yang akan saya terangkan dalam tutorial ini telah pun saya masukkan pada posting dengan tajuk  menu bar tanpa hack template.Tetapi menu ini cuma menggunakan warna sebagai latar belakang.Menu horizontal kali ini lebih menarik sedikit kerana menggunakan imej sebagai background dan juga mempunyai fungsi search .

Untuk membuatnya:

Masuk ke dashboard---Layout---Add a gadget

-HTML/javascript

masukkan kod ini pada bahagian bawah header blog.

<center><table width="800" height="40" cellspacing="1" cellpadding="1">
<tr>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxGKogo75gTVk7K0aEz8B0vnbpuAPIEDTdS85h_kaTtYP4F-pJQ2edxWNQ_V8SMD8wwz6bMEUdl-b6XKR8qTVZwWl0ceXES6k8wxhHZCHKVjTttbvea8tvWO6Z71V9jJqIgo_aC43WRY/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxGKogo75gTVk7K0aEz8B0vnbpuAPIEDTdS85h_kaTtYP4F-pJQ2edxWNQ_V8SMD8wwz6bMEUdl-b6XKR8qTVZwWl0ceXES6k8wxhHZCHKVjTttbvea8tvWO6Z71V9jJqIgo_aC43WRY/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/p/site-map.html"><font size="2" color="white"><center><b>SITE MAP</b></center></font></a></td>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxGKogo75gTVk7K0aEz8B0vnbpuAPIEDTdS85h_kaTtYP4F-pJQ2edxWNQ_V8SMD8wwz6bMEUdl-b6XKR8qTVZwWl0ceXES6k8wxhHZCHKVjTttbvea8tvWO6Z71V9jJqIgo_aC43WRY/s1600/menu.JPG"><div align="center"><span class="style2"><a href="http://teknikbuatblog.blogspot.com/p/link-exchange.html
"target="_blank"><font size="2" color="white"><center><b>LINK EXCHANGE</b></center></font></a></span></div></td>

<td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxGKogo75gTVk7K0aEz8B0vnbpuAPIEDTdS85h_kaTtYP4F-pJQ2edxWNQ_V8SMD8wwz6bMEUdl-b6XKR8qTVZwWl0ceXES6k8wxhHZCHKVjTttbvea8tvWO6Z71V9jJqIgo_aC43WRY/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="GO" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>
</table></center>

Ubahsuai pada kod diatas:

Kelebaran dan ketinggian menu:
<center><table width="800" height="40" cellspacing="1" cellpadding="1">
width: ubah pada saiz mengikut kelebaran template
height:ketinggian menu yang dikehendakki

Masukkan link dan imej pada menu:

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxGKogo75gTVk7K0aEz8B0vnbpuAPIEDTdS85h_kaTtYP4F-pJQ2edxWNQ_V8SMD8wwz6bMEUdl-b6XKR8qTVZwWl0ceXES6k8wxhHZCHKVjTttbvea8tvWO6Z71V9jJqIgo_aC43WRY/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

teks berwarna merah masukkan link imej bagi menu
warna hijau pula ialah link untuk halaman yang nak dimasukkan.Ubahkan pada link halaman anda
Manakala teks berwarna oren pula masukkan nama menu pada link

diatas saya tunjukkan tiga contoh kod yang dimasukkan untuk membuat menu pada halaman sepert contoh pada gambar diatas..Jika ada lebih cuma tambahkan saja kod lagi dan ubah mengikut kesesuaian seperti yang saya terangkan diatas.

Bahagian search:

<td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxGKogo75gTVk7K0aEz8B0vnbpuAPIEDTdS85h_kaTtYP4F-pJQ2edxWNQ_V8SMD8wwz6bMEUdl-b6XKR8qTVZwWl0ceXES6k8wxhHZCHKVjTttbvea8tvWO6Z71V9jJqIgo_aC43WRY/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="SEARCH" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>

teks merah masukkan link imej sama seperti bahagian menu yang lain.
teks hijau tukar kepada alamat blog anda
dan bahagian teks oren ubah lah warna yang sesuai dengan imej/warna yang dimasukkan pada menu.
teks  biru boleh diubah pada perkataan yang lain.
 ubahkan saiz pada witdh agar dapat ruangan yang bersesuaian jika ruangannya terlalu luas.
dah selesai masukkan jangan lupa save terlebih dahulu..kemudian lihat hasilnya.

update 10/5/2013

cara membuat menu dengan menggunakan gambar

Sebelum ini dalam entri yg lepas ada saya tunjukan cara membuat berbagai bentuk menu seperti menu bar tanpa hack,menu horizontal dan kali ini mengunakan gambar pula sebagai menu.Bila menggunakan gambar sebagai menu tentu nya kita mempunyai pilihan membuat berbagai bagai bentuk yang disukai ,tak semestinya asyik bentuk empat segi,bujur.Bagi yg belum tahu apa yang dimaksud menu,menu biasanya terdapat pada bahagian bawah header  dengan perkataan yg biasa terdapat padanya seperti home,contact,site map dan sebagainya.

Untuk membuat menu ini kita perlu sediakan gambar dan diupload ke photobucket,imageshack dan sebagainya.Kemudian kita ambil url imej tersebut:

Contohya seperti ini:

http://i219.photobucket.com/albums/cc282/garam63/49Ccopy.jpg

kemudian tambah kod jadi seperti dibawah ini:

<img src="http://i219.photobucket.com/albums/cc282/home.jpg">

Kemudian masuk ke design-page elements
Pilih add gadget-HTML/Javascript

Masuk kod tadi padanya:

Kemudian klik pada edit html
Gambar  yg dimasukkan akan muncul..klik pada gambar untuk mengubah saiznya dengan menarik bingkai yg ada pada gambar

Untuk memasukkan link pada button tadi..klik pada gambar kemudian klik ikon create link dan masukkan link yang dikendakki padanya:

Masukkan link pada ruangan enter a url.
Untuk button yang seterusnya ulang semula langkah diatas dengan memasukkan link gambar kedua .
Untuk memastikan saiz adalah sama klik semula pada edit html untuk masuk pada kod tadi
Dan perhatikan pada width dan height pada kod tersebut

<a href="http://teknikbuatblog.blogspot.com/"><img style="width: 196px; height: 87px;" src="http://i219.photobucket.com/albums/cc282/home.jpg" /></a>
<a href="http://teknikbuatblog.blogspot.com/"><img style="width: 196px; height: 87px;" src="http://i219.photobucket.com/albums/cc282/contact" /></a>

Kemudian klik pada save..selamat mencuba

Cara buat tab view menu

Posting kali ini adalah membuat tab menu view yang mana sesuai dipasang pada blog yang mempunyai side bar yang luas.Pemasangan menu seperti ini adalah menjimatkan ruangan kerana menu disatukan secara tab pada satu tempat.Satu lagi kelebihan menu ini adalah tidak perlu mengedit template,Cuma di masukkan pada add gadget.Jadi lebih mudah untuk membuatnya tanpa perlu khuatir tidak berfungsi setelah membuatnya.Cuma kita perlu mengubah sedikit saiz dan juga warna pada kod agar bersesuaian dengan template kita.  

jika sekiranya berminat untuk membuatnya ikuti langkah ini:

Masuk  keblogger
Pilih design->> Page Element(Untuk dashboard baru pilih...Layout...add a gadget)

Add a Gadget
Pilih  HTML/Javascript
Dan masukkan kod ini

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab  1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Cara memasukkan tajuk dan link posting pada menu:

pada bahagian kod Tajuk 1,tajuk2 dan tajuk 3 tukarkan dengan tajuk menu anda

Kemudian pada isi menu tab 1,isi menu tab2 dan isi menu tab 3 anda perlu masukkan link posting padanya.

Untuk mendapatkan link posting anda boleh dapatkan pada ruangan alamat dibrowser semasa membuka posting.

Contoh alamat atau link posting artikel

http://teknikbuatblog.blogspot.com/2010/08/cara-buat-tab-view-menu.html

anda perlu ubah kepada:

<a href="http://teknikbuatblog.blogspot.com/2010/08/cara-buat-tab-view-menu.html " target="_blank">cara buat tab view menu</a>

teks berwarna oren adalah tajuk artikel---tukarkan dengan tajuk posting anda

cara letak link seperti pada blog saya:

KEMBALI KEATAS


Kemudian klik save

Update 25 November 2012

Cara pasang menu scroll pada blog

Memasang scroll bar pada blog tujuannya yang utama adalah bagi menjimat kan ruangan.Cara membuat nya amat mudah dengan hanya  mengikut langkah dibawah ini.

1.Masuk ke dashboard,
kemudian pilih Layout-->>add gadget

2.HTML/JAVASCRIPT

Masukkan kod berikut:

<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 80px; overflow: auto; padding: 5px; width: 170px;">

masukkan teks atau apa apa kod yang hendak dipaparkan disini atau

</div>

Saiz kotak scroll boleh ditukar pada width(lebar)dan height)tinggi pada kod diatas

Memasang scroll bar pada blog tujuannya yang utama adalah bagi menjimat kan ruangan.Cara membuat nya amat mudah dengan hanya  mengikut langkah dibawah ini.

Untuk membuat menu scroll :

kod nya adalah seperti dibawah ini :

<div class="widget-content">
<ul style="width: 145px; height: 150px; background-color: #FFEAEA;  font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 2px ridge #52FF20; overflow: auto;">

<li><a href="http://teknikbuatblog.blogspot.com/2010/03/cara-membuat-blog.html" target="_blank">Cara membuat blog</a></li>
masukkan link seterusnya....

</li></ul></div>
 
Jika hendak letakkan nombor dihadapan senarai gantikan ul  kepada ol
ul akan memaparkan bullet dihadapan

Kod warna oren untuk kod scroll
Kod warna hijau adalah link artikel dan warna biru tajuk artikel yang hendak paparkan
Scroll akan muncul bila kandungan pada list melebihi ketinggian yang diletakkan pada kod(overflow:auto).Jadi ubahkan ketinggian pada height.

3.kemudian save untuk melihat hasilnya.

update 20/6/2013

membuat menu horizontal pada blog

Pada entri yang lepas saya ada membuat tutorial bagaimana hendak membuat menu bar tanpa hack template .tutorial kali ini masih lagi mengenai bagaimana hendak membuat menu horizontal pada blog.Untuk membuat tidak perlu kita hack template,cuma  masukkan kod pada add gadget.Tutorial ini adalah atas permintaan  oleh sahabat kita Sendra yang mahu saya membuat tutorial bagaimana hendak membuat horizontal navigation seperti yang terdapat bahagian bawah header blog ini..yang tertera perkataan HOME,ISI KANDUNGAN......untuk membuatnya ikuti langkah ini.

Untuk memasukkan horizontal menu ini anda perlu:
1.log in ke blogger,pilih design-->>page element
2.klik pada add gadget--->>pilih HTML/Javascript
3.kemudian pastekan  kod menu horizontal pilihan anda dibawah ini
4.selepas save kod ,seret widget HTML/Javascript ke bawah header

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color:#fff ; background-color: #F781BE; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>t;

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>

<style> #navcontainer { background: #E3CEF6; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #F5A9D0 #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #A9A9F5; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #800000; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #F5A9D0 #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#F7BE81; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>

Untuk memasukkan link anda perlu mengedit bahagian ini pada kod diatas:
  <li><a href="#" ><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>

  Pada tanda "#" masukkan link anda
  Manakala pada Link 1,Link2,Link3 dan Link 4 pula masukkan perkataan yang ingin dipaparkan contoh
  HOME,CONTACT dan sebagainya.
  Jika hendak delete atau tambah link, padam atau tambah kod ini:

 <li><a href="#" ><span>Link n</span></a></li>
 * Warna warna pada menu boleh ditukar dengan mengubah kod warna pada kod kod menu diatas.

membuat menu navigasi breadcrumb

Breadcrumb adalah menu navigasi berurutan yang terdapat diatas di atas artikel posting dan ia merupakan cara efektif bagi memberi kemudahan kepada pengunjung bagi melihat kategori posting pada sesuatu blog.Disamping itu juga adalah digalakkan dari segi SEO pada sesuatu blog.

Berikut adalah cara membuat breadcrumb.

1. Pada Design, kemudian  pilih Edit HTML,klik pada Expand Widget Templates.
2. Cari kod berikut (gunakan Ctrl+F pada keyboard bagi memudahkan pencarian)

 <b:if cond='data:post.title'>

4. Setelah jumpa ,letakkan kod dibawah ini dibawah kod tadi.

<b:if cond='data:blog.pageType == "item"'>
<a href='http://namabloganda.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>

 

Nota:gantikan perkataan http://namabloganda.blogspot.com dengan nama blog anda.

8. Kemudian klik save Templates .

Menu breadcrumbs ini hanya akan muncul diatas artikel atau dibawah judul blog ketika anda membuka halaman suatu posting dan bukan halaman utama blogspot anda.