Tutorial cursors bubble effect

oke . hari ni semangat lagi . tutorial baru . benda nie agak baru lagi . korang tahu tak .

kat cursor korang ada buble . hehe . oke .

here we go .

Bismillah .. 

pergi Design > Page Elements > Add Gadget > html

oke . dah kan . then copy code kat bawah ini then paste kat situ oke . .

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=30; // 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>
oke . now kita customize bubble kita oke .
yang warna merah itu jumlah bubble yang korang nak oke . letak sikit oke la . nanti banyak serabut pula . .
oke yang biru warna buble korang . korang boleh ubah ikut suka ja .

oke . bila dah siap save ok .

that all . comment sikit yea.  

Love



Love just like a magic 

it occur when we didn't notice it 

it appear by coincident 

the feeling occur because of somebody 

somebody that we care so much 

somebody that really meant to use 

someone that make we fall for it 

fall to be in love . 



own truly by berbicaradenganhati


credit : picture own by Mr Google

tutorial shadow effect dekat post title dan sidebar title

 oke . jom kita buat shadow plak ok . 
start . 


1. Dashboard-->Design-->Edit HTML-->tick Expand Widget Templates .
2. Untuk buat shadow for post title, korang tekan CTRL+F and cari code ni.
h3.post-title {
3. Lepas tu, korang copy code dekat bawah ni , paste dekat bawah code atas ni.


text-shadow: 2px 2px 3px #FFFFFF;

4. Untuk buat shadow dekat sidebar pulak, korang cari code ni .

h2 {
5. copy and paste code shadow yang sama  tadi .
6. yang warna merah tu, code warna . yang tu warna putih . kalau korang nak
tukar warna pown bole 
Preview and save .

tutorial tukar background blog

oke . sekarang pasal tukar background blog pula yea . memang senang saja . oke . tak mahu beleter panjang . so macam biasa .

first buka Dashboard > Design > edit HTML

then korang kena cari kode

body {

korang boleh guna CTRL+F untuk cari kode tadi . lagi senang .

 then bila dah jumpa . korang paste code nie bawah code tadi oke .

background:url(url background);background-attachment: fixed;background-repeat: repeat;}

oke . bila dah paste . korang letak la url gambar yang korang nak dekat warna merah tue .
dah letak then preview . kalau jadi save . siap .

tutorial border keliling blog

oke . rajin lagi sekarang nie . oke . nak ajar korang buat border keliling blog ok . hurm . senang saja .

oke . yang border tu macam yang kat atas tue ja . oke . 

1. Seperti biasalah, pergi Dashboard > Design > Edit HTML.

2. Cari codes ini ya guna CTRL+F.
.content-outer {
3. Copy codes dibawah ni.
border: 2px solid #000000;
-moz-border-radius: 3em;
-webkit-border-radius: 3em;
border-radius : 3em;
4. Bila dah copy, paste pulak di bawah step 2 tuh.

5. then, korang cari lagi codes dibawah ni.
.content-inner {
6. Dah cari korang copy lagi step 3 tuh then paste di bawah codes tersebut.

7. Then, kaler biru di codes step 3 tuh kan adalah tahap kelengkungannya. jadi semakin besar number, maka semakin melenkung la border page tuh. okai.

8. Preview and save.

tutorial cantikkan blockquote

oke . hari nie rajin nak menjengah blog ini . so rajin buat tutorial . so hari ni tentang blockquote pula ok

oke . first step macam biasa .

click Dashboard > Design > Edit html > tick dekat expand widget oke .

sudah buat semua tue .  korang kena cari code nie .



.post blockquote {
kalau nak senang . guna CTRL+F saja untuk cari code itu ok .
lepas dah jumpa . korang kena paste code nie bawah code yang korang cari tu oke . .

background:url(URL background
); padding:5px;
Border:2px dashed #00000;
colour:#FFFFFF}
blockquote:hover {
background: url(URL background
) repeat right bottom ;
border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}


oke . dah paste preview dulu . kalau jadi save oke .

oke . dah tengok tuto nie bagi kredit sikit yea .

Cara pasang floating button di sisi blog .. ツ


Step 1

Log in blog => Design => Page Elements => Add A Gadget => HTML/Javascript.

Step 2

copy html code kat bawah nie .. pastu paste ja .. hurm .. senang kan .. ok .. peringatan .. yang mana ak dh bold tue .. korang tkaq link diew .. dengan link korang la .. example .. facebook .. masukan link facebook anda .

<style type='text/css'>a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;}
a.linkopacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0; }</style>
<div style='display:scroll; position:fixed; top:240px; right:-12px;'>
<a class='linkopacity' href='http://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgqVsUo1esLeApgIXNdLHG5cNvdcJgrmCoNMuaoE5zlHJ5NrIPukbrwJgN-EmqmT4OQzhFkFboH_dFT7YWXptFhyphenhyphenqF59hJS5KPqqs5dmrKTuXYxSaUou4ouQDFkymEjuxEdj4zQyfHCnx/s320/icongb.PNG" /></a><br /><a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheP1yHuzurwtAoPnnW5SqMWjqaLbUnlGcrEGsmgzi20zDooilqsWNzA7t6EGK7b8jXGNwXvJhn7OZWQqT-6sFITj3M1r0rA2HIZ7SzP3kg3PSRkQlNCjlP3kXv0SVrTHhYSSgy6KNeQDdc/s320/facebook.png" /></a><br />
<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96psrQ36fITPxHwaSVvyif9g2GEgi9iWRVEamaKiZL80-3-7Xr3PCYjAcqydEEz7RrcVdLFZPmyILnM6DmvNYT1s1Rj8lgWPQGyJBJd5ZdYFyCay9JT4PJO1YGzKdCx8oGQcl2k9zmxmm/s320/twitter.png" /></a><br />
<a class='linkopacity' href='http://berbicaradenganhati.blogspot.com/feed blog' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0q_1Kx3ZUEeGPiobbl4kM55FPj6mgprWA_QvPos4HrYKOhjxE86qnnSk_Qgbmia9tK1hz864ApfB6BxA6zCMtUsXQo-sHubuiGtjGOryKPzzpPGmRvsmGrp0vZUkUIKpSshgjMjCsJF9/s320/feedblogger.png" /></a><br />
<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8HmJEUeOfs_oxfqp44gcf0fhMDzpTl3g0LsuXQGmc6Y8Y1QnCSLWX-Pd7Yu98KvhfN41Rp6FDzWMQleEj35v2RvfY38DVlUxAm5xdkd8RX6WNz8Hmo3QBvFnFELOMfz_IRvX3Us6eNg2a/s320/feedburner.png" /></a><br />
<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUIpepKXmF_vSgGaA6ktVu7NYLYjwkFQMVjHmWJ9gsIYjDEn8gLrzovlvOgjTr-JrAuhEuV6DtBetuDskmYARCtTJpheEHonpdtty3GHYGMZWuapwXqsJVMWU1fIP_7IgSQtuYmedBfO33/s320/youtube.png" /></a><br />
<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2iL2sYhXeW_wTXRrNcxjjv-rFOGGKxjVvAhzbYSAWBCNnfNUXMLu_iJXMwQxHL-RwOOyYfaUS4U-KdQINSbWyaHhd0B6lyzFKqICnaj9HZ0nG3w7FNE1xlMkX2UoU-ZX1uR_UJXlVnEU/s320/flickr.png" /></a><br />
</div>

bila dah paste to preview ..

Akhir sekali, klik Save.

p/s : korang leh ubah icon tue .. then link tue ubah la ikowt icon korang nak tue .. hhuhu .. try la noh ..
 

Geng Kongsi Gelap

Total Pageviews

Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat