Sunday 21 August 2011

Meletak meta tag

Cam expert je aku citer pasal meta tags nie hehehe..SEO pun sampai skang aku tak paham hehe.Aku dh lama letakkan meta tags dalam blog aku ni...disebabkan takde idea nk update blog so buat tutorial ni je lah ehehe...ada gak update

Erm meta tags tu utk tunjukkan info dan maklumat tentang website kita..so bila kita search kt google dia akan tunjuk mcm pic kt bawah ni...definasi ni aku main balun je..ops..balun tu org kedah ckp..maksud dia cincai or hentam hehe

KJ.jpg

Meta tags yg aku letakkan "Kumbang Jingga menulis dengan hati dan akal bukan dengan nafsu"

Ni plak contoh meta tags yg di letakkan Fatin Liyana..blog feveret aku hehe

FL-1.jpg

Kalau tak letak meta tags query akan tunjuk deskription ikut first entry atau content dalam blog kita..even blogger2 yang femes ada tak letakkan meta tags but still femes sbb dorang guna meta tags muka yang comel hehehe..tgnk contoh kt bawah

ben.jpg

Eh ben ashaari comel ke hikhikhik.silap contoh plak hehe...

So ni cara2 nk letakkan meta tags

1.Sign in to your blogger dashboard>click the 'layout' button[see the screenshot below]
click on the 'layout' link
2.Click on the 'Edit html' tab
click on the 'edit html' tab


Here is the code you have to add

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>


DESCRIPTION HERE:Write your blog description
KEYWORDS:Write the keywords of your blog
AUTHOR NAME:Write the author's name(Your name)


{ UPDATE : }
Now..You don't need to do it manually.. I created an automatic Meta Tags Generator to make this process easy for you!
Just go to this page and Enter some basic information like keywords,description,etc.. It will automatically generate you error free, effective Meta tags. Once done, copy that code and follow the next step.

3.Add the above code just after this [Look at the below screenshot]
<b:include data='blog' name='all-head-content'/>




add the code just like this
Don't forget to add description and keywords.

Monday 15 August 2011

Cara meletak meta tag

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>

Saturday 13 August 2011

Senarai pengiklanan percuma

1 . http://ceria.biz
2 . http://iklanpercuma-1malaysia.com/
3 . http://hotiklan.com
4 . http://iklandirectory.blogspot.com
5 . http://iklan-percuma-portal.com
6 . http://iklanpromosipercuma.com
7 . http://iklan-tunai.com
8 . http://msiaguide.com
9 . http://nakiklan.com
10 . http://rakaniaga.net
11 . http://www.adoos.com.my
12 . http://www.adparadise.com
13 . http://www.adpost.com
14 . http://www.adspercuma.com
15 . http://www.asia-classified.com
16 . http://www.blazoom.com
17 . http://www.buysell.com.my
18 . http://www.caribiz.net
19 . http://www.classified.cari.com.my
20 . http://www.classifiedsforfree.com
21 . http://www.disini.net
22 . http://www.e-iklan.net
23 . http://www.e-iklan.net
24 . http://www.freeadvertisingexchange.com
25 . http://www.freeiklanpercuma.com
26 . http://www.iklan.arenabiz.net
27 . http://www.iklan.com.my
28 . http://www.iklan.zoomshare.com
29 . http://www.iklan101.com
30 . http://www.iklan4all.com
31 . http://www.iklananda.biz
32 . http://www.iklancafe.com
33 . http://www.iklancafe.com
34 . http://www.iklancafe.com
35 . http://www.iklancenter.com
36 . http://www.iklancyber.net
37 . http://www.iklandirectory.com
38 . http://www.iklanfree.com
39 . http://www.iklan-free.com
40 . http://www.iklanfree2u.com
41 . http://www.iklaniaga.com
42 . http://www.iklanmalaysia.biz
43 . http://www.iklanmalaysia.net
44 . http://www.iklanmesra.net
45 . http://www.iklanpercuma.com
46 . http://www.iklan-percuma.info
47 . http://www.iklanpercuma.org
48 . http://www.iklanpercuma2u.com
49 . http://www.iklan-percuma-online.co.cc
50 . http://www.iklanportal.net
51 . http://www.iklanpower4u.com
52 . http://www.iklansesamainsan.com
53 . http://www.iklanx.com
54 . http://www.jomiklan2u.com
55 . http://www.koleksipercuma.com
56 . http://www.kreatifads.com
57 . http://www.lamaniklan.com
58 . http://www.mesti.my
59 . http://www.mudah2u.com
60 . http://www.promosi4u.com
61 . http://www.promosi4u.com
62 . http://www.promosipanas.com
63 . http://www.ruangiklan.com
64 . http://www.sheryna.com.my
65 . http://www.sheryna.com.my
66 . http://www.webportal.com.my/classifieds
67 . http://www.yello.com.my

