! Tutorial Untuk Blog | Tips Blogspot

Fibox : Shoutbox Yang Cool Untuk Blogger

2011-12-29T22:08:00.000+08:00

Fibox adalah satu lagi nama baru untuk shoutbox yang memasuki ruang maya ini. Rentetan daripada shoutmix yang akan menamatkan perkhidmatan percumanya, admin dapati Fibox menawarkan shotbox yang bagi admin memang cool, (walaupun bagi admin baru sekali pandang:)

Fibox kini dalam fasa beta dimana lebih banyak penambahbaikan yang akan dilakukan oleh pihak yang terbabit. Lihat pada paparan yang mesra pengguna dan penggunaannya yang mudah, admin tidak ambil masa yang lama untuk terus daftar. Anda boleh melihat contoh shotbox Fibox ini yang admin letakkan di blog ohbest.

Sambil-sambil daftar, admin ambil kesempatan untuk letakkan sekali tutorial untuk daftar Fibox seperti di bawah.

1. Buka www.fibox.ws, kemudian klik pada Sign Up

2. Masukkan email address dan password. Tick pada term of service kemudian klik continue

3. Notification mengatakan activation email dihantar kepada emial yang anda daftar.

4. Buka email dan klik pada link yang diberi.

5. Pengesahan bahawa akaun anda telah diaktifkan.

6. Login akaun anda, dan untuk kali pertama anda login anda akan diminta untuk create nama untuk shoutbox anda.

7. Daripada dashboard, anda boleh tetapkan setting yang anda kehendaki

8. Copy code yang diberi dan paste ke dalam ruangan HTML/javascript blog anda.
(tidak faham.?)

9. Save dan lihat hasilnya.:)

Tambahan:
Selepas pendaftaran, anda juga boleh login menggunakan akaun facebook anda.

Shoutmix Akan Menamatkan Perkhidmatan Percuma | Alternatif Shoutbox Percuma Untuk Ganti Shoutmix

2011-12-27T21:54:00.000+08:00

Bagi blogger yang sudah lama berkecimpung dalam arena blogging, shoutmix adalah salah satu shoutbox yang paling dikenali. Boleh dikatakan penggunaanya adalah meluas dengan fungsi yang boleh admin katakan mesra pengguna. Dan semua itu boleh didapati secara percuma.

Kini, setelah 7 tahun 'berbakti' dengan mempunyai akaun percuma, shoutmix mengambil satu langkah drastik, iaitu akan menamatkan perkhidmatan percuma yang ditawarkan. Jadi selepas ini semua akaun shoutmix adalah berbayar.
Satu keputusan yang admin rasakan kurang bijak untuk memenangi hati pengguna maya.

Keputusan ini juga telah diwar-warkan di laman utama mereka.
Bermula 1 Januari 2012, kesemua akaun percuma akan tidak berfungsi kecuali upgrade kepada plan berbayar.

Berikut plan-plan yang ditawarkan untuk pengetahuan atau bagi sesiapa yang berminat. (walaupun admin rasa macam tidak mahu letak je.:)

Sanggupkah anda membayar untuk plan ini.? Kalau admin tidak perlu jawab pun tak pe rasanya.:)

Disebabkan shoutmix akan menghentikan perkhidmatan percumanya bermula 1 Januari 2012 nanti, disini admin letakkan senarai lain shoutbox yang anda boleh dapati secara percuma. Admin belum mencuba lagi mana-mana shoutbox ini buat masa sekarang. Bagi sesiapa yang pernah menggunakan mana-mana shoutbox di bawah, diharap boleh berkongsi pandangan.

1. http://oggix.com/
2. http://www.cbox.ws/
3. http://www.yellbox.com/
4. http://www.freeshoutbox.net/
5. http://www.myshoutbox.com/
6. http://free-shoutbox.net/
7. http://ishoutbox.com/
8. http://www.shoutjax.com/

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

p/s: Admin jangkakan pengguna shoutmix akan jatuh menjunam.
Reason: kenapa perlu bayar untuk widget yang boleh didapati secara percuma.:)

Sefikit info tambahan::)

more info:http://www.shoutmix.com/v3/

Objek Berpusing Keliling Mouse

2011-12-26T21:19:00.002+08:00

Bagaimana anda gayakan mouse bagi pengunjung yang mengunjungi blog anda.? Adakah anda biarkan secara default atau lakukan pengubahsuaian.?
Sebelum ini terdapat beberapa tutorial seperti bubble, sparkle, atau following star.

Dan kali ini, satu lagi ubahsuai yang anda boleh lakukan, iaitu objek berpusing keliling mouse seperti gambar di bawah

Anda juga blog melihat contoh di blog demo ini

Tutorial di bawah.

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

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.
(tidak faham.?)

<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

3. Save dan lihat hasilnya.

TAMBAHAN.

i) Bagi sesiapa yang tukar warna objek tersebut, boleh tukar pada kod ini.
(mencari kod warna.?)

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

ii) Kod ini memerlukan anda menggunakan layout template.

Tutorial Letak Facebook Like Badge Masa Blog Dibuka

2011-12-06T20:29:00.001+08:00

Facebook dan blogger adalah kombinasi yang agak bagus. Dengan adanya facebook page, blogger dapat berinteraksi dengan pengunjung. Salah satu penggunaan yang cool adalah dengan meletakkan facebook like badge semasa blog anda dibuka.

Secara tidak langsung dapat menggalakkan pengunjung blog anda untuk pada masa yang sama 'like' pada page anda.

Contoh seperti dibawah

Anda juga boleh melihat demo di test blog ini.

Tutorial letak facebook like badge semasa blog dibuka seperti dibawah.

1. Dari dashboard > design > edit HTML

2. Backup template blog sebagai langkah berjaga²

3. Dengan menggunakan fungsi find (ctrl + F), cari kod <body>
3.1 Jika anda tidak jumpa code <body>, cari kod ini
<body expr:class='"loading" + data:blog.mobileClass'>

4. Copy dan paste code di bawah selepas kod yang anda jumpa di langkah 3 atau 3.1

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='OhBest'
//]]>
</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakinetwork.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/unwanted86/javascript/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/unwanted86/javascript/kakinetwork.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 15,
wait: 0,
url: 'http://www.facebook.com/OhBest',
closeable: true,
});
});
//]]>
</script>
<div id='fbtpdiv'/>

Contoh:

NOTA:
i) Gantikan 'OhBest' pada row KNFBFansPRO='OhBest' dengan nama yang anda mahu.
ii)Gantikan '15' pada row 'timeout: 15,' dengan masa paparan yang anda mahu semasa blog dibuka
iii) Gantikan dengan url page anda pada row url: 'http://www.facebook.com/OhBest',

5. Save dah lihat hasilnya.:)

Kredit: Terima kasih kepada kakinetwork.com untuk code yang sungguh cool ini.

Tutorial Hilangkan Navbar Pada Blog

2011-11-29T22:52:00.001+08:00

Navbar berperanan untuk memudahkan blogger kembali kepada link² tertentu. Walau bagaimanapun, beberapa pengubahsuaian yang dilakukan yang menyebabkan kehadiran navbar ini sedikit menyemakkan.:). Jadi tutorial kali ini akan menunjukkan cara untuk hilangkan navbar pada blog anda.

Antara pengubahsuaian yang menyebabkan navbar ini tidak diperlukan adalah tutorial letakkan button follow dan dashboard dalam blog.

Tutorial untuk hilangkan navbar adalah seperti berikut.
Terdapat 2 cara, anda boleh pilih mana yang bersesuaian dengan blog anda.

CARA 1:

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find ( ctrl + F), cari 'navbar'
(hasil cari biasanya samada navbar-iframe atau navbar sahaja)

3. Dari kod yang ada di bawah navbar,
Tukarkan 'display:block' kepada 'display:none'

contoh:

4. Save dan lihat hasilnya.

CARA 2:

Nota: Cara kedua digunakan jika anda tidak mempunyai 'navbar' dalam 'edit HTML' blog anda.

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi find ( ctrl + F), cari kod body {

3. Copy dan paste code berikut SEBELUM code body {

#navbar-iframe {
display: none ;
}

contoh:

4. Save dan lihat hasilnya.:)

Tutorial Letak Button Follow dan Dashboard Dalam Blog

2011-11-28T22:27:00.002+08:00

Dalam template asal blogger, sudah diletakkan untuk widget follower dan juga dashboard. Walau bagaimanapun, anda boleh melakukan sedikit pengubahsuaian. Tutorial kali ini akan tunjukkan cara untuk letak button follow dan dashboard dalam blog seperti gambar di bawah.

Anda juga boleh tengok demo button follow dan dashboard ini di test blog ini.

Tutorial adalah seperti berikut.

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

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang dibuka.
[tidak faham.?]

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

Nota: Gantikan 'ID BLOG ANDA'

Bagaimana untuk cari ID Blog.?
> Anda klik pada 'new post' dari dashboard, dan akan ada paparan seperti gambar di bawah. Noombor yang admin highlight adalah contoh NO ID BLOG

3. Setelah anda selesai letakkan ID blog anda, save dan lihat hasilnya.:)

Update:
TAMBAHAN:
Bagi sesiapa yang mempunyai masalah kehadiran navbar dalam blog, anda boleh hilangkan navbar tersebut dengan mengikuti tutorial hilangkan navbar dalam blog.

Tutorial Kelopak Bunga Berguguran Di Blog

2011-10-12T22:24:00.002+08:00

Ingin menampakkan blog anda kelihatan lebih menarik dengan objek yang berguguran selain daripada salji.?
Apa kata kalau hiaskan blog anda dengan kelopak bunga yang berguguran seperti gambar di bawah.

Anda boleh melihat contoh kelopak bunga yang berguguran di blog demo ini.

Tutorial yang ringkas adalah seperti berikut.

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

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

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>

3. Save dan lihat hasilnya.:)

Tutorial Sembunyikan FB Fan Page di Blog

2011-10-08T20:30:00.002+08:00

Bagi blogger yang mempunyai facebook fanpage sendiri, adalah biasa untuk meletakkan fanpage tersebut di blog. Biasa untuk letakkan di sidebar blog, untuk kali ini admin akan tunjukkan pula cara untuk sembunyikan facebook fan page ditepi blog anda.

Anda juga boleh tengok contoh page yang diletakkan di tepi dalam blog di blog demo ini.

Tutorial sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:

i. Dari dashboard > design > edit HTML

ii. Menggunakan fungsi find, (ctrl + F), cari kod </head>

iii. Copy dan paste kod di bawah SEBELUM kod </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

cth:

Nota: Jika anda dapati kod di atas sudah ada sebelum anda copy paste, abaikan langkah 1, pergi terus ke langkah 2.

iv. Selepas selesai klik Save Template

Langkah 2:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka

<script type="text/javascript">
//
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">Tutorial Here</a></span></div></div>

Nota: Gantikan "URL PAGE ANDA"

contoh url page:

iii. Save dan lihat hasilnya.:)

Tutorial Sembunyikan Shoutbox Blog

2011-09-11T22:45:00.004+08:00

Pada kebiasaannya, shoutbox akan berada di sidebar dan akan dapat dilihat terus. Tutorial kali ini akan menunjukkan tutorial untuk sembunyikan shoutbox anda.:)

Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.

Tutorial sembunyikan shoutbox seperti di bawah

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
(tiada shoutbox.?)

3. Save dan lihat hasilnya.:)

TAMBAHAN.

Secara default, tab shoutbox adalah berwarna hijau, anda boleh menukar mengikut warna yang anda mahu dengan gantikan url yang anda mahu.

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}

Anda copy sahaja mana² url dari tab di bawah ini.
(tidak tahu cara dapatkan url gambar.?)

Tab kredit:ohcerita.com

Page FB Yang Lebih Style Untuk Blog

2011-09-08T20:22:00.002+08:00

Sesetengah blogger ada yang mempunyai facebook page untuk blognya. Tidak kira apa tujuan page tersebut, kebiasaannya ianya berkaitan dengan blog. Tutorial kali ini akan menunjukkan cara meletakkan page facebook dalam blog, tetapi bukan dengan design biasa.

Kalau sebelum ini widget yang dinamakan 'facemask' ini didapati di wordpress, kini blogger yang mengunakan platform blogger.com juga boleh menggunakannya.

Tutorial meletakkan page ini adalah seperti berikut.

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

2. Copy dan paste code di bawah kedalam ruangan HTML/javascript dan ubah seperti yang dinyatakan dalan nota di bawah.

<center>
<iframe style="height:250px; width:85%; " scrolling="no" frameborder="0"href="

URL PAGE

"src="http://www.facebook.com/plugins/fan.php?id=

NO ID PAGE

&width=292&height=250&connections=25&stream=false&header=false&logobar=false&css=https://sites.google.com/site/unwanted86/javascript/fblike.css" ></iframe></center><center><iframe src="http://www.facebook.com/plugins/like.php?href=

URL PAGE

&send=false&layout=standard&width=292&show_faces=false&action=like&colorscheme=light&font&height=40" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:40px;" allowtransparency="true"></iframe></center><p align="right"> <small><a href="http://tutorialuntukblog.blogspot.com/2011/09/page-fb-yang-lebih-style-untuk-blog.html">Get tutorial here </a></small></p>

Nota:

a)Gantikan url page dengan url page anda.
Bagaimana hendak dapatkan url page.?

b) Gantikan No ID page dengan no ID page anda.
Bagaimana hendak dapatkan ID page.?

Daripada page, klik pada 'edit info', kemudian daripada paparan yang muncul akan anda no di url, itu adalah No ID page anda.

3. Apabila selesai gantikan yang berkenaan, save dan lihat hasilnya.:)

Follow Up Komen Blogger

2011-08-25T21:18:00.000+08:00

Apabila anda menghantar komen di sesebuah entri blogger lain yang mempunyai sistem komen asal (default), bagaimana cara anda follow-up komen tersebut samada dibalas atau tidak.?

Ada 2 cara untuk mengetahui samada ianya sudah dibalas atau tidak.

1. Buka entri tersebut beberapa kali/berapa hari kemudian untuk ketahui samada komen anda dibalas atau tidak.

2. Satu notification akan dihantar ke email anda mengatakan komen anda sudah dibalas

Semestinya cara kedua lebih mudah dan senang bukan.?.:)

Kali ini tutorial tidak melibatkan sebarang perubahan pada kod blog anda, cuma admin hendak tunjuk apa yang perlu anda klik untuk membolehkan anda follow up komen di blog blogger lain. Ini kerana admin perasan ini agak kurang disedari oleh blogger² dan tertanya² bagaimana hendak adakan sistem untuk follow up komen di blogspot sedangkan ianya sudah tersedia.:)

Mudah sahaja, apabila anda tengok pada bahagian komen sesebuah entri, paparan adalah seperti berikut.

Bagi komen yang embedded di bawah entri, anda klik pada 'subscribe by email'

