Cara Membuat Kotak Search

Kotak search ni kita isi untuk mencari sebarang artikel dalam blog kita. semua dah tau kan.. ok ini caranya..

1. Loggin ke Blogger => Layout => Add Gadget => HTML/Javascript. Tambahkan kod dibawah ini.

<form action="http://namablog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

2. Tukarkan namablog dengan nama blog Antum. Nombor 30 adalah panjang kotak tersebut. Dah siap letaklah ditempat yang sesuai di sidebar Antum.

Menukar Tulisan Older Post

Older Posts, Home, Newer Posts. Link² ini akan ada di bahagian bawah posting. Ok sekarang kita akan tukar link² yang berbentuk tulisan ini dengan icon. Nampak lebih cantik dan menarik. Begini caranya..

1. Loggin ke Blogger => Layout => Edit HTML.Tandakan pada kotak Expand Widget. Cari kode dibawah. Gunakan Ctrl+F.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

2. Gantikan tulisan yang berwarna dengan kode image ini.

<img src="Image URL" />

3. Lihat contoh ini.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/newer.gif'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/older.gif'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/home-1.gif'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/home-1.gif'/></a>
</b:if>
</b:if>

</div>

4. Hasilnya begini..



Tambahan: kode² yang asal tu boleh juga di tukar dengan tulisan lain (kalau xmau guna icon)

Memasang Kotak 'Alert Message'

Kotak Alert Message ini akan muncul di awal loading. Kita boleh la kasi tau kat pengunjung ape² kan, sebagai maklumat atau amaran awal bila masuk blog kita.. Kalau lafazkan salam lagi bagus kan. Ok ikuti tutorial ni.

1. Loggin ke Blogger => Layout => Add Gadget => HTML/Javascript. Tambahkan dengan kode dibawah.

<script type="text/javascript">
alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>

2. Tukarkan tulisan biru dengan kalimat Antum Sendiri.. Tulisan purple tu akan muncul jika pengunjung kita Disable Javascript.

siap..

Sumber : Tips For New Blogger

Ascii Keyboard Code

Disini Ana sediakan kode² bagi sesetengah simbol yang biasa digunakan dalam penulisan.. Tapi ramai la yang belum tau kode²nya, termasukla hamba ni.. hehe. Ana terjumpa kode²ni di laman http://rmhh.co.uk/ascii2.html. Ana tidak senaraikan semuanya disini. Sekodar yang Ana boleh gunakannya saja.. Nak tau yang lain boleh ke laman asal ye.. Caranya mudah saja. Tekan tombol Alt+Kode. Contoh Alt+0169 bagi simbol ©.

0169 = ©

0187 = »

0174 = ®

0128 = €

0153 = ™

0186 = º

0188 = ¼

0189 = ½

0190 = ¾

0191 = ¿

0185 = ¹

0178 = ²

0179 = ³

Membuat Pesanan Di Posting

Ana cuba buat Tutorial ni.. tetiba menjadi pulak, pening la jugak nak buat nye. Tapi Ana puas hati bila melihat hasilnya. Xla sia2 duk mengadap makhluk syasyah ni. Ok pesanan ni akan muncul di setiap akhir posting. Kita boleh tulis apa saja, kalau nak isi iklan pun boleh rasanya. Tutorial ini sesuai bagi yang menggunakan 'Read More' macam Ana. Yang lain pun sesuai cuma ade perbezaan la skit. Begini caranya ye..

1. Loggin ke Blogger => Layout => Edit HTML. Tandakan pada kotak Expand Widget dan cari kode dibawah.

<div class='post-footer'>

2. Tambahkan kode ini sebelumnya.

<h5><br/><center>
<b>PESANAN ANTUM DISINI</b>
</center><br/></h5>

3. Gantikan text berwarna merah megikut citarasa Antum.

4. Seterusnya scroll ke bahagian Posting dan tambahkan kode dibawah.

