Minggu, 14 November 2010

Cara pasang disable right click

Fungsi bagi disable right click adalah bagi melindungi artikel atau imej dari dicopy.Mesej akan keluar jika  right click cuba digunakan.Walaupun ada right click tapi masih boleh dicopy juga kerana ada cara lain yang boleh digunakan. Jadi untuk imej yang dimasukkan eloklah diletak watermark supaya tidak disalah gunakan.

Cara membuatnya:










Masuk kedesign--pilih pagelements
Add a gadget--pilih HTML/javascript
masukkan kod dibawah ini:


<script>
var message="Letak mesej disini";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Gantikan letak mesej disini dengan mesej yang ingin ditampilkan
Kemudian save.

Jumat, 12 November 2010

Cara pasang face book like button

facebook icon
Butang facebook like ini fungsi nya adalah bagi memudahkan pengunjung berkongsi  artikel pada blog dengan rakan rakan di facebook.Butang ini adalah satu cara bagi meningkatkan trafik ke blog kerana facebook adalah web jaringan sosial paling popular waktu ini.Jika ingin memasang butang tersebut pada blog pada dasarnya kod boleh diambil di facebook developer dengan hanya memasukkan beberapa setting dan kod facebook like akan dihasilkan
facebook like




Langkah membuatnya:
Masuk ke design—pilih edit HTML

edit template




tandakan pada Expand template widget
expand template





Kemudian cari kod ini(gunakan Ctrl+F untuk memudahkan pencarian):
find code



<data:post.body/>

Kemudian letak kod dibawah ini selepas  kod diatas
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Perkataan like boleh juga  ditukar pada perkataan lain yang bersesuaian.
Font=selain dari arial  boleh ditukar kepada jenis font lain seperti  lucida,Tahoma,verdana,trebuchet,lucida
Colorscheme= terdapat tiga warna selain dari light iaitu evil dan dark

Kamis, 04 November 2010

Cara memaparkan blog didalam blog

blog dalam blog
Kalau sebelum ini bila membuat review untuk sesuatu blog,kita selalu meletakkan gambar printscreen atau pun link sahaja.Bagaimana kalau kita letakkan terus paparan blog tersebut ke blog kita.Dengan menggunakan iframe halaman blog org lain boleh dimasukkan ke blog kita.Bagaimanapun sebelum memasukkan ke blog kita tentulah dengan keizinan pemilik blog terlebih dahulu. Selain dari itu, juga  iframe juga dapat menampilkan video pada blog .

Berikut adalah kod untuk membuatnya:

<iframe align="left" frameborder="1" scrolling="yes" width="430" height="410" src="URL_Blog" style="border:1px solid #ccc"></iframe>


Keterangan:
Masukkan pada Url_Blog,Url blog yang hendak dipaparkan. 
Align=left ,boleh tukarkan ke right atau center jika hendak frame tersebut kekanan atau tengah.
Width dan height=ubahkan saiz lebar dan tinggi mengikut keperluan.
Pada url blog masukkan url blog yang dikehendakki.




Cara memasang share this post

Share this post adalah terdiri dari dari lapan ikon yang biasa terdapat pada bahagian bawah posting,antaranya ialah Stumble Upon,  Digg, Delicious, Facebook, Yahoo, Technorati Twitter dan rss. ikon tersebut digunakan bagi berkongsi artikel kita dengan mudah,dengan klik sahaja artikel kita akan tersubmit ke social bookmark.Kegunaannya adalah juga adalah bagi meningkatkan pengunjung.
social bookmark




Untuk membuat share this post berbentuk bintang ini::
Masuk ke design—Edit HTML
edit template




tandakan pada expand template widget
expand template





Cari kod ini:
<data:post.body/>
 gunakan ctrl + F untuk find untuk memudahkan pencarian




Dan letak kod ini selepasnya:
<div style='clear:both; '>
<div style='width:55px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzUYyByAIuvKLiP_waE_65RFLh2Cm2nWOiaK5xzGKhd7f0VS7aGDI7PTT5At_wAWRyLnBw1wOTQL9ZAZvGBRFLd_KTFcOCRaFn96NW8AwaqRjZIF_tXTtVqWTeyB9E_x5FrA7eP71gQw/s1600/stumbleupon.png' style='padding:0;margin:0;border:none;'/></a>
</div>

<div style='width:55px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggNln9A7wnC_bT4uFxRDJZk0YRK-ZPLBgtSjK5kY2I84zF9lUs6zlY0Q1j_QADk1qJGzT_5yt4cAL9PJArcUoLA5pGz3KUUVCJE05UOVmu9EIy18KmahL5mn2xxsYN5wGDv-AvdUhliuk/s1600/delicious.png' style='padding:0;margin:0;border:none;'/></a>
</div>

<div style='width:55px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJQTgXLYWwQ_FkI2ziJQkClLKzeK7hiYFi6cudPL3I4kDtEq0Ef9R8F6rg5TsClSAC2GTpCQUMtBWmBgGhBiWj3Kao4Dyo_D6FOmxZp8j7LGuVhZz_3OxSrQGqaqVAmDj2n9HNMz9c4WI/s1600/technorati.png' style='padding:0;margin:0;border:none;'/></a>
</div>

<div style='width:55px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4iCXUdfzudEGXWdlFJYJ_FpqHE-1AjwUh096O3BGWDQcxTTcKDJpgBfbyryQDez3meNQB_qV35ag2yPSuxXiTU-8PiOFKZA5lwaYRkhBuFFE-CZ7sDjhvg5wpLYHCpLwxceKFfrHg08/s1600/twitter.png' style='padding:0;margin:0;border:none;'/></a>
</div>

<div style='width:55px; float:left;'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6bXqfPCJ8kzEq03N-3VDdFpD7IckAEqQi14EcVpyIlTAYsa7Qqw5_N2pXbbjDskSgVPOz-chLQIdorrTj6VtljVGWqUWF20P5k4hr_fhPwdVUJnHZXTh3JaNHspQsdAYWcu0qCLsHts/s1600/digg.png' style='padding:0;margin:0;border:none;'/></a>
</div>

<div style='width:55px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRPxHKAjH0qBDhjyzRAwfaIfRO2bSZwPfO5IcUPy9rjGjGRlgFfuRKOZKLN8cjNSM416MAfcUAHLmclWX8qhOzDY1bWPZpMi7OPU_6y5phtMiZREHBZK-Tmz9dsDHVkr9LNQr1vRs_fA/s1600/facebook.png' style='padding:0;margin:0;border:none;'/></a>
</div>

<div style='width:55px; float:left;'>
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4mZ-SVu0nAvifHoA2Dip0V8CHI8kJUNt6utAobqgNAknh9S1coiAObadpYy3s95qC8DTK6wydO-NJelZBWj8jEib0a4o-dbOB51EcTOaK8JBYwpkXhXPIMzdnECw0rNUyrwHxCF4zOUc/s1600/yahoo.png' style='padding:0;margin:0;border:none;'/></a>
</div>

<div style='width:55x; float:left;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlHwh0UYxSy_AUBAF-EpVcIyhbdaQggoMHk6kPdctzD7eNHUM2EIQ4xGKQAeLt1GegJEF_AwD8RTwwuYvYDrdB-UsEXD5JZ9341ugjPx_yI1eoZvjsGr4W6n8lY3rWLmxMCEGZJ-DdEE/s1600/rss.png' style='padding:0;margin:0;border:none;'/></a>
</div></div>

kod yg diletakkan pada template:

kod pada template






*Ubah saiz width yang berwarna oren jika hendak menjarakkan ruangan diantara button.
Jika ada read more  letak selepas kod <data:post.body/> yang kedua.