Atau

Kalau komen yang dibuka pada page lain, pastikan anda tick pada 'Email follow-up comments to'

Itu sahaja. Senang dan mudah bukan.?:)

Ini contoh notification apabila admin subscribe comment di blog http://garpukuning.blogspot.com/

Jadi lepas ini senang, anda komen sahaja di mana² blog, dan subscribe untuk memudahkan anda.:)

p/s: Sebelum ini admin juga ada buat tutorial bagaimana hendak tahu jika pengunjung blog komen entri blog anda.

Tips SEO : Blog Title dan Description

2011-08-21T23:27:00.000+08:00

Dalam entri lepas, admin ada bagitahu tentang kepentingan mempunyai url blog yang bersesuaian dengan tujuan berblogging, Tips SEO : Url blog / Niche blog. Dan mungkin seperti yang diketahui, mungkin ada yang ramai 'sayang' untuk tukar alamat blog yang asal.

Oleh itu, untuk kali ni admin akan tekankan faktor seterusnya yang penting untuk menarik trafik ke blog kita daripada search engine. Title blog dan description adalah yang seterusnya. Ini juga boleh dikatakan sebagai identiti sesebuah blog. Seperti blog ini admin menggunakan identiti Tutorial untuk blog dan tips blogspot.

Kenapa title dan description penting.

Ok admin buat contoh yang mudah, kalau anda suka satu lagu, apa yang biasanya anda pikir untuk merujuk kepada lagu tersebut. Tajuk lagu, artis, dan album serta mungkin tahun lagu keluar. So ini boleh admin katakan sebagai title dan description. Begitu juga blog, title dan description penting sebagai pengenalan awal, selepas itu baru masuk bab lirik (entri) dan lain-lain.
(macam tak best je contoh admin bagi ni.:)

Bagaimana hendak letak/ubah title dan description

Untuk pengguna blogger, tidak sukar untuk menukar title blog dan description.

Dari dashbord > settings > basic
Dan anda akan lihat bahagian title dan description. Anda boleh letak title dan description mengikut apa yang anda kehendaki yang bersesuaian dengan blog anda.
Contoh title dan description blog ini adalah seperti di bawah.

Bagaimana untuk letakkan title dan description.?

1. Untuk title, tidak perlu begitu banyak perkataan, cukuplah antara 3 hingga 5 patah perkataan. Jika terlalu banyak, sebenarnya agak menggangu apabila diindex di search engine. Ini kerana apabila diindex oleh search engine, title blog ini akan ditunjuk bersama title entri dalam result di search engine. Dan title blog juga akan dipaparkan di browser.

2. Untuk description boleh buat ayat sehingga 500 patah perkataan. Kebiasaannya untuk description ini akan ditunjukkan di bawah title blog.
description blog boleh dibuat dalam ayat yang menerangkan apa kandungan blog anda dan juga kenapa blog itu diwujudkan.

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

Penggunaan title dan description blog yang betul secara tidak langsung membuka mata search engine kepada blog anda. Admin tahu mungkin masih ada yang was-was hendak tukar title blog, mungkin sebab title blog sekarang sudah 'cantik', lagi² yang berblogging sekadar suka².:)

Bagi yang blogging memang ada tujuan yang khusus, baik anda tukar title dan description anda. Besar juga kesannya kepada SEO blog anda.:)Dan juga untuk title dan description ini, masih ada beberapa 'penambahbaikan' yang boleh dilakukan kepada keduanya. Admin akan ceritakan dalam entri seterusnya.

Happy blogging.:)

Tips SEO : Url blog / Niche blog

2011-08-14T23:11:00.000+08:00

Apabila hendak daftar buat blog pada kali pertama, apa yang anda pikirkan.? Semestinya anda akan pikir apakah alamat blog yang anda rasa berkenan. Mungkin pada awal berblogging url blog dirasakan tidak penting, tetapi setelah lama sedikit dalam arena blogging ini, barulah diketahui pentingnya untuk mempunyai alamat blog yang bagus.

Ini kerana, alamat blog atau senang dinamakan url blog adalah salah satu faktor utama dan paling penting untuk SEO. Sebelum ini admin juga ada buat satu entri di blog unwanted untuk tips pemilihan url blog, dan anda boleh tengok point no 5 iaitu pemilihan url blog yang berkaitan.

Apabila memilih url blog yang betul, secara tidak langsung anda telah menggunakan teknik SEO samada anda sedar atau tidak pada permulaannya. Anda juga boleh tengok url blog tutorial ini, iaitu tutorialuntukblog. Walaupun sebelum ini admin juga ada buat tutorial di blog unwanted, kemudian admin sambung di blog ini. Tajuk yang admin pilih untuk blog ini memang untuk menjadikan lebih mesra SEO.

Niche blog boleh dikatakan sama sahaja dengan alamat blog dan url blog, tetapi perkataan niche ini biasanya digunakan untuk blogger yang menggunakan domain dan hosting sendiri.

Contoh?

Anda hendak buat blog berkaitan komputer, dan hendak mendapatkan trafik ke blog tersebut dengan menggunakan url yang sesuai,
so url yang mungkin bagus untuk SEO anda ialah; tipskomputer, tips-komputer, belajarkomputer, ilmukomputer. Jika url sebegini digunakan, kemungkinan untuk diindex di engin pencarian adalah lebih tinggi.

Bagaimana jika url sekarang tidak seperti yang dikehendaki.?

Tidak perlu bimbang dan tergesa-gesa. Kalau blog anda sekarang bukan url yang bagus, ada boleh tukarkan alamat blog, tetapi admin rasa tidak ramai yang sanggup lagi² jika url blog itu memang sudah ada maksud yang tersendiri. Admin juga sayang url unwanted86 apa dan admin tidak tukar pun.:)

Jangan bimbang kerana tidak semestinya faktor url blog sahaja untuk SEO ini, ada lagi faktor² lain yang berkaitan. Cuma kalau url 'kena' menguatkan lagi SEO anda. Tetapi jika url anda tidak begitu cantik, boleh guna lagi teknik² SEO yang lain. Jika url anda cantik, anda ada satu kelebihan.:)

Apa Itu SEO

2011-08-07T21:57:00.000+08:00

Bergelar seorang blogger, antara perkataan yang akan jumpai dalam dunia blogging ini adalah SEO. Boleh dikatakan SEO ini memang agak glamour terutamanya di kalangan blogger yang sudah agak lama bertapak di dunia blogging.

Bagi blogger baru, mungkin masih tertanya-tanya, apakah sebenarnya SEO ini. Apakah kesan yang dibawa kepada seseorang blogger. Kenapa sesetengah orang terkejar-kejarkan SEO, kenapa sesetengah orang tidak kisah berkaitan SEO. Kali ni admin akan terangkan secara ringkas pengenalan kepada SEO, semestinya kepada blogger baru di arena blogging ini.:)

Apa itu SEO.

- SEO adalah ringkasan kepada Search Engine Optimization. Kalau bahasa mudahnya adalah cara untuk mengoptimumkan apa yang anda buat di blog anda supaya blog anda tersenarai di search engine seperti google, yahoo, bing dan lain².

Apa tujuan SEO.

-Tujuan utama SEO bagi seorang blogger yang menggunakan teknik SEO adalah untuk mendapatkan trafik dari search engine. Kemudian baru berkaitan dengan pagerank, eaning dan sebagainya. Tetapi tujuan utama adalah trafik dari search engine.

Perlu ke SEO pada blogging.

- Pada blogger yang pentingkan trafik untuk ke blog mereka, YA.
Dan paling kurang tahu basic² utama dalam SEO ini.
- Bagi blogger yang berblogging sekadar diari, mengisi masa lapang, atau berblogging sekadar ada blog, SEO tidak begitu penting.

Banyak ke teknik SEO ini.

-Ya, ada banyak teknik SEO.
Admin akan terangkan dalam post-post lain selepas ini.

Kalau buat SEO ni konfirm berjaya ke.?

- Admin tidak boleh kata konfirm. Tetapi bagi sesiapa yang menggunakan dan mencubanya boleh dikatakan akan menampakkan hasilnya.

Contoh hasil SEO.?

Ini admin ambil dari blog admin satu lagi, unwanted86.blogspot.com. Berkaitan bulan ramadhan, so target SEO admin berkaitan ramadan. Gambar di bawah contoh trafik hasil SEO.

Ada beza ke SEO dan SERP.

Yup berbeza.
SEO - Search Engine Optimizationn - Lebih kepada teknik
SERP - Search Engine Results Page - Kedudukan dalam search engine. (kurang glamour:)

Perkaitan keduanya.?

Power SEO, akan power SERP.
Boleh kata SEO adalah usaha, SERP adalah hasil.:)

So, apa tekniknya.?

- nanti admin akan bagitahu dalam next entri. Ini kan baru pengenalan.:)

Tutorial Letak Salji Dalam Blog : Ver 2

2011-07-10T21:17:00.000+08:00

Meletakkan salji dalam blog boleh dijadikan unsur yang boleh menambahkan lagi ceria blog anda.:).

Ando boleh tengok demo salji berwarna purple yang admin letak di blog demo ini.

Tutorial untuk letak salji ini seperti berikut.

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

2. Copy dan paste kod salji mengikut warna yang anda mahu ke dalam HTML/javascript

Putih

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

Purple

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

Hitam

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

Biru

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

Merah

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

3. Save dan lihat hasilnya.:)

Nota: Drag element ada ke bawah 'header' supaya salji muncul dari atas page blog anda.:)

Animated Recent Post Ver2

2011-07-03T22:57:00.005+08:00

Recent post menunjukkan apakah post terbaru yang baru dihasilkan oleh seseorang blogger untuk blognya. Adanya animated recent post widget, dapat menambahkan lagi 'seri' bagi senarai recent post anda.

Anda boleh lihat demo animated recent post ver2 ini di blog demo ini.

Tutorial untuk membuat animated recent post ini adalah seperti berikut.

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

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

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://tutorialuntukblog.blogspot.com/2011/07/animated-recent-post-ver2.html" target="_blank">get this widget here</a></small>

3. Save dan lihat hasilnya.

p/s: Sebelum ini admin juga ada buat tutorial animated recent post ver1.

Energy Saver Untuk Blog Anda.

2011-06-29T20:20:00.000+08:00

Blog anda boleh diletakkan dalam mode energy saver jika anda mahu. Kalau dunia realiti ada Earth Hour untuk menunjukkan sokongan kepada penjimatan tenaga, blog anda pun boleh.:)

Contoh blog apabila diletakkan energy saver seperti gambar di bawah.

Tutorial untuk letakkan energy saver ini seperti berikut.

1. Dari dashboard > design > edit html.
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi Find (ctrl + F), cari kod </head>

3. Copy kod di bawah dan paste SEBELUM kod </head>

<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>

Contoh:

4. Save dan lihat hasilnya.

Nota: Anda perlu biarkan selama 1 minit untuk energy saver memulakan operasi.:)

p/s: Original code : www.onlineleaf.com/

Tutorial Buat Tab Menu / Navbar Menu

2011-06-26T21:45:00.006+08:00

Mempunyai tab menu ataupun navbar menu dalam sesebuah blog boleh digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog. Anda boleh lihat contoh tab menu yang ringkas di sini

Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut.

1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod ]]></b:skin>
2.1 Jika tidak jumpa, cari kod </head>

3. Copy dan paste kod di bawah SEBELUM kod yang anda jumpa di langkah 2 @ 2.1

ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#FF0099;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
-moz-border-radius: 5px;
}

ul#list-nav li a:hover {
background:#FF6699;
color:#000
-moz-border-radius: 5px;
}

Contoh.:

4. Save template anda.

5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript

6. Copy dan paste kod di bawah di dalam HTML/javascript kemudian tukarkan 'Link' dengan link yang anda mahu letak di tab menu.
Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>

Selepas selesai masukkan link yang dikehendaki,
save.

<div>
<ul id='list-nav'>
<li><a href='Link'>Home</a></li>
<li><a href='Link'>About Us</a></li>
<li><a href='Link'>Services</a></li>
<li><a href='Link'>Products</a></li>
<li><a href='Link'>Contact</a></li>
</ul>
</div>

7. Drag ke bawah element header, save dan lihat hasilnya.:)

Nota 1: Untuk langkah 3, anda boleh ubah beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang anda mahukan.

Nota 2: Jika anda hendak tambah tab menu, copy paste barisan di langkah 6.

Happy blogging.:)

Tips Menaip Entri Dalam Blog : Part 2

2011-06-25T20:25:00.002+08:00

Sambungan daripada tips menaip entri dalam blog part 1, entri kali ini akan memberikan 3 lagi point yang boleh dititikberatkan jika anda menaip entri di dalam blog. Bagi yang belum membaca part 1, anda boleh baca dahulu sebelum sambung entri ini. Atau mana-mana dahulu pun boleh.:)

Untuk kali ini, 3 lagi point yang anda perlu pertimbangkan untuk menaip adalah seperti berikut.

1. Gambar

Meletakkan gambar adalah penting untuk sesebuah entri. Kewujudan gambar akan lebih mencorakkan lagi apa yang anda taip di dalam blog. Jadi gambar sememangnya mempengaruhi minat pengunjung untuk membaca kandungan entri anda.

Kalau anda baca buku, kan best kalau ada diselitkan gambar. Begitu juga entri blog. Paling kurang gambar yang ada adalah sekeping atau berapa banyak yang dirasakan perlu. Tetapi pastikan juga jangan letak terlalu banyak gambar dalam entri melainkan entri yang memang berbentuk penerangan bergambar.

2. Provokasi

Adakah bagus untuk melakukan provokasi semasa menaip blog.?. Jawapannya adalah YA. Menaip entri yang berbentuk provokasi sememangnya salah satu teknik menaip yang mampu menarik lebih ramai pengunjung untuk membaca dan komen.

Tetapi harus diingatkan, jangan melakukan provokasi yang bersifat keras. Lakukan provokasi yang lebih bersifat lembut dan menarik orang untuk membaca dan komen yang bernas, bukannya membaca dan di balas dengan cacian. Dan jika anda hendak tahu, entri yang melakukan provokasi pada jantina yang berlainan lagi bagus.:)

Provokasi akan membuatkan pembaca berasa 'geram' untuk baca dan komen..:). Contoh provokasi 'lembut' untuk lelaki, Lelaki memang banyak bagi alasan macam ni eh.?, dan contoh provokasi 'lembut' terhadap perempuan yang pernah ditaip sebelum ini.,Perempuan memang selalu macam ni eh. So entri ini akan membuatkan pembaca akan berasa relax untuk membaca dan rasa hendak komen je berbanding entri berbentuk fakta.:)

3. Persoalan.

Tinggalkan persoalan untuk entri anda. Persoalan juga boleh memacu pembaca untuk ingin selalu mengikuti setiap entri anda. Selain itu, persoalan juga membolehkan pembaca lebih berminat untuk menghantar komen.

Contoh, jika anda buat persoalan, "Hendak tahu apa yang terjadi lepas tu.? Nanti aku cerita dalam entri akan datang ye.". Apabila membaca, pembaca ingin tahu apa yang berlaku dan kemungkinan akan datang lagi untuk membaca. Kerana entri anda menimbulkan pertanyaan di pikiran mereka.

Juga boleh tinggalkan persoalan di akhir entri untuk pendapat, seperti " Apa yang korang rasa, perlu tak aku teruskan hubungan ini?"..(psst:tetapi janganla setiap entri ada persoalan pula.:)

Entri sebegini akan membentuk satu pembacaan yang bercorak pelbagai, bukan entri yang berbentuk mendatar sahaja.:)

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

Kebiasaaannya, untuk menghasilkan entri yang menarik, ianya lebih kepada pendekatan psikologi dan pengetahuan anda kepada sifat dan perlakuan manusia. Sebab jika anda menaip entri sebenarnya banyak pandangan orang dari perspektif yang berbeza. So ianya bergantung bagaimana anda tackle emosi pengunjung blog anda. Dan cara untuk tackle adalah hasilkan entri yang menarik perhatian mahkluk bernama manusia.:)

Tutorial Buat Scroll Box Untuk Blog Archive

2011-06-19T19:46:00.000+08:00

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)

Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.

1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>

Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.

Selepas

4. Save dan lihat hasilnya.:)

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

Untuk scroll box widget lain yang menggunakan html code, boleh rujuk tutorial scroll box untuk widget

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

2011-06-13T19:27:00.003+08:00

Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.

Anda boleh lihat kesannya secara real di test blog ini.:)

Tutorial untuk membuat kesan khas pada gambar ini adalah seperti berikut.

1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi find (ctrl + F), cari kod a img {

3. Delete kod selepas a img {, dan gantikan kod di bawah.

-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:
Sebelum

Selepas

4. Save dan lihat hasilnya..:)

UPDATE:
Bagi yang tidak jumpa kod a img {,
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Note:
Anda boleh mengubah warna hover effect. Default warna pink (warna kegemaran perempuan ni.:).
Kalau hendak tukar warna lain, tukarkan FF66CC dalam kod di atas dengan kod warna yang anda suka. (kod warna lain boleh rujuk di sini)

Tukar Gambar Apabila Dilalukan Cursor

2011-05-31T20:02:00.005+08:00

Memasang gambar yang boleh bertukar semasa dilalukan cursor di blog mungkin boleh menambah sedikit kelainan pada blog anda. Dan juga gambar yang disertakan dengan link boleh menarik sedikit perhatian.

Contohnya, cuba lalukan cursor anda pada gambar di bawah. (Dan juga boleh klik untuk ke blog ohbest)

Tutorial adalah seperti berikut.

1. Gunakan kod di bawah, tukarkan link yang anda mahu, url gambar pertama dan url gambar kedua.

<a href="Target link" target="_blank"><img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" /></a>

Contoh untuk kod untuk demo di atas adalah

<a href="http://ohbest.blogspot.com" target="_blank"><img src="http://i.imgur.com/Z5B1M.png" onmouseover="this.src='http://i.imgur.com/PlE1J.jpg'" onmouseout="this.src='http://i.imgur.com/Z5B1M.png'" /></a>

2. Anda boleh post di dalam entri blog anda seperti biasa ataupun boleh letakkan di sidebar.

Senang dan mudah bukan.?.:)

Nota: Jika mahu gambar sahaja tanpa link, kodnya seperti dibawah.

<img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" />

Selamat mencuba.:)

Cara Unfollow Blog | Stop Following Blog

2011-05-24T22:44:00.003+08:00

Bagi seseorang blogger, biasa untuk istilah follow sesebuah blog. Walau bagaimanapun, ada ketikanya kita akan terasa untuk berhenti daripada follow blog tersebut mungkin disebabkan beberapa perkara yang mungkin kita tidak suka dengan blog tersebut

Tutorial kali ini akan menunjukkan cara untuk unfollow blog, ataupun stop following blog.

1. Dari dashboard, scroll ke bawah sehingga jumpa tab blogs i'm following, kemudian klik pada Manage

2. Senarai blog yang anda follow akan keluar, kemudian klik pada settings

3. Jika diminta akaun, masukkan akan google anda. Jika sudah login, teruskan pada langkah 4.

4. Pada sebelah kanan, klik pada stop following this site

5. Bila keluar pengesahan, klik pada Stop following.

Tambahan: Jika anda mempunyai banyak blog untuk unfollow pada satu masa, pilih tab sites you've joined, dan anad boleh pilih terus sahaja untuk stop following

Letak Emotion Icon Dalam Komen

2011-05-22T19:36:00.004+08:00

Kebiasaannya komen dalam blog anda adalah dalam bentuk perkataan semata-mata. Tetapi mahukah kalau komen untuk blog anda juga boleh diletakkan emotion.?
Tentu lebih menarik dengan adanya emotion.

Contoh seperti gambar di bawah, dan anda juga boleh mencubanya sendiri di test blog.

Tutorial untuk letakkan emotion icon dalam komen adalah seperti berikut.

1. Dari dashboard > design > edit HTML > Expand widget template

2. Backup template (download full template) anda untuk langkah berjaga². (more info)

3. Menggunakan fungsi find,(ctrl + F) cari </body> dan letakkan kod di bawah sebelum </body>

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

contoh:

4. Menggunakan fungsi find lagi, (ctrl + F), cari <b:if cond='data:post.embedCommentForm'> dan letakkan kod di bawah selepas kod <b:if cond='data:post.embedCommentForm'>

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>To Use A Smiley In Your Comment, Simply Add The Characters Beside Your Choosen Smiley To The Comment:
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) <a href='http://tutorialuntukblog.blogspot.com/2011/05/letak-emotion-icon-dalam-komen.html'target="_blank"><small>Grab tutorial here</small></a>
</b>
</div>

contoh:

5. Save dan lihat hasilnya di ruangan komen anda.:)

Tutorial Perkataan Ikut Cursor

2011-05-21T22:24:00.001+08:00

Ingin perkataan mengikut cursor anda semasa melayari blog.?

Contohnya seperti di bawah.

Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript (more info)

2. Copy dan paste kod berikut dalam html/javascript yang anda buka.

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Perkataan anda di sini";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>

Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.

3. Save dan lihat hasilnya.:)

Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.

1.Tukar style

font-style: normal; (pilihan lain italic, oblique, atau inherit)

2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code

3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)

Following Star Pada Cursor

2011-05-15T23:35:00.000+08:00

Adakah anda suka kalau cursor yang anda guna untuk blog ada beberapa bintang kecil berwarna yang mengikutinya.? Contoh macam gambar di bawah.

Kalau anda suka, ini ada tutorialnya.:)

1. Dari dashboard > design > add a gadget > HTML/javasrcript [link]

2. Copy code di bawah mengikut kesukaan anda dan paste ke dalam HTML/javascript

i) Following star warna warni

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

ii) Following star warna biru

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

iii) Following star warna purple

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

3. Save dan lihat hasilnya.:)

Tutorial Tukar Warna Text Highlight

2011-05-04T23:57:00.002+08:00

Apabila seseorang highlight text dalam blog, warna yang akan keluar adalah biru, itu default.
Tetapi ada juga tutorial yang membolehkan anda menukar warna text selection ini seperti contoh di bawah.

Default.

Selepas tukar warna text selection

Tutorial untuk tukar warna text selection adalah seperti berikut.

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find, cari code body {

3. Selepas jumpa code body {, pastekan kod di bawah di atas body {

::-moz-selection {
background: #CC3399;
color: #ffffff;
}

Contoh:

Note: Anda boleh menukar warna text highlight dengan menggantikan warna kod yang dihighlight di atas.

4. Save dan lihat hasilnya..:)

Pssst.. Mencari kod warna.?
Rujuk di bawah.:)

Title Bar Maker

2011-05-03T20:13:00.007+08:00

Sebelum ini sudah ada tutorial untuk buat title blog bergerak dari kanan ke kiri, untuk kali ini, dibawakan terus title bar generator.

contoh title bar (title blog)

Pilihan yang ada untuk title bar maker ini.

Anda boleh memilih pelbagai jenis gerakan yang anda mahukan dan setting yang begitu mudah.

Title bar generator adalah seperti di bawah.

1. Masukkan maklumat yang anda mahu.

2. Klik preview untuk tengok contoh paparan. Dan jika berpuas hati, klik pada 'OK, generate code!'

3. Code yang anda perolehi, copy dan paste pada HTML/javascript blog anda.
(dashboard > design > add a gadget > HTML/javascript ) [link tutorial]

4. Siap. Senang dan mudah kan.:)

Tips Menaip Entri Dalam Blog : Part 1

2011-05-02T23:30:00.001+08:00

Cara penghasilan entri dalam blog merupakan element yang perlu dititikberatkan untuk menaip dalam blog. Walaupun blog tidak mempunyai format untuk menaip seperti mana karangan bahasa melayu, tetapi cara menghasilkan entri dalam blog penting untuk mencerminkan bagaimana pemilik blog menguruskan blog sendiri.

Cara menaip yang bagus juga akan memastikan pengunjung blog anda akan tertarik kepada blog anda, ditambah pula dengan faktor-faktor lain. Boleh dikatakan, cara menaip dalam blog antara perkara yang tidak boleh dipandang enteng oleh pemilik blog.

Apakah cara/bagaimanakah kandungan blog yang sepatutnya untuk menaip sesebuah entri?.

1. Perenggan

Ini sebenarnya antara perkara yang paling penting semasa menaip sesuatu dalam blog. Tidak kiralah samada blog berbentuk peribadi, maklumat, perkongsian, pengalaman atau apa sahaja. Perenggan akan memudahkan pengunjung blog anda membaca apa yang anda hendak sampaikan. Dan juga mempengaruhi pemahaman untuk sesebuah entri.

Ini adalah perenggan kedua. Tengok untuk taip point ini pun perenggan di buat untuk memudahkan anda membaca bukan.?.:). Bayangkan kalau sesebuah entri itu mempunyai ayat yang berterusan 1000 patah perkataan, tidak ke letih mata melihatnya. Hendak membaca pun boleh jadi tiada mood.:). Lagipun karangan masa sekolah pun diajar untuk buat perenggan, jadi kenapa tidak aplikasikan dalam penulisan blog.:)

2. Perkataan.

Perkataan juga memainkan peranan dalam menghasilkan sebuat entri yang baik. Pastikan kalau bleh anda menggunakan perkataan bahasa baku sebanyak mungkin dan penting juga perkataan yang anda gunakan mudah difahami oleh pengunjung. Sekali sekala tiada masalah kalau hendak guna short form atau perkataan meleret. Tapi kalau selalu sangat, hendak membaca pun tergeliat lidah hendak menyebutnya.

Contoh, Sayeeerr sukerr sangat tawww...Kalau ayat macam ini diletakkan untuk dialog ok lagi. Kalau sepanjang-panjang entri perkataan macam ini, sakit juga hendak membaca.:). tujuan menghasilkan entri juga untuk memudahkan kefahaman kepada pengunjung blog. Contoh walaupun anda seorang doctor, takkan semua entri hendak guna bahasa saintifik je kan. Lainlah kalau pengunjung blog anda semuanya doktor.:)

3. Entri jangan terlalu panjang.

Mungkin anda seorang yang begitu hebat mengarang. Tetapi kehebatan anda mengarang sehingga sehari tanpa henti bukan petunjuk yang baik kepada pengunjung anda. Pembaca juga akan merasa bosan jika entri yang dihasilkan terlalu panjang. Lagi satu, jika entri terlalu panjang, kemungkinan untuk melalut (lari dari tajuk entri) juga boleh berlaku.

Oleh itu biarkan entri anda bersesuaian untuk dibaca, mungkin ambil masa 5 minit berbanding anda menghasilkan entri yang memerlukan 1jam untuk habiskan.:).
Tetapi, jika memang anda anda perkara bagus atau penting untuk diberitahu pengunjung, boleh dijadikan dalam beberapa bahagian entri. seperti part 1, part 2 dan seterusnya. Itu akan lebih selesa di baca berbanding satu entri yang terlalu panjang.

Adakah anda juga perasan entri ini baru sahaja untuk part 1.?.:)

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

Menaip entri dengan cara yang betul untuk mengekalkan blog anda lebih kepada mesra pengunjung. Kecualilah kalau blog anda tu anda baca seorang sahaja.:)

Dan tunggukan untuk next entri untuk tips menaip entri dalam blog untuk part 2.:)

Happy blogging.:)

Note: Entri asal ditaip diblog unwanted86.blogspot.com.

Tutorial Gerakkan Title Blog

2011-05-02T19:27:00.008+08:00

Title blog secara default adalah dalam keadaan statik. Anda boleh tukarkan title blog anda dengan mudah dan juga anda boleh membuatkan ianya bergerak dari kanan ke kiri.

Tutorial untuk buatkan title blog bergerak adalah seperti berikut.

1. Dari dashboard > Design > Add a gadget > Html/Javascript

2. Copy dan paste code berikut dalam ruangan HTML/Javascript

<script language=javascript>
msg = "Title Blog Anda";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

Note: Tukarkan 'Title Blog Anda' dengan apa sahaja yang anda mahu.

3. Save dan lihat hasilnya.:)

Update:
Mahu lebih banyak gerakan untuk title blog ini.? rujuk entri http://tutorialuntukblog.blogspot.com/2011/05/title-bar-maker.html

Cara Buat Bubble Cursor Pada Blog

2011-04-19T23:58:00.004+08:00

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.

Selamat Mencuba.:)

Cara Letak Sitemap Di Blog

2011-04-18T07:17:00.001+08:00

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&alt=json-in-script&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.

Ketahui Kelajuan Load Element Blog

2011-03-28T07:17:00.000+08:00

Kecepatan sesebuah blog untuk dibuka oleh pengunjung juga memainkan peranan penting dalam dunia blogging. Selain bergantung kepada jenis browser yang digunakan dan kecepatan internet, perkara penting lain adalah kandungan element yang mencorakkan sesebuah blog.

Bagaimana anda hendak tahu selaju mana blog anda load, dan apakah element yang tidak mendatangkan masalah, dan elemen manakah yang menyumbang kepada masalah lambat load pada blog anda.?

Caranya mudah sahaja.

1. Buka website ini. http://tools.pingdom.com

2. Masukkan url blog anda, kemudian tekan 'test now'

3. Setelah seketika, anda akan dapat sedikit informasi tentang blog anda, dan yang paling penting adalah masa load setiap element. Tindakan seterusnya bergantung kepada kehendak anda.:)

p/s: Kebiasaanya yang menyebabkan lambat adalah gambar beranimasi ataupun javascript.:)

Disable Highlight Entri Blog

2011-03-14T07:00:00.000+08:00

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.:)

Letak Button Like Untuk Blog

2011-01-04T07:00:00.000+08:00

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.:)

Ketahui Jumlah Post dan Jumlah Komen dalam Blog

2011-01-04T00:25:00.004+08:00

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.:)

Ubah Lebar Gambar Dalam Entri

2010-12-02T06:38:00.001+08:00

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.:)

Paparkan Saiz Gambar Maksimum Dalam Blog

2010-11-22T23:16:00.006+08:00

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.:)

Scroll Box untuk Widget

2010-10-18T08:00:00.000+08:00

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.

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..:)

Misterlinky - cara mudah untuk pengunjung masukkan link di blog

2010-10-17T23:06:00.007+08:00

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)

Letak Facebok Button 'Like' Dalam Blog

2010-09-20T08:27:00.000+08:00

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.

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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

contoh:

4. Save dan lihat hasilnya.:)

Letak Facebook Share Button dalam Blog

2010-09-18T09:41:00.000+08:00

Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook.

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.

Jadikan Cursor Anda Berkilauan (sparkle)

2010-08-28T10:00:00.000+08:00

Tutorial ini akan menunjukkan bagaimana untuk menjadikan cursor anda menghasilkan 'bintang²' yang berkerlipan. Terdapat pelbagai jenis warna yang telah diletakkan untuk memudahkan pemilik blog sesuaikan dengan warna thema masing². Kata lain yang mungkin sesuai ialah untuk menjadikan cursor anda sparkle.(tak tahu istilah betul apa untuk effect ini.:)

Kalau masih tidak faham bagaimana hasilnya, boleh lihat contoh gambar di bawah.:)

Sebelum itu, tutorial ini juga boleh digambungkan dengan tutorial tukar cursor pada blog anda. Semestinya untuk menjadikannya lebih menarik. Sudah di'test' dan dibuktikan boleh.:)

Tutorial untuk membuatkan cursor anda menjadi sparkle adalah seperti berikut:

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

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

<script src="URL JS" type="text/javascript"></script>

Note: untuk URL JS, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki

Biru - https://sites.google.com/site/unwanted86/javascript/biru.js

Hitam - https://sites.google.com/site/unwanted86/javascript/black.js

hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js

Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js

Putih - https://sites.google.com/site/unwanted86/javascript/putih.js

Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js

Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js

Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js

Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:

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

3. Apabila sudah masukkan kod, save dan lihat hasilnya..

Senang bukan.?
Selamat mencuba.:)

Top Commentor Widget

2010-08-26T06:39:00.000+08:00

Siapakah yang paling kerap komen pada blog anda.? Jika itu persoalannya, widget ini adalah jawapannya.:). Widget top commentor ini merupakan antara yang paling 'lengkap' ada ketika ini untuk sesiapa yang menggunakan platform blogger.

Ini kerana, dengan widget ini anda boleh menentukan siapakan yang paling kerap komen dengan ciri-ciri tambahan tertentu iaitu anda boleh tetapkan samada komen untuk keseluruhan blog anda sejak diwujudkan, ataupun pada jangka masa yang tertentu seperti sebulan atau lain-lain jangka masa Selain itu, dengan widget ni, senarai pengomen yang anda tidak mahu masukkan dalam senarai pun boleh dikecualikan.

Tutorial untuk memasang widget top commentor adalah seperti berikut.

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

2. Paste kod berikut ke ruangan HTML/javascript

<script type="text/javascript">
function getYpipe(feed) {
document.write('<ol>');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://URL ANDA.blogspot.com
&ExcludedNick1=NAME1
&ExcludedNick2=NAME2
&ExcludedNick3=NAME3
&ShowHowMany=10
&ExcludeCommentsBefore=08-01-2010 (i.e. 01-01-2010)
&IncludeCommentsBefore=08-31-2010 (i.e. 01-31-2010)
&_callback=getYpipe
&_id=932ec72eca30a5b8a83365f4eb4349cd
&_render=json"
type="text/javascript"></script>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/top-commentor-widget.html">Get this widget here</a></small>

Note:

i.Tukarkan URL ANDA dengan url blog anda

ii.NAME 1, NAME 2, NAME 3 - letakkan dengan nama yang anda tidak kehendaki. Anonymous automatic terkecuali, Untuk tahu senarai nama yang mungkin anda tidak mahu, savekan dahulu, apabila dipaparkan diblog,baru anda tahu. Jika tidak mahu abaikan bahagian ini.

iii.SHOW HOW MANY - gantikan dengan berapa bilangan yang anda mahu dipaparkan

iv.Comment Before: Contoh yang diberi adalah coment untuk bulan 8 sahaja. Jika mahu senarai pengomen dari keseluruhan, tinggalkan kosong bahagian ini

3. Apabila selesai, save dan lihat hasilnya.:)

Animated Recent Post Widget

2010-08-23T10:31:00.007+08:00

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

</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 Cursor Untuk Blog Anda

2010-08-22T10:26:00.000+08:00

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.:)

Letak Widget Popular Post Dalam Blog

2010-08-20T21:23:00.005+08:00

Anda menaip blog, tetapi adakah anda tahu dalam banyak-banyak entri yang anda ada, entri manakah yang paling popular.? Entri manakah yang mempunyai komen paling tinggi.? Tentu sukar untuk menentukan apatah lagi jika anda sudahpun mempunyai entri sehingga mencapai ratusan.:)

Tutorial kali ini akan menunjukkan cara bagaimana untuk meletakkan popular post( atau anda boleh panggil dengan nama lain) pada blog anda. Widget popular post ini adalah berdasarkan bilangan komen yang ada pada entri, bukannya berdasarkan page view. Dan semestinya tutorial ini adalah mudah sahaja.:)

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

2. Dalam ruangan HTML/javascript, masukkan kod di bawah.

<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://URL BLOG.blogspot.com/";
</script>
<script src='https://sites.google.com/site/unwanted86/javascript/unwanted86-popularpost.js' type='text/javascript'></script>
</ul><br/><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-widget-popular-post-dalam-blog.html" target="_blank"/>Get this widget here </a></small>

Note:
-tukarkan URL BLOG dengan nama blog yang anda guna
-maxshowresult=5; tukarkan 5 dengan bilangan popular post yang anda mahu

3. Save dan lihat hasilnya..:)

Letak Button Back To Top

2010-08-19T08:11:00.001+08:00

Meletakkan button 'back to top' biasanya digunakan untuk blogger yang kebiasaannya mempunyai entri yang panjang, ataupun entri blog tersebut sentiasa mempunyai komen yang banyak atau mungkin juga sebagai penyeri agaknya.:)
anda boleh melihat contoh back to top button di blog demo ini.

Walaupun terdapat pelbagai cara yang agak advance dengan kesan yang lagi hebat-hebat, tetapi entri ini akan menunjukkan cara yang paling ringkas untuk meletakkan button back to top ini. Tidak perlu pening kepala kerana ia hanya menggunakan beberapa step sahaja.:)

Berikut adalah tutorial untuk meletakkan button back to top dalam blog.

1. Login akaun blog anda, kemudian dari dashboard > design > add a gadget > html/javascript

2. Paste kod di bawah ke dalam ruangan html/javascript

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>

Masukkan url gambar dengan url gambar 'arrow back to top' anda.

Disini ada beberapa jenis arrow diletakkan, hanya untuk memudahkan. Tetapi jika anda ingin mencari pelbagai lagi jenis back to top arrow, anda Google sahaja.

http://img338.imageshack.us/img338/9871/2evyotw.gif

http://img132.imageshack.us/img132/5848/totopbutton.png

http://img175.imageshack.us/img175/7297/up3.png

http://img28.imageshack.us/img28/2494/30720265.png

http://img529.imageshack.us/img529/1986/96133335.png

http://img294.imageshack.us/img294/9831/14193731.gif

3. Apabila selesai save dan lihatlah hasilnya.:)

Cara Buat Textbox Dalam Blog

2010-08-16T07:24:00.002+08:00

Membuat 'kotak' untuk apa sahaja yang anda ingin pamerkan dapat memudahkan para pengunjung untuk mengambil apa yang anda hendak kongsi, kebiasaannya kod atau mungkin juga lain-lain.

Contoh textbox sedia ada adalah textbox untuk code banner blog ini yang kelihatan di sebelah kanan blog ini.Textbox menjadikan code senang dicopy oleh pengunjung anda dan pada masa yang sama menampakkan kekemasan untuk meletakkan code dalam blog anda.

Tutorial ini akan menunjukkan kepada anda asas kepada textbox ini serta beberapa penambahan yang boleh dilakukan untuk memudahkan pemilik blog ataupun pengunjung.

Contoh kod yang hendak diletakkan didalam textbox adalah seperti berikut.

<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank">
<img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" />
</a></center>

1. Asas bagi textbox adalah.

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;">MASUKKAN KOD ANDA DISINI</textarea>

Note:
height: 100px; > Gantikan dengan ketinggian yang anda kehendaki
width: 200px; > Gantikan dengan lebar yang anda kehendaki
background: #8CEFFD; Gantikan warna background dengan kod tertentu. Untuk kod warna, rujuk disini.

Contoh bagi kod di atas.

2. Untuk buatkan semua kod tersebut di'select' dengan hanya sekali klik pada textbox. Kodnya adalah:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onclick="this.focus();this.select()" >MASUKKAN KOD ANDA DISINI</textarea>

Contoh textbox jenis ini adalah seperti berikut.

<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank"><br /><br /></a></center>

3. Untuk buatkan kod di'select' dengan hanya lalukan tetikus adalah seperti berikut

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onmouseover="this.focus()" onfocus="this.select()" >MASUKKAN KOD ANDA DISINI</textarea>

contox textbox jenis ini adalah

Mudah bukan.?
Kini anda boleh meletakkan kod didalam blog anda dengan lebih mudah dan kemas.

Selamat mencuba.:)

HTML Color Codes

2010-08-16T07:22:00.000+08:00

Kod warna adalah penting untuk memasukkan warna background ke dalam sesuatu kod samada untuk pengubahsuaian layout atau penambahan gadget tertentu.

Berikut adalah kod warna yang ada untuk memudahkan semua sebagai rujukan.

Letak 'Recent Comments' dalam Blog

2010-08-12T11:18:00.011+08:00

Meletakkan 'recent comments' adalah cara yang paling mudah untuk mengetahui entri manakah yang paling latest menerima komen samada dari pengunjung blog ataupun tuan punya blog.

Walaupun terdapat pelbagai cara untuk meletakkan 'recent comments' ini, tetapi cara yang akan ditunjukkan ini merupakan antara cara paling ringkas untuk meletakkan widget ini.

Tutorialnya adalah seperti berikut.

1. Login akaun blogger, kemudian dari dashboard > Design > add a gadget >HTML/javascript

2. Kemudian masukkan kod di bawah ke dalam HTML/javascript

<script style=text/javascript src=http://www.freewebs.com/filer/blogger/rc1blogger.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://URL blog anda/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-recent-comments-dalam-blog.html" target="_blank"/>Get widget here </a></small>

Nota: tukarkan URL blog anda dalam kod di atas dengan url blog anda.

3. Save dan tengok hasilnya..:)

TAMBAHAN:Ubahsuai juga boleh dilakukan seperti berikut.

1. Jumlah komen yang ditetapkan untuk dipapar adalah 5. Anda boleh mengubah bilangan komen yang dipaparkan. Lihat kod dibawah sebagai rujukan. Bilangan yang dicadangkan adalah antara 4 - 8

....a_rc=5;var m_rc=false...

2.Jumlah perkataan yang ditetapkan untuk satu comment adalah termasuk nama pengomen adalah 100. Anda boleh menukar jumlah tersebut mengikut keselesaan anda.

var o_rc=100;

3. Tarikh untuk komen juga boleh ditambah. Caranya tukar perkataan dalam kod berikut daripada false kepada true.

var m_rc=false;var n_rc=true;var o_rc=100

Selamat mencuba..:)

Letak Background Gambar Pada Blockquote

2010-07-11T16:57:00.003+08:00

Sebelum ini sudah ada tutorial untuk menukar warna background bagi blockquote. tetapi untuk kali ini, tutorial ini akan menunjukkan pula bagaimana untuk meletakkan background bergambar bagi blockquote.

Contoh blockquote dengan background warna biasa

Contoh background dengan background bergambar

Kelebihan letak gambar sebagai background untuk blockquote adalah untuk menjadikan blockquote lebih cantik dan menarik. semestinya anda ingin berbeza berbanding hanya meletakkan background berwarna yang biasa bukan.:)

Untuk menukar kepada background bergambar, tutorialnya adalah mudah sahaja.

Cuma sebelum itu, anda hendaklah tahu gambar apa yang anda mahu letak sebagai background blockquote anda. Ini kerana pemilihan gambar bersaiz besar adalah kurang sesuai. Gambar yang paling sesuai untuk dijadikan background untuk adalah background blockquote adalah jenis seamless tile.

Anda boleh google untuk pelbagai jenis background jenis ini, selain itu disini ada 2 web yang nawarkan seamless tile background. Boleh pilih gambar yang dirasakan bersesuaian dengan warna tulisan pada blog anda.

Free Seamless Tiles 1
Free Seamless Tiles 2

Tutorial untuk menukar background blockquote ini adalah seperti berikut.

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3.Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut

.post blockquote {

4. Kemudian di bawah kod tersebut, letakkan kod ini.

background-image:url(url gambar);

url gambar: tukarkan dengan url gambar yang anda hendak jadikan background. ( Tutorial url gambar : click here)

p/s: contoh kod adalah seperti berikut

5. Apabila selesai, save template dan lihat hasilnya.:)

Cara dapatkan url gambar

2010-04-05T07:03:00.001+08:00

Apabila menguruskan sesebuah blog, tidak akan terlepas untuk meletakkan gambar. Mungkin tujuan untuk meletakkan gambar adalah pelbagai, tetapi perkara penting untuk diketahui adalah url gambar. Url gambar boleh dikatakan sebagai 'alamat' kepada sesebuah gambar.

Sebagai contoh, untuk gambar ini, urlnya adalah ini http://3.bp.blogspot.com/_CEj8AwvwSNM/S7jQoxh5CBI/AAAAAAAAENA/UZiN0WCeDpE/blog+tutorial+bahasa+melayu.PNG

Walaupun anda boleh mengupload gambar menggunakan kaedah yang sudah tersedia, tetapi ada kalanya anda memerlukan url bagi sesebuah gambar terutamanya apabila melibatkan trick yang hendak diletakkan pada blog.

Persoalan asas, bagaimana untuk mengetahui url bagi sesebuah gambar yang sudah tersedia dalam laman web.

Sebagai contoh gambar tadi, bagaimana untuk mendapatkan urlnya.
Disini diletakkan cara yang digunakan untuk beberapa browser yang berbeza.

Caranya mudah, pada gambar yang anda kehendaki dalam sesebuah laman web, right click pada gambar tersebut dan pilihan ada berbeza seperti yang ditunjukkan di bawah.

FIREFOX

GOOGLE CHROME

OPERA

SAFARI

INTERENT EXPLORER
(agak leceh sedikit kerana ada dua step)

-----------------------------
anda boleh cuba samada berjaya dengan masukkan url gambar dalam kod ini kemudian test pada ruangan post entri anda.

<img src="Masukkan URL gambar disini" />

p/s: perlu diberi perhatian ada sesetengah laman web yang anda tidak boleh copy gambar-gambar mereka seperti fotography dan lain². Tetapi rasanya kebanyakan tiada masalah asalkan mendapat kebenaran daripada empunya.

Letak sistem rating pada blog

2010-03-31T07:50:00.007+08:00

Adakah anda rasakan pengunjung blog anda menyukai entri yang anda post dalam blog anda.?
Bagaimana anda menentukan samada mereka suka atau tidak entri pada blog.? Adakah semata² melalui komen yang di hantar.?

Kini dengan menggunakan sistem rating, anda dapat menilai tahap 'kesukaan' pengunjung blog anda terhadapa entri yang anda taip dengan lebih stylo.:)

Contoh sistem ini telah diletakkan di test blog

Cara untuk letak sistem ini agak senang kerana tidak memerlukan anda untuk ubah code html anda, semuanya tersedia dan anda hanya perlu ikuti beberapa langkah berikut.

1. Login akaun blogger anda.

2. Buka web http://www.outbrain.com

3. Pada paparan pilih option yang anda.

-->Digalakkan untuk mendaftar untuk mendapatkan maklumat rating dan juga (paling penting bagi aku) untuk membuang 'related post' yang didatangkan secara automatic dalam sistem ini.

4. Klik install dan paparan baru akan muncul

5. Pada paparan, pilih blog anda kemudian klik 'add widget'.

6. Selesai. (Anda boleh buat pengubahsuaianan daripada akaun yang anda telah buat sebelum ini)

Youtube : Video Player kepada MP3 Player

2010-03-25T07:00:00.001+08:00

Youtube memainkan peranan penting untuk seseorang blogger untuk memaparkan video yang tertentu. Bagi kategori muzik, video dapat menambahkan lagi seri sesebuah lagu. Walau bagaimanapun, ada ketikanya paparan videonya tidak diperlukan, samada disebabkan video tersebut memaparkan gambar statik atau mungkin juga pemilik blog hanya ingin mempersembahkan 'lagu' sahaja kepada pengunjung.

Tutorial ini akan menerangkan bagaimana untuk menjadikan video dari youtube kepada bentuk mp3 player.

Contoh anda ingin menukarkan video ini dalam bentuk mp3 player.

kepada

-----------
Tutorial untuk menukarkan keadaan ini adalah:

1. Dapatkan link video (URL) dari youtube.

Contoh untuk lagu di atas:
http://www.youtube.com/watch?v=_eYj0B5LwOo

2. Buang 'watch?' dan gantikan '=' kepada '/'

Contoh :
http://www.youtube.com/watch?v=_eYj0B5LwOo kepada
http://www.youtube.com/v/_eYj0B5LwOo

3.Masukkan link yang anda telah ubah ke dalam kod berikut.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="LINK DISINI"></embed>

contoh untuk kod di atas.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/_eYj0B5LwOo"></embed>

4.Dan hasilnya.

Senang bukan.?.:)

Letak Ruangan Komen Di Bawah Entri.

2010-03-22T07:00:00.000+08:00

Meletakkan ruangan komen di bawah entri dapat memudahkan pengunjung sesebuah blog untuk menghantar komen pada entri yang ditaip.

Secara asasnya, blogger sudah menyediakan cara mudah untuk membolehkan sistem komen dalam blog anda muncul seperti ini.

Apa yang perlu dilakukan adalah enablekan sistem komen ini cara berikut.

1. Login akaun blogger anda, dari dashboard> settings>comments
Pada comments form placement, pilih 'embedded below post'

2. Save setting dan lihat hasilnya..

JIKA tidak berjaya.

3. Klik pada layout>edit html>Expand widget templates

4. Backup template anda dengan klik 'download full template'.

5. Tekan ctrl + F untuk mencari kod dibawah.

<b:include data='post' name='comments'/>

6. Letakkan kod ini dibawah kod yang anda jumpa pada langkah 5.

<b:include data='post' name='comment-form'/>

7. Save template anda dan lihat hasilnya.

Letak kesan salji dalam blog (Snow effect)

2010-03-15T07:00:00.000+08:00

Terasa blog anda begitu panas.?
Apa kata kalau sejukkan sedikit blog anda dengan meletakkan salji yang berterusan jatuh dari atas blog anda.:)

Untuk tutorial ini akan diletakkan 2 kod iaitu untuk salji putih dan salji hitam(ada juga salji hitam ye.:)

Demo untuk salji bewarna hitam boleh dilihat disini. DEMO

Cara untuk meletakkan salji dalam blog adalah seperti berikut.

1. Login akaun blogger, dari dashboard>layout>add a gadget>html/javascript

2. Copy salah satu kod berikut kemudian paste dalam ruangan html/javascript

Kod untuk salji putih (sesuai untuk background hitam)

<script type="text/javascript" src="http://www.yourjavascript.com/14104214083/snow-white.js"></script>

Kod untuk salji hitam (sesuai untuk background putih)

<script type="text/javascript" src="http://www.yourjavascript.com/03441140321/snow-black.js"></script>

3. Save dan lihat hasilnya.:)

Cara Buat Perkataan Bergerak (Scrolling/Marquee Text)

2010-03-14T10:09:00.007+08:00

Membuat perkataan yang bergerak dapat menarik minat pengunjung terhadap pergerakan tersebut seterusnya menarik minat pengunjung apa yang ingin disampaikan oleh pemilik blog. Selain dikenali sebagai scrolling text, ianya juga dikenali sebagai marquee text.

Walaupun pergerakan ini menarik minat, tetapi tidak digalakkan untuk diletakkan terlalu banyak di dalam blog kerana dibimbangi keadaan 'menarik' bertukar 'menyerabutkan'.:)

Berikut adalah tutorial untuk membuat perkataan bergerak.
Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.

1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah)

<marquee>Contoh scrolling text</marquee>

Output untuk kod ini seperti berikut:
Contoh scrolling text

2. Ubah pergerakan perkataan
Penambahan kod berikut diperlukan dalam kod asal.

direction="left"
direction="right"
direction="up"
direction="down"

Berikut contoh kod untuk pegerakan dari kanan ke kiri

<marquee direction="right" >Contoh scrolling text</marquee>

Output untuk kod ini adalah
Contoh scrolling text

3.Ubah warna background
Untuk ubah background, perlu diletakkan kod berikut

bgcolor="#kod warna"

Senarai kod warna boleh didapati disini.

Contoh kod yang diletakkan background,

<marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Output untuk kod ini adalah
Contoh scrolling text

4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.

behavior="alternate"

contoh kod yang diletakkan trick ini.

<marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Output untuk kod ini
Contoh scrolling text

5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut

scrollamount="2"

Contoh kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" scrollamount="2">Contoh scrolling text</marquee>

Output:
Scrollamount :2
Contoh scrolling text

Scrollamount :4
Contoh scrolling text

6. Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.

Penambahan kod yang perlu dilakukan adalah

onmouseover="this.stop()" onmouseout="this.start()"

Contoh kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>

output untuk trick ini.
Contoh scrolling text

Letak Gambar Sebelah Tajuk Entri

2010-03-12T09:53:00.001+08:00

Tajuk entri adalah antara perkara yang pertama dinilai oleh seseorang pengunjung yang mengunjungi sesebuah blog. Disamping mempunyai tajuk-tajuk entri yang gempak², kehadiran penghias juga dapat menambahkan lagi seri pada entri tersebut.

Antara salah satu perkara untuk menambahkan seri tajuk entri adalah dengan meletakkan gambar disebelah tajuk entri.

Contoh:

Berikut adalah langkah-langkah yang perlu dilakukan.

1.Login akaun blogger, dari dashboard >layout > edit html > expand widget templates

2.Tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian cari kod berikut.

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

3. Letakkan kod dibawah antara kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>

<img src="url gambar"/>

Contoh kod sepatutnya kelihatan seperti ini

Nota:
a. Tukarkan 'url gambar' dengan url gambar yang anda kehendaki
b. Saiz gambar yang biasa digunakan adalah dalam lingkungan 20x20 hingga 30x30.

4. Preview, dan jika anda berpuas hati klik save template.:)

Letak Tajuk Entri Pada Read More

2010-03-10T07:00:00.001+08:00

Kebiasaannya, apabila sesebuah blog menggunakan fungsi readmore, perkataan yang keluar adalah samada 'read more', 'baca lagi', 'klik untuk teruskan pembacaan' dan lain-lain tanpa melibatkan tajuk sesebuah entri.

Tutorial ini akan menerangkan bagaimana untuk menambah sedikit kod daripada tutorial readmore sebelum ini untuk membolehkan tajuk entri keluar secara automatic selepas perkataan 'readmore' (atau perkataan lain berkaitan'.

Sebelum

Selepas

Cara-cara untuk meletakkan kod untuk trick ini adalah seperti berikut.

1. Login akaun blogger dari dashboard > layout > edit HTML > expand widget templates

2. Klik ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut

<data:post.body/>

3. Dibawah kod <data:post.body/> , ada beberapa kod yang berkaitan dengan readmore, dan buat penambahan kod dibawah selepas perkataan 'readmore'(atau perkataan lain yang berkaitan)
-pastikan kod ini terletak sebelum </a>

<data:post.title/>

Lihat contoh dibawah untuk memudahkan.

4.Apabila selesai anda boleh save dan lihat hasilnya.:)

Tukar Warna Background Blockquote

2010-03-09T07:00:00.000+08:00

Blockquote bagi sesebuah blog/website biasanya digunakan untuk menunjukkan satu petikan yang melibatkan kata-kata yang hendak di'tekan'kan kepada pengunjung sesebuah blog.

Bagi blog, kod yang digunakan untuk blockquote adalah <blockquote> APAÂ² PETIKAN</blockquote>. Selain untuk menunjukkan petikan kata, blockquote juga digunakan untuk tujuan lain seperti mempamerkan kod (seperti yang dilakukan dalam blog ini)

Tutorial ini akan menunjukkan cara untuk menukar warna background bagi blockquote mengikut citarasa seseorang blogger.

Contoh blockquote yang telah ditukar warna background.

Cara untuk tukar warna background adalah seperti berikut.

1. Login akaun blogger, dari dashboard >layout > edit html >

2. Gunakan ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut.

.post blockquote {

3. Dibawah kod ini, masukkan kod berikut.

background:#KOD WARNA ;

KOD WARNA: boleh dapatkan merujuk kepada kod dibawah.

contoh:kod sepatutnya kelihatan seperti ini.

4. Save dan lihat hasilnya.

---------------
Sila rujuk web dibawah untuk kod gambar. Jika mahu dalam paparan windows berlainan, sila KLIK SINI

Letak Website Lain Dalam Entri

2010-03-08T07:30:00.001+08:00

Sebelum ini sudah terdapat tutorial yang menerangkan bagaimana untuk meletakkan website dalam blog. Untuk tutorial tersebut memerlukan anda untuk copy paste code dalam ruangan html/javascript. Tutorial tersebut sesuai untuk meletakkan website lain secara kekal di dalam blog yang akan dilihat setiap masa walau page mana yang dibuka dalam blog tersebut.

Bagaimana pula untuk meletakkan website hanya di dalam sesebuah entri.?

Tutorial ini pula akan menunjukkan cara untuk meletakkan website lain dalam entri blog dengan cara paling mudah..

Apabila anda menaip dalam blog anda, cuma tambahkan code ini untuk meletakkan website lain dalam entri blog anda.

<iframe src="LINK DISINI" width="98%" height="400" border="1"></iframe>

Link Disini : Masukkan url website yang anda kehendaki, contoh http://www.google.com
(pastikan anda tidak tertinggal http:// )

Contoh meletakkan youtube dalam entri blog adalah seperti berikut.

Jadi, jika anda membuat entri yang memerlukan pengunjung blog anda membuka website lain(mungkin sebagai bukti atau apa), biarkan pengunjung anda mencari terus di dalam entri yang anda post.:)

Cara Buat Dropdown Menu

2010-03-07T09:14:00.005+08:00

Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk meletakkan pelbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link kawan², link rujukan, link tips dan pelbagai lagi.

Contoh dropdown menu adalah seperti berikut

Tutorial untuk membuat dropdown menu ini adalah seperti berikut.

1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget > HTML/javascript

2. Copy code berikut ke dalam ruangan html/javascript. (jika tidak faham rujuk sini)

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option>
</select>

penerangan :
Link 1: Masukkan link untuk dibuka
Text 1: Masukkan perkataan/ayat untuk link

Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select>
3. Apabila selesai, save hasil kerja anda.:)

TAMBAHAN:
Untuk kod di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada page/window yang berlainan, sila tukarkan kod:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

kepada kod ini.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Mudah bukan.
Selamat mencuba.:)

Ubah Lebar Ruangan Komen

2010-03-05T07:00:00.000+08:00

Mengubah lebar ruangan komen bagi sesbuah blog dapat memberi ruang yang lebih banyak kepada pengunjung (yang suka komen panjang²) dan juga dapat membuatkan ruangan komen kelihatan sama besar dengan ruangan entri.

Tutorial ini akan menunjukkan cara untuk melebarkan ruangan komen, dan tutorial ini hanya untuk blog yang menggunakan embedded comment (komen yang terletak pada bahagian bawah entri)
.
Sebelum

Selepas

Berikut adalah langkah-langkah yang diperlukan untuk mengubah lebar ruangan komen pada blog.

1. Login akaun blogger anda, dari dashboard > layout > edit html, kemudian klik pada expand widget templates.

2. Pda keyboard anda, klik ctrl + f untuk menghidupkan fungsi find kemudian cari kod berikut.

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

Penerangan : Tukar nilai 100% kepada nilai pixel untuk lebar yang anda kehendaki.
contoh, jika anda mahu lebar 500px, kodnya adalah

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='500px'/>

3. Save hasil kerja anda dan lihat hasilnya.:)

Ketahui Bilangan Pengunjung Online Dalam Blog

2010-03-02T19:41:00.007+08:00

Berapakah bilangan pelawat yang berada dalam blog anda ketika ini.?
Mungkin amat sukar untuk anda menjangkakannya (tidak boleh rasanya.:)
Kalau anda mempunyai statistik blog, mungkin anda tahu mengikut hari ataupun jam,
tetapi anda tidak tahu berapa bilangan pengunjung dalam keadaan masa sebenar.

whous.amung.us menawarkan widget yang dapat menunjukkan bilangan pengunjung yang online pada masa sebenar.
Antara kelebihan menggunakan widget ini adalah paparan yang menarik, dan juga cara pasang pada blog dengan mudah. Boleh lihat demo widget ini dipasang di blog, DISINI.

Berikut adalah langkah yang diperlukan untuk meletakkan widget ini didalam blog anda.

1. Buka web http://whos.amung.us/

2. Pilih kedudukan widget yang dikehendaki (widget akan berada dalam keadaan statik dalam blog anda), selepas itu copy code yang tersedia.

3. Setelah copy code, pastekan di dalam html/javascript yang terdapat dalam page element blog anda.
Dashboard > layout > page element > add a gadget > html/javascript.

Jika masih tidak faham, sila rujuk disini.

4. Save, dan lihat hasilnya..:)

Tukar Ayat Asal Linkwithin

2010-03-02T07:06:00.000+08:00

Bagi sesiapa yang menggunakan linkwithin pada blog, sememangnya akan muncul satu ayat yang telah di'set'kan secara automatik semasa meletakkan gadget tersebut.

Bagi bahasa melayu, akan keluar ayat, "Anda mungkin juga meminati" dan bagi english "You may also like these stories"..

Ini adalah yang biasa,

Dan ini pula yang agak kurang biasa.:)

Anda ingin tukar ayat ini mengikut kehendak anda.?

Ikuti tutorial yang sangat mudah ini.:)

1. Login akaun anda, kemudian dari dashboard > layout

2.Dari page element yang dipaparkan, cari element untuk Linkwithin kemudian klik edit

3. Daripada kod yang dipaparkan, tambah kod ini dibahagian atasnya

<script>linkwithin_text='AYAT ANDA DISINI'</script>

Penerangan : Tukarkan "AYAT ANDA DISINI" dengan apa-apa yang anda kehendaki.:)

Kod anda sepatutnya kelihatan seperti ini.

4. Selepas selesai, klik save untuk lihat kesannya..

Senang bukan.:)

Buat Read More Dalam Blog : Cara 2

2010-03-01T20:50:00.004+08:00

Tutorial ini akan menunjukkan lagi cara untuk buat read more bagi sesebuah blog.
Sebenarnya kaedah ini sudahpun agak lama wujud dalam blogger.com, tetapi mungkin pengguna blogspot tidak perasan. Dan bagi blogger yang menggunakan template asal daripada blogger.com, kaedah ini amat mudah untuk diaplikasikan.

Berikut tutorial ringkas untuk buat read more yang sudah tersedia dalam blogger.com

1. Login ke akaun blogger anda, kemudian daripada dashboard klik new post.

2. Kemudian taipkan beberapa patah perkataan, kemudian diselangi oleh kod berikut. (Ini untuk test template anda sudah tersedia dengan kod penuh atau belum)

contoh: anda boleh copy dan paste bawah ni ke dalam new post anda.

Ini ayat sebelum perkataan 'read more'

Ini ayat selepas perkataan 'read more'

3. Kemudian klik pada publish, dan tengok dari paparan muka hadapan blog anda samada read more ini berjaya atau tidak. Kalau berjaya, kerja anda sudah siap.:)

Kalau tidak berjaya,
(biasanya melibatkan bukan template default dari blogger), sila ikuti sedikit penambahan berikut.

1. Dari dashboard, klik pada layout > edit html

2. Backup template anda, kemudian klik pada expand widget templates

3. Menggunakan keyboard, tekan ctrl + f (untuk membuka fungsi find), kemudian cari kod berikut

<data:post.body/>

4. Copy dan paste kod ini dan letakkan dibawah kod tadi.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

5. Kod anda sepatutnya kelihatan seperti dibawah

6. Save template anda dan lihat hasilnya.:)

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

Anda juga boleh melihat tutorial versi english di sini.
http://www.google.com/support/blogger/bin/answer.py?answer=154172

thanx kepada -•»Á®ÐZMÀ®Ñ«•- kerana inform pasal ni.

Cara Letak Linkwithin Dalam Blog

2010-02-28T19:47:00.005+08:00

Linkwithin antara blog yang berguna untuk memaparkan post yang berkaitan dalam sesebuah blog. Link within ini berbeza dengan 'related post' biasa kerana linkwithin memaparkan thumbnail bagi entri yang berkaitan.

Contoh:

Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.

Berikut adalah cara ringkas untuk meletakkan linkwithin dalam blog.

1. Buka web www.linkwithin.com

2. Pada paparan yang muncul, masukkan maklumat yang berkaitan.

Jika background anda gelap,tick pada kotak kosong kecil tu, dan pastikan anda masukkan bilangan yang sesuai dengan lebar blog anda.

3. Klik pada install widget

4. Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik add widget

5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)

Letak Website Lain Dalam Blog

2010-02-27T07:00:00.000+08:00

Pernahkah anda terpikir untuk meletakkan satu ruangan website lain dalam blog anda.?
Seperti anda meletakkan website google, yahoo dan pelbagai lagi dalam blog anda.
Ini membolehkan pengunjung blog anda melayari web lain tanpa meninggalkan blog anda.:)

Meletakkan website dalam blog masih boleh dilakukan dengan hanya menggunakan kod html/javascript

Klik disini untuk lihat demo website yang diletakkan dalam blog.

Berikut adalah langkah-langkah untuk tutorial ini.

1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget

2. selepas klik pada add a gadget, pilih HTML/javascript

3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript

<a href="javascript:jumpto('http://www.google.com')">Google</a> |
<a href="javascript:jumpto('http://www.yahoo.com')">Yahoo</a> |

<script language="javascript">

</script>

Penerangan :
-Google: Gantikan dengan nama yang anda mahu
-www.google.com: Gantikan dengan website yang anda mahu

4. Save, klik preview dan jika berpuas hari, klik save.:)

Letak Signature Dalam Blog

2010-02-26T07:40:00.001+08:00

Mempunyai signature dapat menambahkan lagi trademark bagi seseorang blogger. Signature terletak pada bahagian akhir untuk sesuatu entri yang di post oleh blogger.

Signature boleh jadi apa sahaja samada gambar, icon, dan juga nama anda dengan font yang dirasakan sesuai untuk signature.

Tutorial ini akan menerangkan cara-cara meletakkan signature pada blog dengan menggunakan signature yang di'generate' daripada kaedah online.

Laman web yang paling sesuai untuk create signature online adalah http://www.mylivesignature.com/.Laman web ini dicadangkan kerana ianya dapat menghasilkan signature yang anda mahu dengan lebih senang. Masa anda pun jimat.:)

CREATE SIGNATURE.

1.Buka web http://www.mylivesignature.com/ untuk create signature anda.

Nota:pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'.

2.Setelah selesai signature anda, uploadkan untuk dapat url, (boleh guna imageshack.us atau upload pada blog anda sendiri)
contoh url:http://2.bp.blogspot.com/_CEj8AwvwSNM/S4PotCOwq7I/AAAAAAAAD9A/jC8qDqdmR78/signature.png

CARA LETAK DALAM BLOG.

1. Login kepada blog anda, kemudian dari dashboard, Layout > Edit Html > Expand Widget Templates (Backup template anda untuk langkah keselematan)

2. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi find kemudian cari kod dibawah

<p><data:post.body/></p>

3. Copy code ini dan paste di bawah kod tadi.

<p><div align="left"><img src="URL gambar/signature anda"/></div></p>

kod anda sepatutnya kelihatan seperti ini.(contoh)

Penerangan :
left : kedudukan signature boleh ditukar kepada center ataupun right
URL gambar/signature anda : Masukkan url gambar/signature

4. Selepas selesai letak code, klik preview dan jika anda berpuas hati, klik save.:)

Cara Buat Read More pada blog

2010-02-22T06:23:00.008+08:00

Mempunyai fungsi 'read more' adalah antara perkara yang perlu diaplikasikan pada sesebuah blog. Ini kerana rata-rata pemilik blog akan menaip entri yang boleh dikategorikan sebagai 'panjang'. Dengan mempunyai fungsi read more, keseluruhan entri dapat diringkaskan supaya ianya lebih memudahkan.

Berikut merupakan langkah yang perlu dilakukan untuk menggunakan fungsi 'read more' pada blog.

1. Login, daripada dashboard klik layout > edit html.

2. Pastikan anda backup template dahulu dengan klik 'Download Full Template' kemudian klik pada 'expand widget templates'.

3. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian taip
<data:post.body/>

4. Letakkan kod ini di atas <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Kemudian letakkan kod ini di bawah <data:post.body/>

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

Nota: kod anda sepatutnya kelihatan seperti ini.

6. Selepas selesai letak code, Save Template.

7. Kemudian, daripada paparan dashboard, klik pada Setting > Formatting kemudian scroll ke bawah sehingga jumpa Post Template.

8. Copy code berikut ke dalam Post Template

<span class="fullpost">
</span>

9. Save Setting

10. Pergi kepada paparan untuk post entri, dalam ruangan post entri klik pada 'edit html' dan akan anda jumpa code tadi. Kandungan yang ingin diletakkan dalam ruanagn read more perlu terletak antara <span class="fullpost"> dan </span>

11. Apabila siap menaip, klik publish..

Daftar dan letak shoutbox pada blog

2010-02-21T03:38:00.010+08:00

Meletakkan sesebuah shoutbox dalam menggalakkan interaksi antara pemilik blog dengan pengunjung sesebuah blog. Interaksi ini mudah kerana ianya tidak melibatkan komen pad aentri, tetapi pesanan yang ditinggalkan pada gadjet shoutbox yang di'pasang' oleh pemilik blog.

Terdapat pelbagai jenis shoutbox yang ada untuk diletakkan dalam sesebuah blog. Antara yang dicadangkan untuk diletakkan dalam sesebuah blog adalah shoutbox daripada shoutmix.com.

Tutorial ringkas ini akan menerangkan cara untuk mendaftar shoutmix, dapatkan kod html dan letakkan pada blog.

1. Buka www.shoutmix.com

2. Klik pada create shoutbox

3. Masukkan maklumat yang dikehendaki.(maklumat akan dihantar ke email untuk simpanan)

4. Masukkan setting yang berkaitan. Biasanya melibatkan style & color dan date & time.

5. Setelah selesai memasukkan setting yang dikehendaki dalam langkah 4,klik pada 'get codes'

6. Masukkan lebar dan tinggi yang dikehendaki didalam blog anda. Kemudian copy code berkenaan.

7. Setelah copy code, paste pada html/javascript dalam blog anda ( Dashboard>layout>add a gadget>html/javascript)
-Jika masih tidak faham dimana perlu paste code, sila rujuk disini.

Nota: setting untuk shoutbox boleh diubah bila-bila masa dengan login kembali ke dalam akaun shoutmix.
-----------
Contoh shoutbox yang diletakkan dalam blog.

Cara Buat Gambar Bergerak (Scrolling Image)

2010-02-18T20:08:00.012+08:00

Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada blogger lain.

Contoh scrolling image adalah berikut.

Pergerakan setiap gambar dapat diubah samada dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat dikawal.

Contoh kod bagi scrolling image adalah seperti berikut.

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">

<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

Penerangan:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahagian gambar
2. Kod-kod ini dapat digunakan di dalam post entri ataupun pada bahagian gadget

Ketahui Komen Pada Entri Melalui Email

2010-02-18T02:37:00.002+08:00

Mengetahui siapa yang komen pada sesebuah entri adalah penting bagi seseorang blogger samada untuk mengetahui respon daripada pengunjung ataupun memberi maklum balas jika ada perkara yang ditanya oleh pengunjung kepada pemilik.

Contohnya begini. Anda ada blog kan. dan sudah tentu anda ada entri yang banyak dalam blog anda. Katakan anda ada entri bertarikh 12 Februari 2009, bagaimana anda hendak tahu jika ada orang komen pada entri tersebut pada hari ini.? Takkan anda hendak periksa semua entri anda untuk pastikan samada ada komen baru atau tidak. Bukankah itu menyusahkan dan begitu membuang masa.:)

Oleh itu, terdapat cara mudah untuk para blogger untuk ketahui samada entri anda baru sahaja dikomen oleh seseorang.Dan anda akan dapat tahu melalui email.

1)Login akaun anda, dan dari dashboard, klik pada setting

2)Selepas itu klik pada comments

3)Apabila paparan sudah dibuka, scroll sampai bawah sehingga anda jumpa 'comment notification email'. Masukkan email anda. anda juga boleh masukkan lebih dari satu email, kemudian save.. siap..:)

Apabila ada seseorang yang komen pada entri anda, contoh yang keluar pada email yahoo adalah seperti berikut.,

So senang untuk anda ketahui bila dan entri apakah yang mempunyai komen terbaru.

Letak Icon Pada URL Blog

2010-02-18T02:03:00.003+08:00

Mempunyai icon disebelah url sesebuah blog dapat menunjukkan treadmark sesebuah blog.
Pengunjung tetap juga biasanya akan dapat mengingati icon yang unik berbanding icon blogger yang biasa dilihat.

Ini kerana, default untuk icon bagi sesebuah blog adalah icon blogger yang berwarna jingga. Dan kini anda berpeluang untuk mengubahnya mengikut kesukaan anda dengan mengaplikasikan beberapa langkah di bawah.

Jika sebelum ini iconnya begini.

Apa kata kalau tukar menjadi seperti ini.

ataupun lain².:)

Sila pastikan anda mengikuti langkah yang diberi satu-persatu untuk memastikan semuanya berjalan lancar.:).

1) Cari Icon Kesukaan Anda.
Sebagai permulaan, pastikan anda mempunyai icon untuk dijadikan icon untuk blog anda.
Jika yang sudah ada, tiada masalah.
Jika masih mencari² icon yang sesuai, boleh juga lihat² dalam web berikut

http://www.freeiconsweb.com/index.html
http://www.gifanimations.com/
Atau jika masih tidak berkenan, cari je dalam google.:)

untuk icon ini, biasanya file gambar adalah format gif, jpg, jpeg, png. Anda boleh cari samada gambar yang static atau animated. Biasanya size (pixel) icon adalah 32x32 atau 34x34 atau 128x128. Untuk tutorial ini, jangan ambil file yang jenis .ico (sebab takut susah untuk upload nanti.)

Katakanlah, aku sudah ada icon, dan icon yang aku suka adalah ini.

2) Upload icon anda ke imageshack.us
Langkah seterusnya anda perlu uplaodkan gambar anda. Boleh gunakan apa² web hosting, imageshack atau photobucket atau lain². Tapi aku cadangkan imageshack sbb tak perlukan pendaftaran untuk upload.

Selepas upload sila pastikan anda ada direct link untuk gambar anda untuk dimasukkan dalam kod nanti.

Langkah seterusnya,adalah untuk letakkan code ke dalam blog anda. Oleh itu, pastikan anda login dahulu ke blog anda.

Langkah²nya adalah seperti berikut.

1)Dari dashboard blog, klik pada layout

2)Klik pada 'edit html' kemudian tick pada 'expand widget templates'

3)Seterusnya, anda hendaklah backup dahulu template anda dengan klik pada 'download full template'. Jika masih tidak faham bagaimana dan kenapa hendak buat backup ni, sila rujuk sinibackup template blog.

4)Daripada paparan skrin anda, klik edit, kemudian find. Dalam bahagian kotak dibawah, taipkan < /head>

5)Buka link dibawah untuk lihat code, selepas itu copy code yang diberi kemudian paste sebelum < /head>, selepas itu, gantikan dengan direct link icon anda dari imageshack yang anda upload.

KLIK SINI UNTUK PAPARKAN CODE

Seterusnya klik preview untuk lihat icon anda menjadi atau tidak, kalau menjadi, apa lagi, SAVE..:)

Diharapkan anda semua tidak menghadapi masalah untuk semua ini..
Pilihlah apa² icon yang cantik untuk blog anda.
Nanti bila tengok blog sendiri, baru bertambah semangat..:)

HAPPY BLOGGING..:)

Buka Link Baru Apabila Klik Pada Gambar

2010-02-18T01:53:00.003+08:00

Apabila upload gambar menggunakan kaedah yang telah tersedia oleh blogger.com, secara default gambar tersebut akan dibuka pada page yang sama.

Ada ketikanya ianya bagus apabila merujuk kepada blog yang sama, tetapi kurang bagus apabila seorang blogger hendak merujuk kepada tempat lain. ini kerana apabila buka pada page yang sama, pengunjung terpaksa menekan button back untuk kembali kepada blog asal.

Tutorial ini akan menerangkan bagaimana untuk menjadikan gambar yang mempunyai link akan dibuka pada tab yang baru apabila diklik.

Perhatikan kedua-dua gambar ini, sila klik pada keduanya.

1)Gambar 1

2)Gambar 2

Gambar pertama tidak memberi kesan apa², tetapi gambar kedua membawa anda ke yahoo.com .(memang sengaja di'link'kan kepada yahoo).

Jangan terkejut jika tutorial ini sangat mudah.:)

<a href="Letakkan link untuk dibuka disini" target="_blank" >
<img src="Letakkan url gambar disini"/></a>

Sebagai contoh, untuk kod gambar kedua adalah seperti ini

<a href="http://www.yahoo.com" target="_blank" >
<img src="http://www.google.com.my/intl/en_com/images/logo_plain.png"/></a>

Untuk gambar kedua, link akan dibuka pada tab baru. Jika anda ingin link dibuka pada page yang sama, buang target="_blank"

Kaedah lain untuk buka link dalam page yang sama boleh guna terus aplikasi upload gambar dan letak link yang ada masa buat new post.:)

Background Dalam Sesebuah Entri

2010-02-18T01:36:00.003+08:00

Background sesebuah post biasanya akan mengikut default yang telah ditetapkan dalam setting blogger. Tetapi ada satu trick yang boleh digunakan untuk menjadikan background yang berbeza untuk entri yang dikehendaki sahaja.

Contohnya entri ini yang menggunakan background bercorak bunga-bungaan, tidak seperti entri lain yang berlatar belakangkan warna putih sahaja.

Tutorial untuk membuat background untuk post adalah begitu senang.

Apa yang bagusnya adalah, anda boleh pilih gambar apa sahaja yang anda mahu untuk background, dan anda boleh pilih untuk hendak letakkan dalam post yang mana satu untuk blog anda.

Apabila anda login pada blog anda, letakkan kod ini dalam new post anda. (pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' bukan 'compose'- ini untuk mengelakkan code warna dicopy sekali.:)

<div style="background:url(Link gambar disini) no-repeat;">
Taip segala entri untuk blog anda disini.
</div>

- Letakkan link gambar pada tulisan biru (kalau anda upload dalam blog kemudian copy url gambar lagi bagus.:)
- jika anda menggunakan gambar bersaiz kecil, sila buang no-repeat.
-Taip apa sahaja entri anda seperti biasa dalam kawasan merah. Atau kalau hendak lebih mudah, buat apa sahaja entri, tetapi ending mesti ada </div>

Itu sahaja.
Apabila anda post anda akan lihat kesannya.

p/s:
-pastikan anda pilih backgdround yang bersesuainya agar pengunjung blog anda tidak pening membaca.

Disable Right Click

2010-02-18T00:37:00.002+08:00

Adakah anda tidak suka orang lain mengambil apa sahaja kandungan dalam blog anda.?
Dan pada masa yang sama anda tidak suka dengan kod² yang berserabut yang perlu di edit dalam 'edit html'. Kini ada cara mudah untuk realisasikan hasrat anda.:)

Kenapa Perlu Disable Right Click.?
Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk megelakkan orang lain mengambil apa yang ada dalam blog mereka. Samada tidak senang ayat mereka ditiru bulat² (copy paste), ataupun untuk mengelakkan bandwidth habis digunakan. Kebiasaan alasan yang aku selalu baca adalah kerana ada orang yang copy entri mereka bulat².

Berikut adalah contoh msg yang akan keluar apabila anda aktifkan disable right click

Berikut adalah cara yang mudah untuk menggunakan fungsi ini.

1. Copy kod ini.

<script language=JavaScript>

</script>

2. Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Layout>Add a Page element >html/javascript. Kalau masih kurang jelas, klik sini.

Apabila sudah siap, save dan lihat kesannya pada blog anda.:)

Link Dalam Blog Warna-Warni ( Rainbow Link )

2010-02-18T00:07:00.005+08:00

Rainbow link merupakan salah satu trick yang diaplikasikan kepada link yang ada dalam sesebuah blog. asalkan cursor mouse dilalukan pada sesuatu link, link tersebut akan berubah menjadi warna-warni dengan warna yang tertentu.

Klik disini untuk lihat contoh blog unwanted86 yang menggunakan trick link warna warni ini.

Tutorial untuk menjadikan blog anda juga mempunyai link berwarna-warni adalah seperti berikut.

1.) Copy code di bawah ini.

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

2) Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget

3) Cari HTML/javascript. Kemudian apabila sudah buka, paste code kat situ.

4) Siap dan save. Itu sahaja. Senang bukan.:)

Image Magnify

2010-02-17T23:38:00.002+08:00

Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah² yang melihat gambar yang lain.

Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image Magnify - Test Mode

Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan.

Berikut adalah tutorial untuk image magnify ini.

1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )
Jika masih tidak jelas lagi, klik sini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">

/***********************************************
* Kod telah di'edit' oleh unwanted
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
* -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
***********************************************/
</script>

2) Apabila sudah letak code tu, save sahaja seperti biasa..

Siap untuk bahagian letakkan kod asas..

Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.)

<img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />

Keterangan :

url gambar disini : Masukkan url gambar.

2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5

200 : Masukkan lebar gambar yang anda rasakan bersesuaian

150 : Masukkan tinggi gambar yang anda rasakan bersesuaian

Letak Iklan Nuffnang Statik

2010-02-17T23:18:00.004+08:00

Adakah anda sudah mempunyai akaun Nuffnang.?.
Kalau ada, dimanakah anda letakkan iklan anda itu..(skyscraper)?

Memasang iklan secara statik adalah meletakkan iklan pada kedudukan yang tetap dalam sesebuah blog walaupun entri telah di'scroll' ke bawah

Anda scroll macam mana pun ianya tetap berada pada kedudukan itu. Kelebihan.? Nanti akan dicerita kat bawah, jom kita tengok cara yang yang perlu dilakukan untuk letak iklan nuffnang statik ini.

Owh, sebelum tu. Mungkin ada yang bertanya 'Letak iklan statik tidak menyalahi terma dan syarat Nuffang ke.?'

So ini jawapan dari nuffnang sendiri.

Yes, it is allowed for a blogger to place his ad unit static as shared by you. That position is no doubt desirable and advertisers would love to advertise on such placement.

However, bear in mind that the desirability for a Skyscraper ad unit is the same if it\'s placed;
- the top gadget of a sidebar
- visible upon loading of the page
- visible at all time (static ad)

As such, it doesn\'t really make a big difference, but nevertheless, advertisers will pay more attention to blogs which embed the ad units as a static ad.

Cheers,
Robb Chew
Blogger Relations Executive

Nuffnang Sdn Bhd

Cara-cara untuk letakkan iklan statik adalah seperti berikut.

1. Login akaun Nuffnang untuk pastikan kod iklan Nuffnang untuk Skyscraper

2. Copy kod di bawah, kemudian letakkan di HTML/javascript dalam blog anda
( Dashboard > Layout > Page elements > Add a gadget > HTML/javascript )
Kalau masih tak faham rujuk sini.

<div style='display:scroll; position:fixed; bottom:5px; right:5px;'>Letak Kod Nuffnang Sini</div>

Penerangan :
i.) Nilai 5px boleh diubah. Nilai ini menentukan jarak dari bawah dan jarak dari kanan.
ii.) Masukkan kod iklan Nuffnang yang diambil dari step 1. (pastikan kod adalah untuk Skyscraper)

UPDATE: Jika anda hendak kod bersama tulisan kelip² "aik, takkan tengok je" kodnya adalah seperti dibawah.

<div style='display:scroll; position:fixed; bottom:5px; right:5px;'><blink>Ai, takkan tengok je.:)</blink>Letak Kod Nuffnang Sini</div>

3. Save, kemudian lihat kesannya dalam blog anda.:)

Bagaimana, senang bukan..:)

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

Kelebihan meletakkan iklan secara statik.

1. Kebarangkalian untuk pengunjung melihat iklan itu adalah sangat tinggi. Kerana ianya muncul sentiasa walaupun scroll ke bawah.

2. Kebarangkali untuk klik juga adalah tinggi.

3. Advertiser lebih berminat untuk beriklan di blog anda.

4. Berdasarkan kepada no1,2 dan 3, maka earning anda pun akan bertambah..:)

Tutorial tukar template blog

2010-02-17T20:00:00.000+08:00

Menukar template blog dapat mengubah rupa blog asal kepada paparan yang lebih menarik.
Adalah biasa bagi seseorang pemilik blog inginkan blognya tampil menarik berbanding template asal.

Tutorial ini akan menerangkan dengan ringkas cara-cara untuk menukar template sesebuah blog.

Sebelum menukar template blog, pastikan anda sudah mempunyai template yang dikehendaki.
Jika anda masih belum lagi mempunyai template, sila rujuk kepada entri ini.
website untuk mencari template blog.

Berikut adalah langkah-langkah untuk menukar template blog.

1. Login akaun kemudian daripada dashboard klik layout > edit html

2. Baca penerangan berdasarkan gambar di bawah.

3. Apabila klik upload, paparan berikut akan keluar, klik pada 'keep widget'

4. Setelah selesai anda boleh view blog anda.:)

Website untuk download template blog

2010-02-17T19:50:00.000+08:00

Sebelum menukar template sesebuah blog, perkara yang diperlukan adalah template yang hendak ditukar. Seseorang pemilik blog mesti mengetahu template bagaimana yang hendak digunakan untuk blognya.

Jika anda seorang pemilik blog dan masih belum lagi mempunyai template yang hendak digunakan, anda boleh mendapatkan pelbagai jenis template secara percuma dan pelbagai jenis yang dirasakan sesuai untuk blog anda.

Template sesebuah blog adalah dalam format .xml (oleh itu pastikan jika anda download file dalam bentuk zip/rar, anda extract dahulu file tersebut.)

Berikut adalah antara laman web yang menyediakan pelbagai jenis template untuk blogger secara percuma.

http://btemplates.com/

http://www.ourblogtemplates.com/

http://www.deluxetemplates.net/

http://blogtemplate4u.com/

http://www.bloggertemplatesfree.com/

http://www.btheme.info/

http://www.blogspottemplate.com/

http://www.freebloggertemplate.org/

http://www.bloggertemplateplace.com/

Anda juga boleh mendapatkan pelbagai lagi template untuk blog dengan hanya menggunakan fungsi search pada google.

Tips: Anda tidak perlu risau jika anda gunakan banyak masa untuk memilih template yang sesuai untuk anda. Kerana itu adalah perkara biasa. Pastikan template yang anda pilih betul-betul memenuhi citarasa anda.:)

Backup Template Blog

2010-02-17T19:38:00.005+08:00

Template bagi sesebuah blog boleh diibaratkan sebagai tulang belakang blog kerana template yang menyimpan semua maklumat berkaitan rupa bentuk blog anda, fungsi blog dan juga kebanyakan trick untuk sesebuah blog akan dilakukan di template (edit html).

Anda letak background ke, ubah colour ke, letak fungsi 'read more' atau pape, kebanyakkannya adalah di template.
Oleh itu adalah perlu untuk seseorang blogger akan backup dahulu template blog sebelum melakukan sebarang pengubahsuaian ataupun sebelum menukar template baru.
Tujuan backup template adalah untuk backup jika sebarang perubahan kod yang diaplikasikan tidak menjadi.

Tutorial untuk backup template bagi blog adalah seperti berikut.

1)Login seperti biasa. Kemudian dari dashboard klik layout

2) Dari layout, klik edit html dan dibawah sedikit anda akan jumpa 'download full template'

3)Keluar paparan, klik save..Siap.:)

Tips: anda boleh rename template yang anda download dengan tarikh anda download. seperti 29julai2009.xml. Ini untuk memudahkan anda kenalpasti tarikh anda buat backup untuk template blog anda.:)

Bagaimana Letak Kod HTML/javascript

2010-02-17T19:15:00.005+08:00

Apabila memasuki dunia blogging, antara perkara yang tidak dapat dielakkan adalah untuk menghias blog sendiri. Terdapat beberapa cara untuk menghias blog samada menukar template, memasang widget yang telah disediakan oleh blogger.com ataupun meletakkan sumber² lain dari luar yang biasanya melibatkan kod html/javascript.
Selain untuk menghias blog, kod html/javascript juga mempunyai fungsi² lain bergantung kepada tujuan apa kod itu dihasilkan.

Penambahan yang ingin dilakukan biasanya akan melalui perkara yang sama iaitu kod yang diperolehi perlu di 'paste'kan di ruangan html/javascrip.

Tutorial ini akan menunjukkan bagaimana hendak meletakkan kod html/javascript bagi sesebuah blog.

1) Login ke dalam blog anda seperti biasa. Kemudian dari 'dashboard', klik 'Design'
UPDATE: untuk template terbaru, klik pada DESIGN

2)Setelah anda klik 'design', dia akan auto masuk bahagian 'page element'. Kemudian pada 'page element' anda itu, klik pada 'add a gadget'

3)Selepas itu anda akan lihat banyak senarai yang ada, cari "HTML/javascript", kemudian klik pada "+"

4)Satu paparan kosong akan dibuka, kemudian paste code yang anda mahu letak dalam blog ke dalam ruangan kosong. kemudian tekan "save"

5)Siap. Anda boleh lihat hasilnya dengan klik preview. Anda juga boleh mengubah kedudukan code itu dengan hanya drag pada mana² kawasan page element itu.Apabila anda sudah puas hati, klik 'save' untuk kekalkan kedudukan.:).

Letak Video Dari Youtube Dalam Blog

2010-02-17T15:30:00.006+08:00

Youtube, sebuah laman web yang tidak perlu diperkenalkan lagi kepada pelayar maya. Laman web yang mempunyai begitu banyak video dan menjadi rujukan kepada sesiapa sahaja untuk mencari video tidak kira untuk hiburan, pelajaran, berkongsi pengalam dan sebagainya.

Youtube juga menjadi platform bagi seseorang blogger untuk berkongsi sesebuah video kepada pengunjung blog mereka.

Tutorial ini akan menerangkan bagaimana untuk meletakkan video yang terdapat dalam youtube ke dalam blog.

1.Login akaun blogger anda, kemudian klik pada new post.

2.Buka video dari youtube yang anda hendak post, kemudian lihat sebelah kanan untuk ruangan embed.

3. Klik customize untuk melakukan sedikit ubahan pada video anda. Anda boleh pilih option yang ada seperti border dan juga saiz video yang hendak dipaparkan.

4.Setelah selesai,copy code dari bahagian embed dan paste dalam ruangan blog anda.(klik preview untuk tengok keadaan video anda)

5. selesai.

Berikut contoh video dari youtube yang diletakkan di dalam blog:

Upload Video Dalam Blog

2010-02-17T00:59:00.007+08:00

Selain gambar, video juga memainkan peranan yang penting untuk seseorang blogger untuk mempelbagaikan kandungan entri dalam blog.

Video boleh merangkumi samada aktiviti peribadi, video klik lagu kegemaran, video klip percutian, tutorial dan apa sahaja yang dilihat lebih memudahkan untuk disampaikan kepada pengunjung ataupun untuk tatapan pemilik blog sahaja.

Untuk mengupload video menggunakan kaedah yang tersedia untuk blogger adalah seperti berikut.

1. Login ke dalam akaun blogger anda, kemudian klik pada new post.

2. Pada paparan yang muncul, klik pada icon video seperti yang ditunjukkan.

3. Langkah seterusnya, browse video yang hendak diupload, masukkan title dan juga tick pada ruangan seperti yang ditunjukkan. Kemudian klik pada upload video

4. Untuk sesebuah video, masa diperlukan untuk memproses video tersebut sehingga dapat dipublishkan. Bergantung kepada saiz video.

Anda boleh save dahulu hasil kerja anda dan kembali selepas beberapa ketika untuk pastikan samada video tersebut sudah boleh dimainkan atau tidak.

Contoh video yang diupload:

Setting Asas Yang Perlu Diketahui Oleh Blogger

2010-02-16T05:46:00.005+08:00

Bagi sesebuah blog, setting merupakan antara perkara penting untuk menentukan bagaimana paparan, dan perlakuan-perlakuan lain yang berkaitan dengan blog.

Antara perkara yang berkaitan dengan setting bagi sesebuah blog adalah tajuk blog, berapa bilangan entri, siapa yang boleh komen, dan lain² yang akan diterangkan di bawah.

Paparan untuk setting bagi sesebuah blog adalah seperti berikut.

Untuk entri ini, setting merangkumi basic, formatting dan publishing. Ini kerana 3 perkara ini boleh dianggap bahagian setting yang paling utama bagi sesebuah blog. Beberapa setting asas yang perlu diketahui oleh seorang blogger adalah seperti berikut.

BASIC:

Title : Title akan ditunjukkan pada bahagian atas browser apabila sesebuah blog dibuka.

Description : Berkaitan dengan apa kandungan sesebuah blog. Boleh dimasukkan sehingga 500 huruf. Contoh tutorial blog, tutorial blog dalam bahasa melayu, tutorial untuk semua dan lain² yang berkaitan. Kalau blog peribadi hampir boleh diabaikan ataupun letak sahaja seperti perjalanan hidupku, inilah kisah aku dan lain².

FORMATTING

Show : bilangan entri untuk paparan muka depan. jangan terlalu banyak. Biasanya antara 5 hingga 10 untuk mempercepatkan loading keseluruhan blog.

Date header format : Kurang penting, boleh pilih mana yang dirasakan sesuai.

Archive index date format : Format yang akan ditunjukkan untuk apa yang ditaip dalam sesebuah blog dalam jangka sebulan

Timestamp format : Kurang penting, boleh pilih mana yang dirasakan sesuai.

Time zone : Penting untuk pastikan kedudukan untuk masa adalah betul. Jika yang berada dalam negara Malaysia, sila pilih (GMT +8.00) Kuala Lumpur. Jika berada ditempat lain boleh pilih yang yang sepatutnya.

Language : English (Boleh juga pilih malay, tetapi dicadangkan english untuk memudahkan memandangkan kebanyakan sudah biasa dengan perkataan² english dalam dunia blogging)

COMMENTS

Comments : Show - Jika ada pengunjung yang menghantar komen, komen akan dipaparkan dibawah entri.

Who can comments : Bahagian ini bergantung kepada pemilik blog. Kalau pilih anyone, sesiapa sahaja boleh komen. Kalau pilih registered user, hanya orang yang mempunyai blog/id lain yang boleh komen.

Comment form placement : Kedudukan ruangan komen untuk sesebuah entri. Kebiasaan blogger akan pilih samada pop-up window atau embedded below post. Walau bagaimanapun, tidak semua template boleh gunakan embeded below post.

Comment moderation : Bergantung kepada pemilik blog. Jika mahu komen pengunjung terus dipaparkan,pilih never. Tetapi jika mahu komen dari pengunjung 'ditapis' dahulu oleh pemilik blog, pilih always.

Show word verification for comment : Pilih No. Kerana kehadiran word verificationbiasanya akan menyusahan pengunjung. Kecuali untuk kes² tertentu jika terlalu banyak spam (di Malaysia perkara ni jarang berlaku)

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

Setting untuk sesebuah blog boleh diubah bila-bila masa mengikut kehendak pemilik blog.
Walau bagaimanapun,adalah penting untuk cuba kekalkan setting yang dibuat untuk menyenangkan pemilik blog dan juga pengunjung.

Beberapa tips berkaitan setting untuk sesebuah blog boleh dibaca dari blog unwanted86 iaitu Setting yang tidak perlu dalam blog : part 1 dan juga Setting yang tidak perlu dalam blog : part 2

Upload Gambar Dalam Blog

2010-02-15T13:04:00.000+08:00

Meletakkan gambar dalam sesebuah entri dalam sesebuah blog dapat 'merancakkan' lagi kandungan sesebuah entri.

Kebiasaannya gambar yang diletakkan adalah berkaitan dengan entri yang ditaip.
dan adalah biasa pengunjung sesebuah blog suka membaca entri sesebuah blog yang juga mempunyai gambar walaupun sekeping.:)

Tutorial untuk upload gambar dalam blog adalah seperti berikut.

1.Login seperti biasa, klik pada 'new post'

2.Pada paparan, klik pada icon upload picture seperti yang ditunjukkan dibawah.
-Kedudukan berbeza bagi keadaan 'html' dan juga 'compose' tetapi simbolnya tetap sama.

ATAU

3.Klik 'browse'.

4.Pilih gambar yang anda hendak letakkan dari komputer anda.

4.1. Jika hendak letak lebih daripada satu gambar pada satu masa(maksimum 5), klik pada 'add more image'.

5.Pilih kedudukan dan size yang anda mahu untuk gambar tersebut, kemudian klik 'upload'.

6. Tunggu sehingga gambar siap diupload kemudian klik 'done'

Nota: Jika anda hendak upload lebih daripada 5 gambar, cuma ulang semula langkah 1 hingga 5.

Post Entri Dalam Blog

2010-02-15T12:01:00.000+08:00

Post entri dalam blog merupakan perkara yang paling asas bagi seorang blogger.
Dalam entri anda akan menaip apa yang anda mahu sampaikan samada luahan rasa, perkongsian, info dan apa-apa sahaja yang anda mahu.

Kalau tidak buka ruangan untuk menaip bagaimana hendak post entri kan.:)

Berikut adalah cara bagaimana anda hendak memulakan langkah untuk menaip dalam blog anda.

1. Buka link www.blogger.com (link ini diperlukan setiap kali anda hendak login kepada akaun blogger). Masukkan email dan password anda.

2. Pada paparan muka depan, klik pada 'new post'

3. Masukkan tajuk untuk entri anda dan juga isi kandungan entri anda.(biasa bab ini mengambil masa untuk menaip entri).

Kemudian apabila sudah siap, klik pada button 'publish'

4. Apabila sudah tekan button publish, siap untuk sebuah entri dalam blog anda.:)

jika anda hendak tengok 'rupa' entri anda itu, klik pada 'view post'
jika anda rasa masih ada kekurangan dan hendak edit, klik pada 'edit post'
jika anda hendak menaip entri baru, klik pada 'create a new post' (anda juga boleh mulakan dari awal dengan klik pada 'dashboard' pada bahagian atas-kanan)

Permulaan : Cara Buat Akaun Blogspot

2010-02-15T00:47:00.000+08:00

Mendaftarkan diri sebagai seorang pemilik blog dengan menggunakan platform blogger tidaklah sesusah yang disangka.
Dengan mengikuti beberapa langkah ringkas berikut, anda sudah bergelar seorang blogger.

Sebelum memulakan pendaftaran untuk akaun blogspot, anda mestilah mempunyai akaun google dahulu. Akaun lain pun boleh, tetapi untuk jangka masa panjang, ada akaun google akan lebih memudahkan memandangkan blogger.com adalah produk dari google.

Jika anda sudah mempunyai akaun google, boleh sign dahulu atau klik disini.http://mail.google.com/mail/?hl=en&tab=im.

Jika anda masih belum mempunyai akaun google, sila daftarkan dahulu disini untuk memudahkan proses pendaftaran akaun blogspot.

Berikut adalah langkah-langkah yang diperlukan untuk mendaftar akaun blogspot.

1. Buka link www.blogger.com

2. Apabila paparan sudah keluar, klik pada 'create a blog'

3. Seterusnya masukkan maklumat yang dikehendaki kemudian klik 'continue'.

4. Kemudian masukkan blogname dan juga blog address

Blog name lebih merujuk kepada trademark sesebuah blog
Blog address adalah digunakan oleh pengunjung untuk membuka blog anda. Blog address antara perkara paling penting bagi sesebuah blog. Untuk memudahkan pemahaman, sila rujuk Tips Pemilihan URL Untuk Blog.

5. Pilih template yang anda rasa sesuai, kemudian klik 'continue'

6. Siap. Anda sudah mempunyai akaun blogspot anda sendiri ada boleh mula untuk menaip entri pertama anda.:)

! Tutorial Untuk Blog | Tips Blogspot

Fibox : Shoutbox Yang Cool Untuk Blogger

Shoutmix Akan Menamatkan Perkhidmatan Percuma | Alternatif Shoutbox Percuma Untuk Ganti Shoutmix

Objek Berpusing Keliling Mouse

Tutorial Letak Facebook Like Badge Masa Blog Dibuka

Tutorial Hilangkan Navbar Pada Blog

Tutorial Letak Button Follow dan Dashboard Dalam Blog

Tutorial Kelopak Bunga Berguguran Di Blog

Tutorial Sembunyikan FB Fan Page di Blog

Tutorial Sembunyikan Shoutbox Blog

Page FB Yang Lebih Style Untuk Blog

Follow Up Komen Blogger

Tips SEO : Blog Title dan Description

Tips SEO : Url blog / Niche blog

Apa Itu SEO

Tutorial Letak Salji Dalam Blog : Ver 2

Animated Recent Post Ver2

Energy Saver Untuk Blog Anda.

Tutorial Buat Tab Menu / Navbar Menu

Tips Menaip Entri Dalam Blog : Part 2

Tutorial Buat Scroll Box Untuk Blog Archive

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

Tukar Gambar Apabila Dilalukan Cursor

Cara Unfollow Blog | Stop Following Blog

Letak Emotion Icon Dalam Komen

Tutorial Perkataan Ikut Cursor

Following Star Pada Cursor

Tutorial Tukar Warna Text Highlight

Title Bar Maker

Tips Menaip Entri Dalam Blog : Part 1

Tutorial Gerakkan Title Blog

Cara Buat Bubble Cursor Pada Blog

Cara Letak Sitemap Di Blog

Ketahui Kelajuan Load Element Blog

Disable Highlight Entri Blog

Letak Button Like Untuk Blog

Ketahui Jumlah Post dan Jumlah Komen dalam Blog

Ubah Lebar Gambar Dalam Entri

Paparkan Saiz Gambar Maksimum Dalam Blog

Scroll Box untuk Widget

Misterlinky - cara mudah untuk pengunjung masukkan link di blog

Letak Facebok Button 'Like' Dalam Blog

Letak Facebook Share Button dalam Blog

Recent Post dengan Thumbnail Widget

Jadikan Cursor Anda Berkilauan (sparkle)

Top Commentor Widget

Popular Post Dalam Blog (berdasarkan page view)

Animated Recent Post Widget

Tukar Cursor Untuk Blog Anda

Letak Widget Popular Post Dalam Blog

Letak Button Back To Top

Cara Buat Textbox Dalam Blog

HTML Color Codes

Letak 'Recent Comments' dalam Blog

Letak Background Gambar Pada Blockquote

Cara dapatkan url gambar

Letak sistem rating pada blog

Youtube : Video Player kepada MP3 Player

Letak Ruangan Komen Di Bawah Entri.

Letak kesan salji dalam blog (Snow effect)

Cara Buat Perkataan Bergerak (Scrolling/Marquee Text)

Letak Gambar Sebelah Tajuk Entri

Letak Tajuk Entri Pada Read More

Tukar Warna Background Blockquote

Letak Website Lain Dalam Entri

Cara Buat Dropdown Menu

Ubah Lebar Ruangan Komen

Ketahui Bilangan Pengunjung Online Dalam Blog

Tukar Ayat Asal Linkwithin

Buat Read More Dalam Blog : Cara 2

Cara Letak Linkwithin Dalam Blog

Letak Website Lain Dalam Blog

Letak Signature Dalam Blog

Cara Buat Read More pada blog

Daftar dan letak shoutbox pada blog

Cara Buat Gambar Bergerak (Scrolling Image)

Ketahui Komen Pada Entri Melalui Email

Letak Icon Pada URL Blog

Buka Link Baru Apabila Klik Pada Gambar

Background Dalam Sesebuah Entri