Friday 12 August 2011

Merapikan widget

Merapikan Letak Widget Sidebar di Blogspot /Blogger

Written By Pikpak News on Selasa, 09 Agustus 2011 | 8/09/2011

Nah tidak perlu panjang lebar ikuti saja langkah langkah berikut:
1. Seperti biasa sobat blogger mania harus Login ke blog sobat dulu
2. Terus masuk ke Tata Letak (Rancangan) lalu pilih Elemen Laman
3. Buka Widget yang akan diatur posisi letaknya
4. Tambahkan script ini diatas kode/script widget sobat :
<table border="0" cellpadding="3" width="175"><tbody><tr>
<td align="center">
 

5. Tambahkan script ini dibawah kode/script widget sobat :

</td>
</tr>
</tbody></table>

 
KETERANGAN : * kode  biru bisa sobat ganti sesuai ukuran sidebar blog
                               * kode warna merah bisa sobat ganti sesuai keinginan sobat
                               * kode warna pink bisa sobat ganti sesuai keinginan sobat dengan kode left atau right
dibawah ini contoh hasil scriptnya :

<table border="0" cellpadding="3" width="175"><tbody><tr>
<td align="center">

</div>
<div class="Pages" style="width: 120px; height: 275px;">
<div class="Page">
<div class="Pad">
<a href="http://www.alexa.com/siteinfo/fajar7siblings.blogspot.com"><script type='text/javascript' language='javascript' src='http://xslt.alexa.com/site_stats/js/s/b?url=fajar7siblings.blogspot.com'></script>

</td>
</tr>
</tbody></table>

Center widget di side bar

Center widget di Sidebar

Cara nak justify or center widget di sidebar
memang senang pada aku ah ye…
Ini yang senang dan ringkas to me
<b:widget id=’BlogList1′ locked=’false’ title=” type=’BlogList’/>
<b:widget id=’HTML2‘ locked=’false’ title=’Laman Pilihan’ type=’HTML’/>
<b:widget id=’Text3′ locked=’false’ title=’Hadis’ type=’Text’/>
me pilih HTML untuk di centerkan
1) cari kod ini ]]></b:skin> dan tambah di atasnye
#HTML1 {
text-align: center;
}
#HTML2 {
text-align: center;
}
#HTML3 {
text-align: center;
}

Membuat widget berada ditengah2 side bar

Hari ni aku nak share dengan korang, macam mana nak centerkan widget2 yang korang letakkan kat sidebar blog korang. Sebab bukan semua widget yang korang ambil kat internet or blog milik blogger lain tu akan berada di tengah2 sidebar kan.


Apa yang korang perlu buat hanyalah letakkan coding <center> di awal coding kod yang korang ambil kat internet or blog & letakkan coding </center> dihujung coding kod. Kira <center> ni coding pembuka & </center> coding penutup lah gitu.

Contoh:

<center><a href="http://bighandesign.blogspot.com" target="_blank"><img src="http://i102.photobucket.com/albums/m91/seantromer/icon_putrajaya.png" border="0" alt="bighandesign" ></a></center>


Okay, korang juga boleh menggunakan code ini untuk membuatkan widget korang berada di tengah-tengah. Ianya simple & mudah untuk dipraktikkan.

<div style='text-align:center;'>Letakkan Code Widget Anda Di Sini</div>

Cara letak banner iklan

Cara letak banner iklan


Mungkin pada permulaan membuat Blog anda cuma suka suka sahaja.tapi bila dah lama dan ramai pengunjung mungkin teringin juga nak letakkan iklan.Mula mula nuffnang lepas tu letakkan iklan sendiri dapat la juga kos untuk bayar domain hosting atau lain lain perbelanjaan.

Kali ini saya ingin tunjukkan bagaimana hendak memasukkan banner iklan.Ia boleh diletakkan dimana mana kerana anda anda cuma perlu masukkan pada widget sahaja.oklah...berikut ini adalah cara bagaimana  nak letakkan banner bersaiz 125X125 pada blog anda.

Dibawah adalah kod yang perlu anda copy dan paste pada HTML/Javascript widget.

<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center><a href="LETAK URL PENGIKLAN" rel="nofollow"><img border="0" alt="LETAK MAKLUMAT IKLAN" width="125" src="LETAK URL  BANNER DISINI" height="125"/></a></center></td>
<td><center><a href="LETAK URL PENGIKLAN" rel="nofollow"><img border="0" alt="LETAK MAKLUMAT IKLAN" width="125" src="LETAK URL BANNER DISINI" height="125"/></a></center></td>
</tr>
<tr>
<td><center><a href="LETAK URL PENGIKLAN" rel="nofollow"><img border="0" alt="LETAK MAKLUMAT IKLAN" width="125" src="LETAK URL BANNER DISINI" height="125"/></a></center></td>
<td><center><a href="LETAK URL PENGIKLAN" rel="nofollow"><img border="0" alt="LETAK MAKLUMAT IKLAN" width="125" src="LETAK URL BANNER DISINI" height="125"/></a></center></td>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="LETAK URL PENGIKLAN" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="LETAK URL BANNER DISINI" /></a></center></td>
      </tr>

    </tbody></table>

Jika hendak menjarakkan ruangan diantara iklan tadi ubah width="265".Saiz asal minimum adalah  265,dan anda boleh besarkan lagi saiznya.
Nota:Jika ingin menambah lagi misalnya kepada 6 iklan tambahkan lagi kod berikut dibawah 
 </tbody></table>

 <tr>
<td><center><a href="LETAK URL PENGIKLAN" rel="nofollow"><img border="0" alt="LETAK MAKLUMAT IKLAN" width="125" src="LETAK URL  BANNER DISINI" height="125"/></a></center></td>
<td><center><a href="LETAK URL PENGIKLAN" rel="nofollow"><img border="0" alt="LETAK MAKLUMAT IKLAN" width="125" src="LETAK URL  BANNER DISINI" height="125"/></a></center></td>
</tr>

Letak tajuk widget ditengah dan color

Cara letak tajuk widget ditengah dan letak warna latarbelakang

Entri saya kali ini adalah cara bagaimana hendak meletakkan tajuk pada widget sidebar ditengah tengah ,kebiasaannya berada disebelah kiri dan juga meletak warna latar belakang agar nampak lebih mantap dan ceria.Selalunya template dari blogger warna latar belakang title adalah sama dengan background lainlah kalau template yang didownload dari web yang dah siap diwarnakan.Untuk meletak warna pada latar belakang widget pula boleh dirujuk pada artikel ini.
letak warna pada widget title

Untuk tajuk pada template biasanya bermula dengan kod h1,h2…dan sebagainya.untuk meletak warna latar belakang dan teks agar berada ditengah(center) kita cuma perlu tambah kod dibawahnya:
Masuk kedesign—edit HTML cari kod h2 ditemplate seperti dibawah:
Gunakan Ctrl+F untuk find
h2 {
background-color:#AEB404;
text-align: center;
}
*teks berwarna merah adalah kod yang ditambah
kod warna dengan teks hijau boleh ditukar dengan kod yang dinginkan.

kemudian seperti biasa preview dan save template.

Letak bacground pada tajuk post

>Cara letak background pada tajuk posting

