Monday, March 26, 2012

Bubble Cursor pada Blogger

Cursor untuk blog anda memang boleh dipelbagaikan. Samada untuk menukar icon cursor sahaja, atau menjadikannya sparkle. Dan juga tidak ketinggalan untuk menjadikan cursor anda menghasilkan bubbles.


Contoh cursor bubble yang menarik ini boleh di lihat di test blog ini.

Ikuti tutorial mudah di bawah untuk letakkan bubble cursor di blog anda.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy code bubble cursor di bawah, kemudian paste di ruangan HTML/javascript.
(code ini bubble warna biru. Untuk tukar warna bubble, sila ikuti tutorial sehingga habis)



<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen



/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();



window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";



document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}



function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}



function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}



document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }



window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}



window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}



function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>


3. Save dan lihat hasilnya.:)



Note:
Bagi yang hendak tukar bubble dengan warna yang anda kehendaki selain 4 warna di atas, caranya.

Cari kod di bawah dari code yang anda paste tadi, kemudian tukarkan code warna seperti yang dihighlight


Hendak cari kod warna.?
Rujuk code warna di bawah.

Complete HTML True Color Chart

The background color in each cell is produced by the color code shown.
Black, grays and white are shown in bold red. Primary colors and complements are in BOLD ITALIC.
This site was created by Photius Coutsoukis and it is hosted by ITA. Contact the Webmaster with your comments and suggestions. Printable Version . . . See usage examples below.
Primary/Main/Basic Colors
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF




Secondary/Mixed/Pastel Colors
FF4848 FF68DD FF62B0 FE67EB E469FE
D568FD
9669FE
FF7575 FF79E1 FF73B9 FE67EB E77AFE
D97BFD
A27AFE
FF8A8A FF86E3 FF86C2 FE8BF0 EA8DFE DD88FD AD8BFE
FF9797 FF97E8 FF97CB FE98F1 ED9EFE E29BFD B89AFE
FFA8A8 FFACEC FFA8D3 FEA9F3 EFA9FE E7A9FE C4ABFE
FFBBBB FFACEC FFBBDD FFBBF7 F2BCFE EDBEFE D0BCFE
FFCECE FFC8F2 FFC8E3 FFCAF9 F5CAFF F0CBFE DDCEFF
FFDFDF FFDFF8 FFDFEF FFDBFB F9D9FF F4DCFE E6DBFF
FFECEC FFEEFB FFECF5 FFEEFD FDF2FF FAECFF F1ECFF
FFF2F2 FFFEFB FFF9FC FFF9FE FFFDFF FDF9FF FBF9FF
800080
872187
9A03FE
892EE4
3923D6
2966B8
23819C
BF00BF
BC2EBC
A827FE
9B4EE9
6755E3
2F74D0
2897B7
DB00DB
D54FD5
B445FE
A55FEB
8678E9
4985D6
2FAACE
F900F9
DD75DD
BD5CFE
AE70ED
9588EC
6094DB
44B4D5
FF4AFF DD75DD C269FE
AE70ED
A095EE 7BA7E1 57BCD9
FF86FF E697E6 CD85FE C79BF2 B0A7F1 8EB4E6 7BCAE1
FFA4FF EAA6EA D698FE CEA8F4 BCB4F3 A9C5EB 8CD1E6
FFBBFF EEBBEE DFB0FF DBBFF7 CBC5F5 BAD0EF A5DBEB
FFCEFF F0C4F0 E8C6FF E1CAF9 D7D1F8 CEDEF4 B8E2EF
FFDFFF F4D2F4 EFD7FF EDDFFB E3E0FA E0EAF8 C9EAF3
FFECFF F4D2F4 F9EEFF F5EEFD EFEDFC EAF1FB DBF0F7
FFF9FF FDF9FD FEFDFF FEFDFF F7F5FE F8FBFE EAF7FB
5757FF
62A9FF
62D0FF 06DCFB 01FCEF 03EBA6 01F33E
6A6AFF
75B4FF
75D6FF 24E0FB 1FFEF3 03F3AB 0AFE47
7979FF
86BCFF 8ADCFF 3DE4FC 5FFEF7 33FDC0 4BFE78
8C8CFF 99C7FF 99E0FF 63E9FC 74FEF8 62FDCE 72FE95
9999FF 99C7FF A8E4FF 75ECFD 92FEF9 7DFDD7 8BFEA8
AAAAFF A8CFFF BBEBFF 8CEFFD A5FEFA 8FFEDD A3FEBA
BBBBFF BBDAFF CEF0FF ACF3FD B5FFFC A5FEE3 B5FFC8
CACAFF D0E6FF D9F3FF C0F7FE CEFFFD BEFEEB CAFFD8
E1E1FF DBEBFF ECFAFF C0F7FE E1FFFE BDFFEA EAFFEF
EEEEFF ECF4FF F9FDFF E6FCFF F2FFFE CFFEF0 EAFFEF
F9F9FF F9FCFF FDFEFF F9FEFF FDFFFF F7FFFD F9FFFB
1FCB4A 59955C 48FB0D 2DC800 59DF00 9D9D00 B6BA18
27DE55 6CA870 79FC4E 32DF00 61F200 C8C800 CDD11B
4AE371 80B584 89FC63 36F200 66FF00 DFDF00 DFE32D
7CEB98 93BF96 99FD77 52FF20 95FF4F FFFFAA EDEF85
93EEAA A6CAA9 AAFD8E 6FFF44 ABFF73 FFFF84 EEF093
A4F0B7 B4D1B6 BAFEA3 8FFF6F C0FF97 FFFF99 F2F4B3
BDF4CB C9DECB CAFEB8 A5FF8A D1FFB3 FFFFB5 F5F7C4
D6F8DE DBEADC DDFED1 B3FF99 DFFFCA FFFFC8 F7F9D0
E3FBE9 E9F1EA EAFEE2 D2FFC4 E8FFD9 FFFFD7 FAFBDF
E3FBE9 F3F8F4 F1FEED E7FFDF F2FFEA FFFFE3 FCFCE9
FAFEFB FBFDFB FDFFFD F5FFF2 FAFFF7 FFFFFD FDFDF0
BABA21 C8B400 DFA800 DB9900 FFB428 FF9331 FF800D
E0E04E D9C400 F9BB00 EAA400 FFBF48 FFA04A FF9C42
E6E671 E6CE00 FFCB2F FFB60B FFC65B FFAB60 FFAC62
EAEA8A F7DE00 FFD34F FFBE28 FFCE73 FFBB7D FFBD82
EEEEA2 FFE920 FFDD75 FFC848 FFD586 FFC48E FFC895
F1F1B1 FFF06A FFE699 FFD062 FFDEA2 FFCFA4 FFCEA2
F4F4BF FFF284 FFECB0 FFE099 FFE6B5 FFD9B7 FFD7B3
F7F7CE FFF7B7 FFF1C6 FFEAB7 FFEAC4 FFE1C6 FFE2C8
F9F9DD FFF9CE FFF5D7 FFF2D2 FFF2D9 FFEBD9 FFE6D0
FBFBE8 FFFBDF FFFAEA FFF9EA FFF7E6 FFF4EA FFF1E6
FEFEFA FFFEF7 FFFDF7 FFFDF9 FFFDF9 FFFEFD FFF9F4
D1D17A C0A545
C27E3A
C47557
B05F3C
C17753
B96F6F
D7D78A CEB86C C98A4B
CB876D
C06A45
C98767
C48484
DBDB97 D6C485 D19C67 D29680
C87C5B
D0977B
C88E8E
E1E1A8 DECF9C DAAF85 DAA794 CF8D72 DAAC96 D1A0A0
E9E9BE E3D6AA DDB791 DFB4A4 D69E87 E0BBA9 D7ACAC
EEEECE EADFBF E4C6A7 E6C5B9 DEB19E E8CCBF DDB9B9
E9E9C0 EDE4C9 E9D0B6 EBD0C7 E4C0B1 ECD5CA E6CCCC
EEEECE EFE7CF EEDCC8 F0DCD5 EACDC1 F0DDD5 ECD9D9
F1F1D6 F5EFE0 F2E4D5 F5E7E2 F0DDD5 F5E8E2 F3E7E7
F5F5E2 F9F5EC F9F3EC F9EFEC F5E8E2 FAF2EF F8F1F1
FDFDF9 FDFCF9 FCF9F5 FDFAF9 FDFAF9 FCF7F5 FDFBFB
F70000
B9264F
990099
74138C
0000CE
1F88A7
4A9586
FF2626
D73E68
B300B3
8D18AB
5B5BFF"
25A0C5
5EAE9E
FF5353 DD597D CA00CA
A41CC6
7373FF
29AFD6 74BAAC
FF7373 E37795 D900D9 BA21E0 8282FF 4FBDDD 8DC7BB
FF8E8E E994AB FF2DFF CB59E8 9191FF 67C7E2 A5D3CA
FFA4A4 EDA9BC F206FF CB59E8 A8A8FF 8ED6EA C0E0DA
FFB5B5 F0B9C8 FF7DFF D881ED B7B7FF A6DEEE CFE7E2
FFC8C8 F4CAD6 FFA8FF EFCDF8 C6C6FF C0E7F3 DCEDEA
FFEAEA F8DAE2 FFC4FF EFCDF8 DBDBFF D8F0F8 E7F3F1
FFEAEA FAE7EC FFE3FF F8E9FC EEEEFF EFF9FC F2F9F8
FFFDFD FEFAFB FFFDFF FFFFFF FDFDFF FAFDFE F7FBFA

USAGE EXAMPLES:
<body bgcolor="#003300">
<font color="#330066">

Vlasishost.com | Html Font Colors
HTML History, PHP History, PHP Programming, PHP Basics, HTML Code

Thank you for making this an award winning site

Please put this page in your BOOKMARKS - - - - -



Telefoneintrage
Canada Work Permit.

All Language Translations

ITA Home Page
The IMMIGRATION Superhighway Feedback
ITA WWWDesign J.D.Quad's HTML Page Yahoo search

Copyright © 1998-2006 Photius Coutsoukis
HTML Colors; Table of color codes for html documents HTML Colors; Table of color codes for html documents HTML Colors; Table of color codes for html documents



Selamat Mencuba.:)

letak sitemap blogger

Sitemap boleh digunakan oleh pemilik blog untuk meletakkan entri yang ada dalam blog dengan lebih kemas/tersusun. Fungsi sitemap hampir sama dengan archive, tetapi sitemap lebih kepada kategori/label, manakala archive lebih kepada susanan entri mengikut tarikh.


Boleh dikatakan sitemap lebih mudah didapati untuk self-hosting, tetapi terdapat juga sitemap yang boleh diletakkan di blogspot. Sitemap untuk blogspot ini adalah berdasarkan kategori/label yang anda masukkan semasa menaip entri blog.

Contoh blogspot yang menggunakan sitemap ini anda boleh lihat di Sitemap OhBest.

Tutorial untuk membuat sitemap ini adalah seperti berikut

1. Dari dashboard > posting > edit pages > new page

2. Copy code berikut dan paste di ruangan pages.


<script style="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/Sitemaprev2.js
"></script>
<script src="http://www.URL BLOG.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


note: Tukar URL BLOG dengan url blog anda

Contoh:


3. Save/publish page anda.

Note: Anda juga boleh pilih untuk link manually, dan letakkan link di mana sahaja yang anda rasakan perlu.

Scroll Box untuk Gadget anda

Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.

Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.
cara buat scroll box


Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.:) Antara widget yang sesuai menggunakan scroll box ini adalah Mister Linky. Ini kerana jika jumlah pengunjung yang meletakkan url adalah banyak, ruang yang digunakan juga akan bertambah.

Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript
(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.

<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini

</div>

Note :
width: ubah mengikut lebar yang anda kehendaki
height: ubah mengikut tinggi yang anda kehendaki


3. Apabila selesai, save dan lihat hasilnya..

Senang bukan..:)

Suka tutorial ini.?

Disable Highlight untuk Blogger

Sesetengah orang mungkin agak tidak senang bagi sesiapa mengambil hasil entri dalam blog mereka. Antara cara yang digunakan untuk mengelakkan entri atau kandungan dalam blog di'ambil' adalah dengan disable right click atau disable highlight.


Tutorial untuk disable right click sudah pun ada sebelum ini, dan kali ini tutorial adalah untuk disable highlight text dalam blog.


Ikuti tutorial mudah seperti di bawah.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Masukkan kod di bawah dalam ruangan HTML/javascript


<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>


3. Save dan lihat hasilnya..:)


TIPS:
Untuk kesan yang lebih baik, letakkan/drag HTML atas ruangan blog post. Ini akan membuatkan kod disable highlight ini 'dibaca' dahulu sebelum entri.:)

Button Like untuk blog anda

Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.
Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.

Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.

Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda



Tutorial untuk meletakkan button ini seperti di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript


<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://URL-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>


note: Gantikan URL-ANDA dengan url blog anda

3. Save dan lihat hasilnya.:)

p/s: Apabila seseorang 'like', akan keluar di wall orang yang like tentang blog anda dan secara tidak langsung dapat meningkatkan trafik blog anda.:)

Letak Facebok Button 'Like' Dalam Blogspot anda

Meletakkan button 'like' dalam blog dapat memberi gambaran secara kasar samada penunjung anda menyukai entri yang ada di blog anda. Selain itu, penggunaan button 'like' ini juga sedikit sebanyak dapat meningkatkan trafik blog anda.
Letak Facebok Button 'Like' Dalam Blog

Anda boleh lihat contoh button 'like' di blog ini dan juga di unwanted86.

Cara-cara untuk meletakkan button like ini adalah seperti berikut.

1. Login akaun blogger, dari dashboard > design > edit HTML > expand widget templates
( backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod berikut.
<data:post.body/>


3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.
<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;'/>


contoh:
Letak Facebok Button 'Like' Dalam Blog


4. Save dan lihat hasilnya.:)

Letak Facebook Share Button dalam Blogspot anda

Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook.
Letak Facebook Share Button pada Blog

Dengan hanya beberapa klik sahaja, ianya sudah siap sedia untuk dikongsi di profile facebook. selain itu penggunaan facebook share button ini dapat manarik lebih ramai pelawat ke sesebuah blog.

Contoh penggunaan facebook share button (selain blog ini) adalah di unwanted86 dan juga ohbest.

Cara untuk memasukkan facebook share button ini adalah seperti berikut.

1. Pilih jenis facebook share button yang anda kehendaki, kemudian copy code yang diberi.


Code untuk Full
<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>


Code untuk Compact
<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

2. Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template)

3. Menggunakan fungsi find (ctrl + F), cari kod ini.
<div class='post-header-line-1'/>


jika tidak jumpa, cari kod ini.
<div class='post-header-line-1'>




4. Selepas itu paste kod share button (langkah 1) DIBAWAH kod yang anda cari (langkah 3)

5. Save template dan lihat hasilnya.

Ubah lebar Gambar Pada Entry

Ada entri dalam blog yang memerlukan anda untuk meletakkan gambar sebesar yang mungkin bergantung kepada ruang yang ada. Sebelum ini tutorial sudah menunjukkan bagaimana untuk memaparkan saiz yang maksimum untuk gambar yang telah diupload.


Untuk kali ini, tutorial akan menunjukkan bagaimana untuk menguruskan saiz gambar yang telah diupload. Ini kerana apabila gambar terlalu besar, maka ianya akan melebihi ruang yang sepatutnya untuk entri.

Terdapat 2 cara untuk tutorial ini.

Cara 1:
Masukkan width="200" ke dalam kod gambar.

Contoh:

<img src="URL GAMBAR" width="500" >


Nilai 200 boleh ditukar bergantung kepada lebar ruangan entri anda. Kebiasaannya lebar entri bagi ssebuah blog antara 400 hingga 500. Jadi anda boleh cuba mana yang sesuai.

Contoh gambar dengan width 400




Cara 2:
Masukkan width="95%" ke dalam kod gambar.

Contoh:
<img src="IMG URL" width="95%" >


Cara kedua mengunakan peratus untuk menentukan saiz gambar. Kalau anda memasukkan 95%, maka gambar yang terhasil akan mengambil lebar 95% daripada lebar sebenar ruangan entri anda.


contoh width 95%



-------------

p/s: height jarang dipertimbangkan kerana width yang lebih penting.

Selamat Mencuba.:)

Ketahui jumlah post dan komentar blog

Berapakah bilangan post dan bilangan komen yang anda terima bagi keseluruhan selama anda berblogging.? Jika itu yang menjadi persoalan, jawapannya adalah mudah sekali.:)



Ikuti tutorial di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript
(masih tidak faham? rujuk sini )

2. Copy kod di bawah dan letakkan ke dalam ruangan HTML/javascript

<center><script style="text/javascript">
function totalPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script></center>
<small><a href="http://tutorialuntukblog.blogspot.com/2011/01/ketahui-jumlah-post-dan-jumlah-komen.html" target="_blank">get this</a></small>


3. Save. Itu sahaja dan lihat hasilnya.:)

Change Your Image Saiz

Penggunaan saiz gambar juga penting dalam menghasilkan entri. Ada entri yang menggunakan gambar dengan saiz kecil, tetapi bagi yang menggunakan gambar saiz besar, mungkin menghadapi sedikit masalah kerana gambar yang dipaparkan tidak menggunakan ruang yang ada semaksimum mungkin.

Ini contoh gambar apabila menggunakan option image size : large.
Walaupun menggunakan option, large, tetapi gambar yang dihasilkan tidak menggunakan ruangan post dalam blog secara maksimum.


Berikut adalah cara untuk menghasilkan penggunaan gambar yang maksimum dalam blog.

Apabila anda upload gambar, akan keluar kod seperti ini.
Buang kod seperti yang telah di highlightkan.



Note :
- Tidak kisah berapa nilai width atau height, asalkan buang kod tersebut.
- utk nilai s400, ada juga nilai lain seperti s1600, s128 dan lain². Kod yang ada perlu buang ini terletak sebelum nama gambar yang anda upload.

Selepas kod dibuang untuk gambar di atas, gambar akan menjadi saiz mengikut saiz asal gambar. Contoh di bawah.


Note: Bila menggunakan kaedah ini, tidak kisah kalau anda menggunakan image option small, medium atau large. Asalkan anda buang kod tersebut, gambar akan jadi maksimum saiz.

Selamat mencuba.:)..

----------------

Masalah gambar terlebih besar apabila buang kod.?

Tunggu tutorial seterusnya.:)

MISTERLINKLY: cara mudah visitor tinggalkan link

Sesetengah pemilik blog akan memasukkan link pengunjung sebagai exchange. Cara ini bagus untuk meningkatkan trafik blog. Kebiasaanya, link pengunjung akan dimasukkan oleh pemilik blog.

Tetapi dengan misterlinky, pengunjung sendiri akan meninggalkan link blog mereka pada blog² yang meletakkan widget ini. Secara tidak langsung dapat memudahkan kedua-dua belah pihak, pemilik blog dan pengunjung blog.

Berikut contoh widget misterlinky ini.



Untuk mendapatkan widget ini, anda boleh dapatkan (daftar) di www.misterlinky.net/

Setelah selesai mendaftar dengan linkwinky, dapatkan kod HTML kemudian paste di bahagian page element blog anda.

Antara kelebihan menggunakan misterlink ini adalah widget yang simple dan mudah untuk memasukkan url blog. Pemilik blog juga senang untuk menguruskan widget ini(jika ada link yang tidak dikehendaki)

Recent Post dengan Thumbnail Widget

Penggunaan widget recent post adalah penting untuk menunjukkan kepada pengunjung apa entri-entri terbaru yang terdapat dalam blog. Lagi berguna jika pengunjung yang datang bukannya dari frontpage. Jadi widget recent post sangat penting ketika ini.

Sebelum ini sudah diletakakn Animated recent post widget,tetapi untuk kali ini, tutorial akan menunjukkan cara meletakkan recent post widget, tetapi jenis statik.

Contoh adalah seperti gambar ini.


Cara-cara untuk meletakkan widget ini adalah seperti berikut:

1. Dari dashoard > desin > add a gadget > HTML/javascript

2. Dalam ruangan HTML/javascript, masukkan kod berikut.

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[1] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[2] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[3] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[4] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://URL ANDA.blogspot.com/";

</script>

<script src="https://sites.google.com/site/unwanted86/javascript/recentpostthumnail.js" type="text/javascript"></script>


Note:

Anda boleh ubah beberapa kod mengikut kesesuaian blog anda.

boxwidth - lebar widget
cellspacing - jarak antara cell (default sudah ok)
borderColor - Warna background (untuk melihat senarai kod warna, RUJUK SINI)
thumbwidth & thumbheight - lebar dan tinggi thumbnail (default sudah ok)
fntsize - Size untuk tajuk
acolor - Warna tajuk.untuk melihat senarai kod warna, RUJUK SINI)
aBold - Mahu tajuk di'tebalkan' atau tidak (true or false)
numposts - Bilangan recent post yang dikehendak
home_page : http://URL ANDA.blogspot.com/ (Gantikal URL ANDA dengan url blog anda)


3. Save dan lihat hasilnya.:)

-----------------

-Bagi yang buat tetapi tidak menjadi, dari dashboard > settings > site feed
- Pada allow site feeds, pilih FULL

Animated Recent Post Widget

Update: Bagi sesiapa yang menghadapi masalah background widget ini tunjuk 'bandwidth exceed", boleh copy semula kod dibawah, dan masukkan semula url anda..

Kesulitan dikesali.


Meletakkan animated recent post widget dapat men'stail'kan lagi cara paparan recent post yang ada pada blog anda. Contoh recent post widget adalah seperti berikut.

(tunggu page habis load utk tengok pergerakan, pergerakan sebenar adalah lebih perlahan dan lancar)


Berikut adalah cara-cara untuk menggunakan widget ini.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. copy code berikut dan paste di ruangan HTML/javascript

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>


Note: gantikan URL BLOG dengan url blog anda..

3. Save dan lihat hasilnya.

-------------------

PERHATIAN: Didapati tidak semua template blog 'boleh masuk' dengan widget ini. Kemungkin sebahagian besar boleh menggunakan widget ini. Oleh itu anda boleh mencuba dahulu samada boleh guna atau tidak untuk blog anda. Masih belum jumpa penyelesaian untuk itu.

Harap blog anda boleh menggunakan widget ini.
Selamat mencuba.:)

Tukar Model Cursor Pada Blogger

Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

1. Buka website http://www.cursors-4u.com/

2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)

3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telah diwarnakan seperti dibawah

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

4. Kod akhir sepatutnya kelihatan seperti ini sahaja.
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

6. Save dan lihat hasilnya.

Mudah bukan.:)