.post h5 {
background: #E7F398 url(http://i302.photobucket.com/albums/nn113/aburifaie/comen.jpg)no-repeat top left;
border: 3px solid #81BEF7;
font-family: Georgia;
font-size:12px;
color:#B404AE;
-moz-border-radius:12px;
}

5. Text merah adalah background. Biru warna border. Purple warna tulisan. Kasi tukar la ikut template Antum..heheh dah siap.

Background Pada Tajuk Sidebar

Ingin menjadikan tajuk sidebar lebih menarik?? Mudah saja, kita boleh meletakkan background yang bermacam² mengikut kretiviti masing². Ok mari lihat caranya..

1. Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.

.sidebar h2 {

2. Tambah kode ini selepasnya..

background:url(http://i302.photobucket.com/albums/nn113/aburifaie/sl.jpg)repeat-x;

3. Gantikan alamat background yang berwarna merah. Siap..

Tambahan:- Kalau Antum xjumpa kode .sidebar h2 { di template Antum, boleh guna cara ini. Tambah kode dibawah di bahagian sidebar.

.sidebar h2 {
background:url(http://i302.photobucket.com/albums/nn113/aburifaie/sl.jpg)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

Gantikan alamat background yang berwarna merah. Biru warna tulisan. Ungu size tulisan. Hijau kedudukan tulisan.

Cara Membuat Menu Tab View

Apakah makhluk yang bernama Menu Tab View ni?. Boleh tengok sebelah kanan blog ni. Ana isikan dengan tips2/artikel2 di dalamnya. Kotak menu ni sangat berguna. Dapat jimatkan ruang sekaligus memudahkan pembaca mencari maklumat.

Ini paparan makhluk yang akan terhasil melalui tutorial ini. Nape xsama macam Ana punya?? Ha yang Ana tu dah banyak ditokok tambah. Asalnya macam ini jugak. Kalau Antum nak cantikkanya kita boleh cerita lain masa. Ok ini stepnya.

1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ni ]]></b:skin> kalau nak cepat jumpa klik je Ctrl+F dan cari.

2. Masukkan kode dibawah sebelumnya.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tajuk */ text-align: center;
height: 24px; /* Tinggi Kotak Tajuk */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna Border Kotak Tajuk */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */
font-weight: 900;
color: #000; /* Warna Tulisan Kotak Tajuk */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFF66; /* Warna Background Kotak Tajuk */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */
overflow: hidden;
background-color: #FFFF66; /* Warna Background Kotak Isi */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

3. Lihat keterangan pada tulisan berwarna merah. Just tukar tulisan yang berwarna biru. Untuk kode warna boleh dapatkan DiSINI

4. Seterusnya tambahkan kode berikut sebelum kode </head>

<script src='http://www.geocities.com/almansuqie08/tabview.js' type='text/javascript'/>

5. Cukup untuk bahagian ini. Klik Save Template.

6. Seterusnya pergi ke Page Elements => Add Gadget => HTML/Javascript dan tambahkan script dibawah.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 1.1">Tajuk Isi 1.1</a></li>
<li><a href="Url Isi 1.2">Tajuk Isi 1.2</a></li>
<li><a href="Url Isi 1.3">Tajuk Isi 1.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 2.1">Tajuk Isi 2.1</a></li>
<li><a href="Url Isi 2.2">Tajuk Isi 2.2</a></li>
<li><a href="Url Isi 2.3">Tajuk Isi 2.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 3.1">Tajuk Isi 3.1</a></li>
<li><a href="Url Isi 3.2">Tajuk Isi 3.2</a></li>
<li><a href="Url Isi 3.3">Tajuk Isi 3.3</a></li>
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

7. Lihat kode2 diatas.
#Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
#Text yang berwarna Merah Adalah text bagi kotak tajuk.
#Text yang berwarna Ungu adalah isi menu ini. Antum boleh isikannya dengan link, gambar, banner, script dll.
# Untuk menambahkan jumlah menu just copy text yang kelip2 tu dan tambahkan dibawahnya.

Ok. Selamat Mencuba

Membuat Horizontal Link List/Label

Hari ini nak kongsi dengan Antum cara nak jimatkan ruang sidebar kita dengan membuat "Horizontal Link List/Label". Tau kan rupanya?? Macam gambar dibawah. Jom layan..

1. Loggin ke Blogger => Layout => Edit HTML. Cari kode dibawah.

.sidebar ul {
display:inline;
}

.sidebar li{
display:inline;
}

2.Kekadang ade kode yang digabungkan terus macam ni.

.sidebar ul li {
display:inline;
}

3. Tambah kode warna merah tu yer.. Cara ini akan terkesan untuk semua link list termasuk Archive dan Label.

Ok sekarang kita nak khususkan untuk satu2 link saja.. (Abaikan yang diatas sekiranya Antum memilih cara dibawah).

1. Pertama untuk link list. Cari kode dibawah.

<b:widget id='LinkList2' locked='false' title='My Blogs' type='LinkList'>

Text merah tidak semestinya dalam tulisan diatas.. Kekadang rupa lain yer.. Kalau nak senang, tengok tajuk link yang kita tulis di sidebar tu, contoh yang color biru tu.. Dah jumpa tambahkan kode merah dibawah dalam bahagian sidebar.

/* Sidebar Content */

#LinkList2 li{
display:inline;
}

2. Ini untuk Label pulak..Antum cari guna cara sebelum ni..sama je.. kenalpasti dah tambahkan di bahagian sidebar.

/* Sidebar Content */

#Label1 li{
display:inline;
}

Ok Siap..Alhamdulillah

Cara Membuat Text Area

Text Area ni kita buat untuk isikan link blog kita. Kira kalau kawan2 atau sesape yang nak 'link'kan blog kita boleh terus copy kode yang telah disediakan.Contoh macam ana buat ni... Caranya sangat mudah..

<a href="http://almansuqie-tips.blogspot.com"><img border="0" width="90" src="http://i302.photobucket.com/albums/nn113/aburifaie/startips.gif" height="17" /></a>

1. Layout => Add Gadget => HTML/Javascript dan tambahkan dengan kode dibawah.

<center><textarea rows="5" cols="20" name="textarea"><a href="http://almansuqie-tips.blogspot.com"><img border="0" width="90" src="http://i302.photobucket.com/albums/nn113/aburifaie/startips.gif" height="17"/></a></textarea></center>

2. Tukarkan text biru dengan alamat blog Antum dan text ungu dengan alamat image Antum. Nombor2 yang merah tu tukarla mengikut kesesuaian blog Antum..

Membuat Artikel Yang Berkaitan

Tujuan memasang "Related Post" atau artikel yang berkaitan ini adalah bagi memudahkan pembaca untuk mendapatkan sebarang maklumat yang berkaitan dengan artikel sebelumnya. Related Post ini akan berada di bawah posting. Contoh seperti di bawah posting ini. Kaitan artikel adalah berdasarkan pada Kategori atau label yang sama. Ok, ini cara membuatnya.

1. Login ke blogger => Layout =>Edit HTML.Tandakan pada kotak "Expand Widgets Template". Kemudian buka "SCRIPT INI"dan copy semua script yang ada didalamnya.

2. Kemudian cari kode ini <data:post.body/> dan letakkan script tadi dibawahnya. Terdapat dua kode yang sama seperti ini bagi template yang sudah ditambah dengan "Read More". Jadi tambahkan script tadi dibawah kode yang pertama.

3. Klik save dan lihat hasilnya.

Kalau nak tukar tajuk "Related Posts by Categories". Sila ke Edit HTML semula dan cari tajuk tersebut. Jangan lupa tanda kotak Expand Widgets dulu, kalau tidak tak jumpa la. Ok siap.