4 Comments
>
Menghias blog tentunya menjadi kemestian kerana semua org nak cantikkan blog.Tujuan blog ini pun adalah bagi membolehkan rakan rakan mendapat sumber rujukan bagi membuat berbagai bagai perubahan pada template asal  dari blogger yang kita ketahui cuma dengan paparan yang terhad sahaja.Perubahan yang dibuat tentunya perlu mengambil kira keselesaan pengunjung.Kalau ada komen yang dibuat kita perlu ambil perhatian,kerana apa yang kita suka belum tentu org lain suka.
posting background
Untuk meletakkan background pada tajuk posting,tentunya seperti  biasa kita perlu sediakan imej terlebih dahulu.sesudah diupload dan dapat url untuk imej:
masuk ke design-edit HTML-expand widget templates
dan cari kod ini
.post h3 {
atau sesetengah template kodnya begini
h3.post-title, .comments h4 {
contoh kod asal pada template (sesetengah template berbeza)
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:150%;
  font-weight:normal;
  line-height:1.4em;
  }
tambahkan kod seperti dibawah
.post h3 {
 background: url(letak url imej disini);
 -moz-border-radius: 10px 10px;
 border-radius: 10px 10px;
 height:55px;
 text-align:center;
 margin:.25em 0 0;
 padding:0 0 4px;
 font-size:150%;
 font-weight:normal;
 line-height:1.4em;
 }
#kod warna hijau jika hendak bahagian hujung background melengkung.Jika hendakkan lengkung hanya pada bahagian tertentu ubah saja nilainya disini.
ketinggian imej boleh diubah pada height:55px,tukarkan  kepada nilai yang bersesuaian
kemudian preview dan akhir sekali save template .

Membuat scroll pada post

Membuat scroll bar pada di posting


Untuk menyiasati isi blog yang terlalu panjang maka diperlukanlah scroll bar untuk lebih menghemat tempat. Berikut adalah kode untuk memodifikasi posting Anda dengan scroll bar:


<div style="overflow:auto;width:200px;height:200px;padding:10px;border:1px solid #eee">

DISINI ADALAH KODE YANG MENJADI ISI SCROLL BAR(KODE POSTING ANDA)

</div>

kode width menentukan lebar scroll bar, dank ode hight untuk mengubah panjang  scroll bar.

Mudah bukan????

Membuat scroll pada related post

Membuat Scroll pada Related Post

embuat Scroll pada Related Post
Related post adalah salah satu widget yang pernah ditulis di blog ini sebgai widget yang sebaiknya ada di blog. Karena memiliki fungsi atau manfaat yang besar untuk blog maupun pembaca. Bagi pembaca akan mempermudah untuk mengetahui atau menelusuri tulisan yang terkait dengan yang sedang dibacanya. Kemudian bagi blog bisa membuat lebih banyak page view.

Related post yang ada di blogger.com atau blogspot yaitu related post yang didasarkan pada label. Jika dalam satu label itu banyak tulisan. Misalnya ada label Blogging ada 25 post makan saat kita membaca salah postingan akan ada 24 judul yang terkait yang ada dibawahnya, ini menyebabkan menyita banyak tempat. Oleh sebab itulah perlu kita membuat scroll pada related post.

Cara Membuat Scroll pada Related Post
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode <p><data:post.body/></p>
6. Taruh (copy paste) kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>  <H2>Artikel Terkait:</H2> <DIV class='rbbox'>  <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <DIV id='albri'/> <SCRIPT type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?  json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t);  a.appendChild(txt); li.appendChild(a); ul.appendChild(li);  } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) {  labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ?  labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </SCRIPT> </DIV> <script type="text/javascript">RelPost();</script> </DIV> </b:if><br />

7. Cari kode ]]></b:skin> dan taruh kode berikut di atasnya

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

8. Cari kode </head> dan taruh kode berikut di atasnya

<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>

9. Simpan Template jika sudah selesai.

Cara melebarkan halaman blog

Cara melebarkan Halaman Blog

Asalammualaikom wr wb....salam Blogger mania.OK....!!!Jika Anda bertanya-tanya soal permasalahan untuk melebarkan halaman Blogger Baik di sini saya akan memberikan Tutornya.Dulu mah we sama seperti kalian,Masalah ni butuh be jam-jam untuk mencarinya.heeheehee....!!!! maklom masih newbie.Sebaiknya kita langsung aja ke titik permasalahannya.di simak ych tutornya.
1. Anda Login  Blogger Anda dulu
2. Langsung menuju Rancangan  klik Edit HTML
3. Cari code #outer-wrapper {
#outer-wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: left;
    width: 1000px;

Biar kalian mudah untuk mencarinya pencet Ctrl + F .Jika sudeh ketemu. Lihat code seperti ini width: 960px; Nah yang berwarna merah adalah lebar Halaman Blogger Kalian.Tinggalkalian Ubah sesuai yang kalian ingin kan.Kalau belom paham.Coment aja permasalahannya.Ok...!!! sampai di sini aja pembahasannya.Selamat mencoba....!!!
Seperti ini:
#outer-wrapper {
background: none repeat scroll 0 0 #FFFFFF;
font: 110% Arial,Serif;
margin: 0 auto;
text-align: left;
width: 1000px;
Keterangan :
1. Warna Hijau itu code warna halaman Blogger kalian. Bisa anda ubah sesuai Code warna yang kalian iginkan
2. Warna Merah adalah Lebar Halaman Blogger anda.Bisa di Ubah sesuai yang kalian inginkan.

