Tutorial Bina Blog: 2012

Freebies Muslimah

Slm semua..update terbaru dari jombinabelog, freebies muslimah yang tak berapa comel untuk korang, ambik la, free tak kena apa-apa charge pun :) nak buat sebagai header ke, banner ke ikut suka korangla...n kalo dah ambik tu sudi-sudikan la backlink n kreditkan ke blog ni ye.. ^-^ nantikan lagi freebies yang akan datang, rajin-rajin la singgah sini ye..ok chow dulu

Efek Bintang Angkasa Pada Blog

Demo:

Selain efek nudging, korang boleh cuba efek ni untuk tema blog ala-ala star wars ;) Caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var warp=3; // from 1 to 10
var stars=100; // number of stars
var colour="#66FF66"; // colour of stars
var position=0; // set to '-1' for stars to appear behind text on page

/****************************
* Star Warp Effect *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by Polskahackrew *
****************************/
var i;
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var swide=800;
var shigh=600;
warp/=100;
window.onload=function() { if (document.getElementById) {
var b, s, temp;
set_width();
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.zIndex=position;
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.backgroundColor=colour;
strs[i].style.overflow="hidden";
strs[i].style.position="absolute";
stdy[i]=Math.random()*4-2;
stdx[i]=Math.random()*6-3;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
b.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}

function warp_drive() {
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=1+warp;
stdy[i]*=1+warp;
if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {
strs[i].style.left=Math.floor(strx[i])+"px";
strs[i].style.top=Math.floor(stry[i])+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
stry[i]+=stdy[i]=Math.random()*4-2;
strx[i]+=stdx[i]=Math.random()*6-3;
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
}
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-13;
shigh=self.innerHeight-13;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
swide-=2;
shigh-=2;
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
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;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>

Nota:
66FF66 - warna bintang. Tukar kepada kod warna yang korang suka. Rujuk kod warna di bawah.
( untuk paparan lebih besar, klik di sini)

4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :)

Efek Link Bergoyang / Nudging

Demo:

Cuba korang lalukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply dekat blog masing-masing.. kalau berminat la, kalo tak berminat jangan paksa diri ok,he2..caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

400 - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.

4) Lastly macam biasa, klik save dan lihat hasilnya.

Selamat mencuba! :)

Letak Frame Dan Background Pada Shoutbox

Preview:

Ramai juga yang bertanyakan saya macam mana cara nak combine frame dan background pada shoutbox..tutorial kali ni akan menunjukkan cara-caranya. Jom start:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<center><div id="edited" style="width:200px; height:360px; background:url(http://img856.imageshack.us/img856/9573/framefibox5.png) no-repeat left top; padding-top:90px; padding-left:0px; position:relative" align="center">

<center><div id="custombg" style="width:180px; height:255px; background:url(http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

<iframe frameborder="0" title="shoutboxsaya" height="255" src="http://shout.busuk.org/?shoutboxsaya" id="r" style="filter:alpha(opacity=60);opacity:0.60;-moz-opacity:0.60; display:block; " scrolling="auto" width="180"></iframe>

</iframe></div></center></div></center></div>

Nota:

url warna biru - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di sini.

url warna merah - masukkan url background yang korang nak. search kat sini atau pilih jer background yang dah disediakan kat sini.

url warna orange - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat src='http://.....')

4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :)

Letak Background Pada Shoutbox

Preview:

Selain frame, korang juga boleh letak background pada shoutbox. Baru nampak meriah sikit kan? ^_^ Jom follow tutorial ini step by step:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<center><div id="custombg" style="width:200px; height:300px; background:url(http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

<iframe frameborder="0" title="shoutboxsaya" height="300" src="http://shout.busuk.org/?shoutboxsaya" id="r" style="filter:alpha(opacity=60);opacity:0.60;-moz-opacity:0.60; display:block; " scrolling="auto" width="200">

</iframe></center></div>

Nota:
200 & 300 - saiz width dan height shoutbox korang.

url warna merah - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat src='http://.....')

60 - nilai transperency shoutbox (ikut kesesuaian background yang korang pilih. jangan sampai tak nampak langsung tulisan shoutbox tu nanti ye ^_^)

url warna biru - masukkan url background yang korang nak. search kat sini atau pilih jer background yang dah disediakan kat bawah.

http://dl7.glitter-graphics.net/pub/676/676657yhxq5o5bjd.gif

http://dl4.glitter-graphics.net/pub/2080/2080324f7c521qp7z.gif

http://dl4.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif

http://dl9.glitter-graphics.net/pub/1297/1297689x033a3xbsj.jpg

http://dl8.glitter-graphics.net/pub/2168/2168288zbnox1h1uo.gif

http://dl10.glitter-graphics.net/pub/1877/1877570beu28immp9.jpg

http://dl4.glitter-graphics.net/pub/3039/3039724iqnri5mycx.png

http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png

4) Lepas dah masukkan nilai yang sepatutnya pada kod tu, klik save dan lihat hasilnya.

Selamat mencuba! :)

Letak Frame Pada Shoutbox

Preview:

Tuto kali ni akan menunjukkan cara macam mana nak cantikkan shoutbox korang. Untuk nampak lebih menarik dan comel, pada kotak chat korang boleh tambah frame, macam preview kat atas. Jom follow step by step. Caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi.

<center><div id="edited" style="width:200px; height:370px; background:url(URL IMAGE FRAME) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">KOD SHOUTBOX</div></center>

Nota:
URL IMAGE FRAME - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di bawah.
KOD SHOUTBOX - masukkan kod shoutbox korang.

Contoh:

<center><div id="edited" style="width:200px; height:370px; background:url(http://img535.imageshack.us/img535/2325/frame6p.png) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">SHOUT BUSUK : Start !--><iframe src="http://shout.busuk.org/?xxxx" width="180" height="255" frameborder="0" scrolling="auto"><a href="http://shout.busuk.org/?xxxx=viewfull">View shoutbox</a></iframe>
</div></center>

Freebies time.. frame untuk shoutbox. Just copy url yang disediakan:
P/s : kalau korang nak guna image frame ni, ukuran shoutbox korang mestilah 180x255 ( width: 180px, height:255)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwajACDo09vD-hZMUnHjGEweyBc9rtUNPTJobDuYvxY5Oi5CRV6Q4y62b1v4774Ddv66O-9sNBNpH-F84HNaAYVwhuv4uY8USmrau7cut_tHcMncpIQEwHp29BCdqNyrlcTEOV-Qgqhz4/s1600/frame+fibox1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqCWlxN-g70kQbkmF2jJX4fGXp5uhNKoKyk7cCK8wd2Zv81iUyCfiVguVUt2cHJU0SkIyV2fhufJsSC0mC7LR_wQ-7MTsNvuVW-X0Cz57vpHa4n77pJ_ahrU8CRMlrhYdghxdkS90w9Y/s1600/frame+fibox2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAb5om0RVPUNzRomfJWILE9mpgYXy2ww10R5kBpdeJk7_bnWgflqVuvpVgdjrCwQQelROQXzXY-ABpddAQ89NjIp2bDO6jmvuXbACjLhFLgMhUZ7VAcAfzi1eK2Rj919og1DOXRZTC9Fc/s1600/frame+fibox3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVkJuBJPMMVY9Cmm4QJoov3b_jt3MrRQo0Vomaznh-97ax8HohsAP58nTvL1Elcdgg2mADJjvaPu9bE9_ZBtaxrzN27hG4B2pJ10NRsp4eaDt3GzSs2zoguWXYzFT07HULzzvTvZuZ7g/s1600/frame+fibox4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6x2CwuXZyFZ5bFB4-51h6nGHEzifKBObfEVZ7kWSGR4kk6x_tMQfMy8XChKLBjqLeuhweJgPC4k75e4_DJ6gOhD7Qhyphenhyphen5dImeMfZJjmVXNbZLhTfxToVj-zmUZTLI7XxvX7BuDdTgmxjk/s1600/frame+fibox5.png

4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :)

Menu Horizontal Untuk Blog

Disamping menampakkan kelainan pada rupa blog anda, dengan adanya menu horizontal ini, blog akan lebih mudah di explore oleh pelawat. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod Menu Horizontal pada ruang Html / Javascript tadi.

