cara buat kod tukar link pada blog

Bagi menaikkan ranking blog kita ,terdapat berbagai yang kita boleh lakukan.salah satu daripadanya adalah dengan saling bertukar link atau link exchange.Oleh itu bertukar tukar link adalah menguntungkan .oleh itu kenapa kita tidak cuba pasang kod tukaran link di blog kita dan bertukar link dengan blogger lain.untuk bertukar link seelok eloknya hendaklah dari kategori yang sama.kalau blog tutorial,tukar lah dengan blog tutorial yang lain.Sekiranya membuat banner utk tukaran link pula,janganlah terlalu besar.Kerana tidak semua blog mempunyai ruang yang besar.

Berikut adalah cara untuk membuatnya:

Pertama sekali kita perlu sediakan banner terlebih dahulu.Boleh gunakan photoshop atau gunakan kemudahan banner online pada internet.Kemudian upload imej tersebut ke Imageshack,Photobucket dan sebagainya.
Setelah upload dapatkan url imej tersebut:

contohnya Url imej adalah seperti ini yang saya upload ke image shack:

<img src=" http://img194.imageshack.us/img194/5621/belajarbuatblog.gif " border="0" alt=" Tutorial Blogspot ">

Bahagian yg berwarna merah adalah alamat imej yg kita upload.Sekarang kita ambil bahagian teks berwarna merah dan letakkan pada kod dibawah.

<a href="http://teknikbuat.blogspot.com" target="_blank"><img src=" http://img194.imageshack.us/img194/5621/belajarbuatblog.gif " border="0" alt=" Tutorial Blogspot "></a>
 

Tukar teks hijau dengan nama blog anda dan biru keterangan berkaiatan imej.Alamat/url imej tadi berada pada teks berwarna merah.
Langkah seterusnya :

1. Login ke Blogger
2. Pilih Tata Letak.
3. Klik Add page element
4. Klik Add Gadget --> pilih yang HTML/Java Script.
5. Kemudian masukkan kode tukaran link di bawah ini :

Kod diatas tadi(yg berrwarna hijau) dimasukkan bersama dengan kod untuk text area(yg akan memaparkan kod untuk tukar link untuk dicopy oleh pengunjung)

<textarea name="code" rows="4" cols="30><a href="http://teknikbuat.blogspot.com" target="_blank"><img src=" http://img194.imageshack.us/img194/5621/belajarbuatblog.gif " border="0" alt=" Tutorial Blogspot "></a>

</textarea>

Hasilnya:

<img src=" http://img194.imageshack.us/img194/5621/belajarbuatblog.gif " border="0" alt=" Tutorial Blogspot "></a><br>

Untuk paparkan imej bersama dengan text area seperti diatas cuma masukkan kod url gambar contoh sperti ini:
<a href="http://jendela-id.blogspot.com/"><img alt="teknik buat blog" src="http://img194.imageshack.us/img194/5621/belajarbuatblog.gif" /></a>
jadi akan muncul imej setelah kod diletakkan

*Masukkan url imej untuk paparkan imej diatas

Kemudian klik save
Selamat mencuba

Cara letak border disekeliling posting

Membuat  border disekeliling posting ini selain dari menambahkan seri pada posting juga sebagai pemisah diantara posting.Pada kebanyakan template sekarang sudah ada border ini.Bagaimanapun template yang berwarna putih jarang jarang menggunakan border terpisah ini.Untuk contohnya boleh dilihat garisan biru disekeliling posting pada blog ini.

Cara membuatnya:

1.Log in ke blogger
2.pilih Design--->>Edit HTML









3.Cari kod ini:

.post {

Lebih mudah gunakan Ctrl + F untuk mencari kod

* diatas adalah kod yang telah ditambah pada template saya.

Kemudian letak kod berikut dibawahnya:

border: 1px solid #000000;

jika inginkan border yang berlainan gunakan kod ini:

border-top: 1px solid #000000; border-bottom: 2px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000;

Border boleh ditukar dari solid kepada dotted,dashed,outset,inset,groove,double dan ridge
Kod: #000000 adalah untuk warna hitam,boleh tukarkan dengan warna yang diinginkan.Begitu juga dengan ketebalan border .
Jika hendak letak warna latar belakang pada posting tambah kan kod berikut pada bahagian bawah kod tadi:

background: #000000;

atau nak letak imej sebagai background masukkan kod ini:

background:url (url image anda disini);

Cuma tukarkan kod warna yang sesuai supaya tampilan lebih menarik


Kemudian save template anda
Selamat mencuba.

cara letak posting lama di halaman pertama

Mungkin dalam banyak posting yang ada pada blog ada posting lama yang ingin kita tampilkan semula pada halaman utama.Posting ini tentunya mendapat sambutan seperti mempunyai jumlah komen yang tinggi dan masih lagi sesuai untuk berada dihalaman utama.Jika ingin meletakkan semula dihalaman pertama berikut adalah caranya.

1.Masuk ke blogger,pada dashboard pilih edit posts .

2.Pada paparan edit posts,pilih posting yang dikehendakki dan klik pada edit.

 

3.Seterusnya pilih post options

4.Kemudian ubah tarikh posting tersebut pada tarikh yang baru.

**kalau nak buat sticky post pun boleh guna cara ini.

membuat jumlah pembaca artikel pada blog

Mungkin anda ingin mengetahui jumlah pengunjung yang membaca atau membuka artikel artikel anda pada setiap hari.Bagaimana kita boleh mengetahui berapa orang yang mengklik artikel yang dibuat?.artikel kali ini akan memperkatakan tentang cara membuat post views counter pada setiap posting anda.Page Hits Counter ini adalah menggunakan khidmat tools secara percuma oleh putchoice.com
 Untuk makluman:
#Buat masa ini widget ini tidak berfungsi#

Untuk membuatnya:

1.Masuk ke blogger.com pilih edit HTML klik pada expand template widget

2.Kemudian cari kod : <div class='post-header-line-1'/>  kalau tiada  cari  kod ini: <data:post.body/>

3.Jika dah jumpa letakkan kod dibawah ini dibawah salah satu kod tadi.Jika ada dua kod,simpan pada kod yang pertama.

Page view dengan imej:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='left'><img src='http://lh5.ggpht.com/_RVpTV2JOOxA/S83xW5Bk2II/AAAAAAAAC2A/_e_UEZTrZ9s/post_views_t4belajarblogger.png'/><b><font size='2'><script src='http://www.putchoice.com/stats.php?p=stats' type='text/javascript'/> <b>Views</b>
</font></b></div></b:if>

* pada Views boleh ditukar dengan perkataan yang dinginkan

4.Seterusnya masukkan kod reciprocal verify  pada pada mana bahagian sidebar blog

 Masuk ke design--Pilih Page elements dan klik pada add a Gadget
 Pilih HTML/Javascript dan masukkan kod ini:

<a href="http://www.putchoice.com/">
<img border="0" src="http://www.putchoice.com/picture.php?type=png" alt="Page Hits Counter"/></a>

4.Kemudian save template anda.

Keluar dari blog anda  dan refresh 3 kali atau keluar masuk blog kali dan paparannya akan muncul

Jika anda anda memasang read more,ia akan terpapar setelah read more di klik.

Update:
5 Feb 2011..gunakan kod dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='hit-counter'>
&lt;a href=&#39;http://csharpdotnetfreak.blogspot.com&#39; rel=&#39;follow&#39;&gt;
<script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> &lt;/a&gt;
</div></b:if>

sumber:
http://csharpdotnetfreak.blogspot.com/

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

3.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://jendela-id.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.

Cara letak ikon disebelah tajuk posting

Penambahan ikon disebelah tajuk posting adalah merupakan satu daya penarik ,selain dari tajuk posting itu sendiri.Bagi tujuan itu gambar yang dimasukkan hendaklah adalah bersaiz 32x32
Untuk membuatnya ikuti  langkah ini:

 Masuk ke design--->> EDIT HTML Kemudian cari kod berikut ini:

.post h3 {

margin:.5em 0;

padding:30px 0px 0px 45px;

font-size:120%;

font-style:italic;

line-height:1.3em;

color:#333;

background:url(letak url gambar disini ) no-repeat left center;}

• kod berwarna hijau ini adalah kod yang perlu ditambah

Jika tidak jumpa kod seperti diatas cuba pula kod ini :

<a expr:href='data:post.url'><data:post.title/></a>

Nota: jika terdapat lebih dari satu kod ini,masukkan pada kod yang pertama.
Letakkan kod url gambar (warna hijau)diantara kod dibawah antara kod seperti ini:

<a expr:href='data:post.url'><img src="url gambar"/>  <data:post.title/></a>

contoh kod pada template

Kemudian preview terlebih dahulu untuk mengetahui tiada apa apa error.
Jika telah berpuas hati  klik save template

Cara buat Link Membesar dan Berubah Warna

Membuat link sebegini adalah merupakan tambahan bagi memberi kelainan pada blog kita.Link akan hanya membesar dan berubah warna apabila pointer mouse dihalakan pada link.Pointer juga boleh diubah kepada bentuk lain,selain dari bentuk asal yang berupa tangan.

Berikut adalah caranya :
1. Login to Blogger kemudian pilih "design"
2. Klik pada "Edit HTML"
3. kemudian cari kod a:link dan a:hover dan gantikan dengan kod dibawah ini :


a:link
{

color:#0000ff;

font-size:10px;

cursor:default;
}

a:hover
{

color:#d2691e;

font-size:19px;

font-style:italic;

cursor:wait;

}

4. Kemudian klik save Template.
 
    Nota:
    warna oren menunjukkan warna link
    warna merah menunjukkan ukuran font
    warna hijau adalah font italic ketika pointer dihalakan pada link
    warna biru menunjukkan style mouse pointer dan boleh ditukar menjadi crosshair, hand, wait,
    move, text dan sebagainya

Menukar jumlah komen pada artikel kepada perkataan

  Pada setiap posting pada kebiasaanya akan memaparkan link dengan jumlah komen(sekiranya ia di aktifkankan) dan terpapar "0 comments" dan jika terdapat 1 komen ia akan memaparkan "1 comments",dimana paparan ini agak kurang menarik seolah olah  mcm menyuruh membuat komen(one comment pun boleh diubah pada kod dibawah.)Perkataan ini boleh juga ditukarkan kepada "Leave your Comment" atau lain perkataan yang kita suka.Berikut adalah cara nya:

1. Pada Design pilih,Edit HTMLdan seterusnya klik kotak “Expand widgets template”
2. Seterusnya cari kod ini:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>

dan tukarkan dengan kod ini:

<b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Leave your comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if> </a> </b:if>

3. Seterusnya cari kod ini:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

dan tukarkan dengan kod ini:

<b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 0'> Leave your comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment: </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments: </b:if> </h4>

Tulisan berwarna putih(bold) boleh ditukarkan dengan perkataan yang diinginkan.
Selamat mencuba.

Mengubah tajuk pada sidebar dengan imej

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.

Menukar perkataan home,older post dan new post pada blog kepada ikon

Kebiasaanya pada bahagian bawah posting sesuatu blog terdapat perkataan home,older post dan new post.Kita boleh lihat pada kebanyakan laman web ikon diletakkan bagi menggantikan perkataan yang mana nampak lebih cantik dan praktikal.Jika anda ingin menukarnya,berikut adalah langkahnya:

1.Masuk ke blogger
2.kemudian pilih design/layout--->>edit html-->> Expand Widget Templates

3. Untuk new post cari kod dibawah:

<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>

4. Tukar perkataan berwarna oren dengan kod dibawah:

<img src="http://roele112.googlepages.com/newer.png"/>

5. Untuk older post  cari kod ini:

<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>

6. tukar perkataan berwarna oren dengan kod dibawah:

<img src="http://roele112.googlepages.com/older.png"/>

7. Untuk home pula cari kod ini:

<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>

8. Tukar perkataan berwarna oren dengan kod dibawah::

<img src="http://roele112.googlepages.com/home.png"/>

9.Kemudian simpan template anda.

Gunakan ctrl+F lebih mudah untuk cari kod.taipkan --newerPageUrl,olderpageUrl dan homepageUrl..sebab setengah template kod agak berbeza sedikit.Jika korang nak tukar ikon yang lain boleh dapatkan pada laman laman web,cuma perlu upload ke photobucket,imageshack dan sebagainya.