Menyusun imej pada side bar

cara menyusun imej pada sidebar

Saya ada menerima pertanyaan dari rakan rakan blogger bagaimana nak buat susunan pada blog agar Nampak kemas dan tersusun. .Misalnya kita membuat tukar link tapi bannernya tidak sama saiz  dan jika diletakkan sampai ada yang terkeluar dari sidebar.Bila keadaan jadi mcm ni tentunya sukar untuk kita menyusunnya. dan sudah tentu nampak tak kemas kerana ada yg ketepi dan ketengah.Jadi bagaimana kita hendak membuatnya supaya sama saiz.

Jadi disini saya ingin berkongsi bagaimana hendak menyusun imej pada sidebar agar saiznya sama lebar dan sama tingginya
Contoh Keadaan  susunan pada sidebar seperti dibawah .bahagian penghujung tidak sama dan sebaris sahaja.



Sebenarnya boleh jimat ruang lagi dengan buat cara berikut;
Contoh ini bila kita nak letak button macam diatas biasa kita akan dapat kod seperti ini:

 <!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" /></a><!-- End Backlink Code -->

Kita Cuma perlu tambah kod untuk tinggi(height) dan  lebar(width) seperti ini:

<!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a><!-- End Backlink Code -->

Border “0” bermakna tiada border ,boleh letak nilai jika hendak letak border disekeliling

Supaya kedudukanya berada ditengah tengah tambahkan kod  seperti ini:

<center>
<!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a><!-- End Backlink Code -->
Untuk kod button /imej seterusnya letak disini…
………….
…………
</center>

Untuk letak dua baris kena sesuaikan lebarnya sahaja.Bila ruang dan saiz kena akan jadi baris seterusnya.Bila terlalu panjang akan ia akan turun kebawah.

Supaya nampak tersusun lagi letaklah dalam border:

 <div style="width: 140px; height: 220px; border: 1px solid;  padding: 2px; margin: 5px 0pt 0pt;">

Letak kod untuk imej disini

</div>


atau pun buat table disekelilingnya.Cara membuatnya ada saya terangkan dalam tutorial sebelum ini.

Atau boleh juga guna garisan seperti  dibawah ini untuk memisahkan kandungan pada sidebar
Dengan menggunakan kod ini:

<hr color=”#AC58FA”/>

Menghapuskan broken link

menghapus broken link dari blog

Mungkin korang ada menghapus artikel dari blog korang.Tetapi halaman itu sebenarnya masih  terindeks pada google.Hal yang sebegini akan menyebabkan terjadinya broken link.Broken link bermaksud pautan  tidak sah,rosak atau link mati Broken link pada laman blog atau web boleh menurunkan page rank dan juga hasil carian pada google.Selain dari itu juga broken link juga wujud pada komen pengunjung yang mana tidak mengkemaskinikan profail masing masing pada blog.


Untuk menghapusnya:

1.Buka laman google webmaster tools.Jika belum ada akaun google,daftarlah terlebih dahulu.
2.Pada dashboard pilih add a site.masukkan alamat blog korang disini hingga proses verifikasi selesai.abaikan jika sudah memasukkan blog sebelumnya.
3.Bila sudah dimasukkan nama blog akan muncul dibahagian bawah.Klik pada nama blog.
add a site

4.Kemudian muncul paparan dashboard blog disini.
5,Pada sebelah kiri menudashboard pilih Diagnostics--crawl errors-disini kita boleh lihat error yang ada pada blog


6.untuk menghapus nya,klik pada site configuration--crawler access-remove url-new removal request

7.masukkan link yang hendak dihapus--pilih opsyen pertama disini -tandakan pada The page returns a 404/410 ...  dan klik submit request
8.Link akan dihapuskan beberapa hari selepas itu.
#Bagi komen yang mempunyai broken link,terpaksalah di delete.Saya gunakan link checker di http://www.web-site-map.com/broken-links.php bagi mencari broken link .

Mengubah tajuk pada side bar dengan imej

Mengubah tajuk pada sidebar dengan imej

letak tajuk widget
Kebiasaannya tajuk pada sidebar blog adalah menggunakan teks.Entri kali ini adalah cara bagaimana kita boleh gantikan teks tersebut dengan imej ,yang mana lebih banyak pilihan teks yang boleh kita letakkan dan nampak lebih menarik lagi.Kita juga boleh reka bentuk tajuk widget  dengan paparan yg kita kehendakki dan tidak hanya bergantung dengan apa yang ada pada template semata mata.
Bagi membuatnya:

1.Masuk ke design--->>edit HTML--->>klik pada “expand template widget “
2.Sebagai contoh saya nak tukar tajuk Buku Tamu ,jadi saya cari judul widget Buku Tamu pada template. saya taip tajuk  Buku tamu pada kotak find(Ctrl+F) dan akan jumpa  kod seperti dibawah:

 <b:widget id='HTML2' locked='false' title='Buku Tamu' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

3.Untuk meletak imej sebagai tajuk widget,pertama sekali kita perlu buat tajuk dengan tulisan dan latarbelakang yang kita kehendakki,kemudian upload imej ke Photobucket kemudian  gantikan kod warna oren pada kod diatas :

<data:title/>

4.Gantikan dengan kod alamat gambar yg kita upload tadi:

<img src="letak url imej disini" />

 contoh :

<img src="http://i219.photobucket.com/albums/cc282/code_bg.gif "/>

Kemudian  klik pada preview untuk melihat hasilnya
Jika tiada apa apa error klik save template.

Nota:
Untuk upload gambar boleh gunakan photobucket,tinypic .Untuk membuat corak teks pula boleh gunakan flamingtext atau cooltext.

Membuat table pada atrikel

Membuat table pada artikel

Mungkin pada masa membuat artikel kita perlu membuat jadual bagi memasukkan butir butir tertentu agar nampak lebih tersusun.Dengan cara ini artikel Nampak lebih kemas dan menarik.Berikut adalah cara bagaimana hendak membuat jadual.
Caranya amat mudah cuma perlu memasukkan sedikit kod..

Jadual(table) satu ruang(column):

Nama
 <table border="1"><tr><td>Nama></td></tr></table>
Dua column

NamaAlamat
 <table border="1" width="200">
<tr><td>Nama</td><td>Alamat</td></tr>
</table>
Tiga column dan tiga baris

NamaAlamatUmur
AliKedah23
AhmadPerlis24
Anuarperak25

<table border="1" width="300">
<tr bgcolor ="#E0F8E0">
<td align="center">
<b>Nama</b></td><td align="center"><b>Alamat</b></td><td align="center"><b>Umur</b></td>
</tr><tr><td align="center">Ali</td><td align="center">Kedah</td><td align="center">23</td></tr>
<tr><td align="center">Ahmad</td><td align="center">Perlis</td><td align="center">24</td></tr>
<tr><td align="center">Anuar</td><td align="center">perak</td><td align="center">25</td></tr>
<tr><td align="center">Abu</td><td align="center">Pahang</td><td align="center">26</td></tr>
</table>

Selamat mencuba.

Cara letak scroll pada widget

cara letak scroll pada widget

 Penggunaan scroll pada widget  adalah  dengan tujuan supaya senarai yang dipaparkan akan lebih kemas dan tidak menggunakan ruang yang banyak.contohnya widget labels dan archives akan jadi memanjang kebawah bila sudah terdapat banyak posting.bagaimana pun bagi widget Archives pula terdapat pilihan bagi memaparkan secara dropdown menu bagi menjimatkan ruangan.Bagi tutorial ini saya terangkan cara bagaimana untuk meletakkan scroll pada labels.

Untuk meletakkan scroll pada label,terlebih dahulu dapatkan widget id:

Caranya masuk ke design-edit html --..gunakan ctrl+f  untuk memudahkan pencarian taipkanLabels (tajuk widget pada sidebar). kemudian muncul kod seperti dibawah

<b:widget id='Label1' locked='false' title='Labels' type='Label'/> (title disini adalah tajuk widget yg kita letak pada sidebar)

widget id bagi labels ialah Label1

salin kod dibawah
#Label1{
height:180px;
overflow:auto;
}
dan letakkan diatas kod
 ]]></b:template-skin>
Bagi widget lain cuma perlu tukar pada widget id sahaja pada kod diatas.Jika scroll tidak muncul adalah disebabkan senarai tersebut adalah pendek dan kod diatas diletakkan height1 80px jadi akan muncul hanya setelah mencapai ketinggian 180px atau ubah sahaja ketinggian tersebut.

kemudian save template

Cara pasang menu scroll

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 design-->>Page elements
2.Kemudian pilih add gadget--->>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.

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.