<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>

# - url untuk setiap menu ( cth: http://jombinabelog.blogspot.com/2012/01/menu-horizontal-pada-blog.html)
Link 1 - 7 - nama menu yang korang nak letak ( cth home, about me, contact dll)

* Terdapat 9 pilihan style menu horizontal untuk anda pilih. Just copy kod yang disediakan:

&lt;style&gt; #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2tpQCihoVAaEoVWehOm_lRMjgvrolNaj1XWNKz3M91Bpzp8buBLl9sj10eyYM4sZkGy-7cRNNIiRrJBcLAAZtrcw3lPEUaCAQRBrwNKLawd6dzkHGm05FWYdI96sco9ppX_RnSGYagQ/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPPye2zvMSkW5gYUVZhCoI_zsu_q5TxYO9MrIPonoP4e4F4ssxa9rgua83pkZFr-QlEGtuLHoXlu-GdNhjLaRYtUclcf-I3sEne1cs04h7cyHFlyHe2ZiYHAcoiyZsh9sQuwg_4qtHFPs/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } &lt;/style&gt; &lt;div id=&quot;tabsE&quot;&gt;&lt;ul&gt;&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;

4) Dah selesai klik save dan lihat hasilnya.

Selamat mencuba! :)

Efek Bubbles Pada Blog

Preview:

Untuk trick ini, bubbles akan muncul dari bawah blog seperti yang ditunjukkan dalam preview di atas. Warna bubble boleh ditukar ikut citarasa. Nak cuba? ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi

<script type="text/javascript">
// <![CDATA[
var colours=new Array("#33FF33", "#33FF33", "#33FF33", "#33FF33", "#0000CC"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // how many bubbles are moving at any given time

/****************************
* JavaScript Bubble Bath *
* (c) 2010 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by polskahackrew *
****************************/
var swide=800;
var shigh=600;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var b, i;
b=document.createElement("div");
i=b.style;
i.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();

var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");

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

b.appendChild(rats);
bubb[i]=rats.style;
}
bubble();
}}

function bubble() {
var c;
for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
bubb[c].top=(bubby[c]=shigh)+"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;
if (bubby[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";
bubbx[i]+=(i%5-2)/5;
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}

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() {
var sleft, sdown;
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;
}
document.getElementById("bod").style.top=sdown+"px";
document.getElementById("bod").style.left=sleft+"px";
}

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>

Nota:
33FF33 - warna border bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.
0000CC - warna bubble. Tukar kepada kod warna yang anda suka. Rujuk kod warna di bawah.

( untuk paparan lebih besar, klik di sini)

4)Kemudian klik save dan lihat hasilnya.

Selamat mencuba! :)

Button Show & Hide Spoiler

Cuba klik pada button di bawah:

Menarik kan? jom ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi

<center><div id="spoiler"><div><input value="Nama button" style="width:88px ;font-size:12px;background-image: url(URL BACKGROUND UNTUK BUTTON);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<center><center>Ayat/url/image/kod widget anda di sini</center></center></div></div></div></center>

Nota:
Nama button - nama pada button anda

Merah - ayat atau apa-apa je yang anda nak letak
Biru - Masukkan url background untuk button. Search di mana-mana image hosting atau anda boleh pilih background yang disediakan di bawah.

http://img401.imageshack.us/img401/822/plaid30.jpg

http://img46.imageshack.us/img46/957/plaid24.jpg

http://img31.imageshack.us/img31/8480/pinkbackground8.gif

http://img194.imageshack.us/img194/5608/pinkbackground3.gif

http://img846.imageshack.us/img846/4885/plaidbackground9.gif

4) Klik save dan lihat hasilnya.

Selamat mencuba! :)

Like Facebook Fan Page Sebelum Enter Blog

Widget ini disediakan oleh kakinetwork.com. Sebaik sahaja blog anda dibuka, paparan like kotak facebook fan page anda akan muncul terlebih dahulu mengikut masa yang telah ditetapkan, sebelum pelawat dapat masuk ke blog anda. Jom cuba trick ini. Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

<body expr:class='"loading" + data:blog.mobileClass'>