Sabtu, 30 Oktober 2010

Cara letak favicon pada url blog

Jika kita membuka laman web biasanya kita boleh melihat satu ikon kecil yang terdapat disebelah url.Bagi laman blog biasa tertera dengan ikon huruf B.Ikon yang kecil ini dipanggil “favicon” .Jika hendak membuat sendiri favicon itu kita perlu membuatnya dalam saiz 32x32 piksel dalam format gif,bmp,jpeg,ico ataupun png.Kemudian upload imej tersebut ke photobucket.

Kemudian Masuk ke design-pilih edit HTML
Kemudian masukkan kod ini diantara kod <head> dan </head>

<link href='letak url imej disini' rel='shortcut icon' type='image/x-icon'/>

Untuk membuat icon dengan imej sendiri boleh juga gunakan laman web favicongenerator.com.Juga boleh lawati  laman web iconj.com  dan disitu juga terdapat  favicon dalam bentuk  animasi yang boleh pilih dan ambil kodnya untuk dimasukkan pada blog.

Jika menggunakan iconj :
Masuk kewebsite--kemudian pilih--animated favicon
pilih jenis favicon dan ambil html embed code and details..copy kod yang terdapat disitu.
kemudian kembali keblog ,masuk kedesign..pilih edit html
edit template




 gunakan crtl+F untuk find dan taipkan </head> pada ruangan tersebut
find code



setelah jumpa kod </head> dan pastekan kod favicon tersebut diatasnya.

letak kod pada template
Update 22/02/2011:
 kalau tidak muncul favicon mungkin sebab gunakan google chrome.Untuk google chrome guna kod ini:

<link rel="icon" type="image/gif" href="url imej anda">

Selamat mencuba….

Cara letak tandatangan pada akhir posting

Membuat tandatangan atau signature pada bahagian bawah posting boleh kita lihat dikebanyakan blog dan laman web. Bila tandatangan diletakkan dibawah posting  nampak lebih professional . Sebelum membuatnya kita perlu membuat imej tandatangan dan mengupload imej tersebut ke laman web hosting gambar seperti image shack ,photobucket dan sebagainya.Imej tersebut boleh juga kita buat dengan menggunakan perisian seperti Microsoft paint,Photoshop,Corel Draw dan sebagainya.Ataupun boleh juga gunakan kemudahan membuat tandatangan secara online seperti di mylivesignature.com.
Seterusnya selepas mendapat link gambar yang diupload tadi ,cari kod dibawah ini pada template.
Masuk ke design,pilih edit html
Klik pada expand template widget
Cari kod berikut:

<p><data:post.body/></p>
Kemudian masukkan kod ini dibawahnya:
<p><div align="left"><img src="URL imej tandatangan"/></div></p>
*gantikan url imej tandatangan dengan url imej yang diupload tadi.
Contohnya :
<p><div align="left"><img src="http://i219.photobucket.com/albums/cc282/signature.png"/></div></p>
Kemudian Save Template

Atau pun satu cara lagi ialah dengan meletakkan pada post template:
Masuk ke design—setting--- formating
Dibawah sekali terdapat post template

Contoh kod imej yang saya upload ke photobucket

<a href="http://s219.photobucket.com/albums/cc282/?action=view&current=signature.png" target="_blank"><img src="http://i219.photobucket.com/albums/cc282/signature.png" border="0" alt="tandatangan"></a>
Kod diatas diubah menjadi begini:
<img src="http://i219.photobucket.com/albums/cc282/signature.png" border="0" alt="tandatangan"></a> 
Kemudian masukkan kod url imej yang di upload tadi pada post template

poat template

 Kemudian klik pada save setting.Jadi setiap kali kita buat posting baru imej tadi akan dimasukkan secara automatik pada paparan posting.

Sabtu, 23 Oktober 2010

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








Kod warna boleh ditukar mengikut kesesuaian.