Mencari sebab blog lambat dibuka

mencari sebab blog lambat dibuka

slow loading
Tentunya setiap orang inginkan blog yang loading nya lebih cepat.Loading yang lambat akan menyebabkan pengunjung meningggalkan blog anda ,kerana sifat manusia memang tidak suka menunggu.Untuk artikel kali ini saya ingin berkongsi cara mengenal pasti dimana penyebab loading blog kita menjadi lambat.Blog yang laju juga adalah salah satu faktor yang akan menentukan kedudukan pada ranking google.
Bila kita membuka blog (semasa proses loading) ia akan mengambil data dalaman dan data luaran.Data dalaman adalah seperti yang dimasukkan pada template dan data luaran adalah fail fail seperti imej ,javascript yang dihostkan pada lokasi lain.Untuk data luaran ini akan menyebabkan blog jadi lambat dan kadang kala gagal dibuka sama sekali.
Bagaimana kita nak mempastikan bahagian mana yang lambat jika banyak data luaran yang diambil ?.
Pada masa mula membuka blog anda perhatikan pada status bar sepeti dibawah ini.

status bar
Secara logiknya bahagian mana yang lama untuk loading bermakna bahagian tersebut berat dan perlu hapuskan jika ingin loading yang laju.

Untuk melihat lebih terperinci bahagian mana yang lambat boleh gunakan tool yang terdapat pada tools.pingdom.com

 dari geraf yang terdapat seperti pada imej diatas kita boleh melihat bahagian mana yang lambat.

Ucapan meninggalkan blog

Kedatangan pengunjung keblog kita merupakan sesuatu yang diharapkan para blogger.Sebagai menghargainya, bolehlah kita letakkan ucapan  yang akan terpapar bila pengunjung hendak meninggalkan blog kita.

ucapan blog

Dibawah ini adalah cara membuatnya.

Masuk kedesign terlebih dahulu
Klik pada edit Html dan cari kod </head> pada template

Kemudian masukkan kod dibawah ini selepas kod </head>
<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39; Terima Kasih kerana berkunjung,sila datang lagi.. &#39;);
}
parent.window.onunload=goodbye;
</script>
Gantikan teks berwarna hijau dengan teks yang anda inginkan
Dan seterusnya  klik save template.

Membuat textarea

Text area adalah ruangan bagi kita memasukkan kod html,javascript dan lain lain teks agar mudah bagi pengunjung menyalin dan nampak lebih kemas dan tersusun posting kita Untuk   membuat text area copy text dibawah ini:

Text area biasa:

<p align="center"><textarea name="code" rows="6" cols="20"> masukan kod kod yang anda inginkan di sini, tulisan anda akan tampil di dalam text area </textarea></p>

Hasilnya:


Cols="20" bermaksud lebar ruangan
Rows="6" bermaksud tinggi text area
untuk mengubah saiz nombor tadi perlu lah diedit mengikut kemahuan kita.

Kotak text area dengan butang Highlight all.


Untuk text area begini pengunjung cuma perlu tekan butang Hightlight all dan copy untuk menyalin kod dalam text area tadi .

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="10">masukkan kod atau tulisan anda di sini,text atau kod yang anda tulis akan muncul di sini boleh di copy oleh para pengunjung</textarea></p></div></form>

Hasilnya:
Stumble
Delicious
Technorati
Twitter
Digg
Facebook
Yahoo
Feed

Letak image pada side bar

Line Images Pada Sidebar

25011432H
Salam. InsyaAllah, hari ini penulis akan membuat post tentang cara untuk membuat Line Image Pada Sidebar. Sebelum ini, penulis hanya mengajar cara untuk membuat Footer Notes atau Line Images pada entri post sahaja. Tutorial ini telah direquest oleh be'ah.

1.DASHBOARD > DESIGN > EDIT HTML.

2. Cari kod di bawah ini.
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

3. Tambahkan kod di bawah ini di bawah kod tadi.
.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(your image url);
background-position: bottom;
background-repeat: no-repeat;
}

Buat border melengkung pada widget


Tutorial Border Melengkung Pada Sidebar | Moz Border

Posted on by
Kali ini request dari miza yusof dan kak diana yang nak belajar macam mana cara nak buat border melengkung pada border sidebar. Tapi code yang cik tom akan ajar ni bukan hanya boleh apply pada sidebar je, korang boleh jugak letak border melengkung pada post entry, title sidebar, title entry, blockquote dan mana-mana korang rasa nak letak. Border melengkung ni dapat di view dari browser mozilla firefox dan juga chrome.