atau

<body>

4) Kemudian, copy dan paste kod di bawah SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi

<script type='text/javascript'>KNFBFansPRO="Jombinabelog"</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakiblogger.css' rel='stylesheet' type='text/css'/>
<script src='http://yourjavascript.com/0143115100/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://yourjavascript.com/5400531110/likeboxfbfan-pro.js' type='text/javascript'/>
<script language='javascript'>
$(document).ready(function() {
$('body').KNFBFansPRO( {
url: "http://www.facebook.com/pages/Jombinabelog/159428397409932",
tunggu: 15,
wait: 1440,
tutup: false
} );
});
</script>
<div id='fbtpdiv'/>

Nota:
Biru - nama fan page
Merah - URL fan page anda

5) Klik preview, jika tiada error klik save template.

Selamat mencuba! :)

Cara Dapatkan Coding Untuk Follower

1) Pergi ke Google Friend Connect

2) Klik setting >> masukkan nama dan url blog >> kemudian klik save your settings

3) Klik Gadgets >> Pilih Members

4) Adjust width, colour dan font ikut citarasa yang anda mahu.

5) Dah siap adjust semua, klik Generate kod dan copy kod yang tertera.

- Selesai -

Sidebar Berstyle

Preview:

Bagi anda yang nak menampakkan kelainan pada sidebar blog, jom cuba trick ini. Sidebar berstyle versi shadow box. Warna kotak sidebar ini boleh ditukar mengikut citarasa anda. Ikuti tutorial di bawah.

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<div style="background: #FFC8E3 repeat; repeat; padding: 5px; border:2px dashed #990066; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; -moz-box-shadow: 0 0 18px #FF3399 ; -webkit-box-shadow: 0 0 18px #FF3399 ; "><center></center>

Masukkan kod html widget / banner/ ayat anda / image apa saja yang anda nak letak di sini

</div>

Nota :
Tulisan biru - masukkan kod html gadget yang anda nak letak pada kotak sidebar ini. Contohnya kod chatbox atau apa-apa sahaja. Untuk dapatkan kod widget Follower pula, anda boleh rujuk tutorial ini.

FFC8E3 - warna background kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah

dashed - jenis garisan kotak. Samaada solid, dashed atau dotted

990066 - warna garisan kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.

FF3399 - warna bayang-bayang kotak. Tukar kepada kod warna yang anda mahu. Rujuk kod warna di bawah.
( untuk paparan lebih besar, klik di sini)

4) Dah selesai, klik save dan lihat hasilnya.

Selamat mencuba! :)

Buang "Word Verification" Pada Comment Di Blog Anda

Tahu tak apa itu "Word Verification For Comment" ? Lihat gambar di bawah :

Benda ni la biasanya yang membuatkan orang malas nak komen, macam nak kena buka peti harta karun kan? ha3. Jadi dicadangkan supaya anda disable fungsi "word verification" ini bagi memudahkan orang untuk komen. Takkan la nak komen pun nak kena teka perkataan bagai kan? ngee.. ^_^ ok ikuti tutorial di bawah untuk cara-cara menghapuskannya :

1) Sign in akaun blogger

2) Dashboard >> Settings >> Comments

3) Pada tab Comments, scroll ke bawah dan anda akan jumpa perkataan " Show word verification for comments? " Ok pada soalan itu, tick pada "No"

4) Klik Save Setting.

Done! tiada lagi "soalan teka perkataan untuk buka peti harta karun".. ^_^

Letak Top Comentator Di Blog

Widget ini akan menampilkan senarai pengomen terbanyak di blog anda. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://jombinabelog.blogspot.com/
&Exclusions=Jom Bina Belog
&ShowHowMany=10
&Order=frequency
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div>

Pada perkataan biru - Letak url blog dan nama blog anda

4) Dah selesai, klik save dan lihat hasilnya.

Selamat mencuba! :)

Delete Blog

Anda tercari-cari macam mana cara nak delete blog? ok jom belajar cara nak delete blog yang korang dah taknak tu.

- Sign in akaun blogger >> kemudian ikuti tutorial bergambar di bawah:

- Done! :)