border melengkung jenis moz border
STEP 1
First step ialah backup dahulu template korang sebagai langkah berjaga-jaga tapi kalau rasa yakin tak payahlah;
DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE
STEP 2
Klik “CTRL+F” ataupun “F3″ untuk cari code ni;

.sidebar .widget{ 

STEP 3
Masukkan code di bawah selepas code .sidebar .widget{

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:4px solid #D41A1F;
 
Contoh coding;

.sidebar .widget{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:4px solid #D41A1F;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px}

**bagi border lengkung pada post entry sila copy code selepas .post{
**nombor 1opx tue korang boleh ubah sesedap rasa.
**setiap blog maybe berlainan coding. Bagi yang berlainan code, cuba cari perkataan sidebar dan cuba masukkan code dalam step 3 tue ye. Try and error.

STEP 4  Preview dan save kalau tiada error pada coding. Selamat mencuba. Kalau ada masalah or pembaharuan, cik tom akan update dalam entry ni ye.

Cara letak background dan border pada side bar

Kebiasaanya warna ruangan posting dan sidebar pada template adalah sama.Mungkin ada yang inginkan kelainan dengan meletakkan border dan background yang berbeza pada sidebar.


Berikut adalah caranya:

Masuk ke design-pilih Edit HTML-expand template widgets
cari kod ini:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background-image: url(letakkan url imej disini);
border:12 px dashed #0000FF;
}

jika tiada kod seperti diatas cari kod ini:
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
background:url(letakkan url imej disini)repeat;
border:12 px dashed #0000FF;

}
background imej perlu diupload dan dapatkan url utk dimasukkan pada kod diatas
#cuma tambah kod warna merah.Untuk border selain dari dashed boleh juga ditukar dengan solid,dotted,ridge,groove.Begitu juga dengan kod warna bagi border juga boleh ditukar mengikut kesesuaian.

Membuat column widget dengan table

Sudah gak Asing lagi dengan  3 kolom pada footer, 2 kolom, bahkan 4 kolom, tentunya dengan tips yang beragam pula, Banyak jalan menuju Indonesia, banyak jalan pula untuk membuat kolom pada widget, salah satunya dengan memanfaatkan table yang pembahasannya sudah di singgung pada artikel HTML untuk Table

Seperti biasa saya hanya mengembangkan konsep dasar, untuk itulah mengapa saya sering memposting artikel yang sedikit aneh bahkan beda dari blogger blogger lainnya, karena saya hanya belajar bagaimana menemukan mencari sesuatu yang baru berdasarkan konsep yang sederhana alias konep dasar.

Masih ingat kan dengan pembahasan table, baik saya agak simpel saja sekarang,
 Konsep dasar:
<table border=”1″>
<tr><td>Kolom ke 1</td><td>Kolom Ke 2</td><td>Kolom ke 3</td></tr>
</table>
Hasilnya:
Kolom ke 1 Kolom Ke 2 Kolom ke 3
Berdasarkan konsep tadi mari kita aplikasikan ke dalam template blogger kita, di sini saya aplikasikan untuk membagi Header menjadi beberapa kolom?

Membuat Header Menjadi Tiga Kolom

Berikut contoh kodenya:
<table><tr><td><b:section
class=’header’ id=’header’ maxwidgets=’1′
showaddelement=’no’><b:widget id=’Header1′ locked=’true’
title=’Dunia Blogger (Header)’
type=’Header’/></b:section></td>
<td><b:section class=’header’ id=’heade2′ preferred=’yes’></b:section></td>
<td><b:section class=’header’ id=’heade3′ preferred=’yes’></b:section></td></tr></table>



Silahkan
Pelajari sendiri yah, sesuaikan blok warna pada kode di bawah sesuai
kode paling atas. besar kemungkinan penjelasannya kan ada pada kotak
komentar jadi berkomentar yah:)





Berikut Tampilan Layout yang akan Blogger Tampilkan:


Sedangkan Hasil pada Blognya kurang lebih pada gaambar di bawah ini:








Masing Masing Panah menunjukan Kolom,



Untuk modifikasi ukuran, warna, border, dan lainnya saya sarankan membaca artikel HTML untuk Table , dan Silahkan berexperiment dan jangan takut mencoba.

Untung pantas

LinkWithin