SEMUA ADA DI SINI :)

Jumat, 25 Mei 2012

Sidebar Berstyle :)

Perlu Di Coba nih, pengen tau jadinya Liat aja di Blogku , sebelah kanan Yang ada Haiii dan follow follow itu Loh..pengen kan ? keren deh..cek di bawah ini. jangan Lupa di coba

1. Sign in akun blogger

2. Tata Letak >> Add A Gadget >> Html / Javascript

3. Copy paste kode 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 kode html widget / banner/ ayat anda / image apa saja yang anda nak letak di sini

</div>

NB :
Tulisan biru - masukkan kodE html gadget yang anda nak letak pada kotak sidebar ini. Contohnya kodE chatbox atau apa-apa saaja.

FFC8E3 - warna background kotak. Tukar kepada kodE warna yang anda mau. kode warna di bawah

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

990066 - warna garisan kotak. Tukar kepada kode warna yang anda mau.
FF3399 - warna bayang-bayang kotak. Tukar kepada kode warna yang anda mau.

kode warna silahkan Lihat

di sini

selamat Mencoba !

Efek Bubble Pada Blog :)

Bubble nya akan turun dari bawah blog naik ke atas, warna bubble bisa di ganti dengan warna kesukkan :)
mau tau langsung ? cek di bawah ini

1. Sign in akun blogger

2. Dashboard >> tata Letak >> Add A Gadget >> Html / Javascript

3) Copy dan paste kode di bawah ini 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>

NB : 33FF33 -WARNA BUBBLE BORDER , tukar pada kode yang anda suka. lihat di bawah
0000CC - warna bubble. tukar pada warna kesuka'an anda.
mau pilih kode warna ?klik di sini

selamat Mencoba :)

Kamis, 17 Mei 2012

Efek Miring sa'at Cursor nyentuh Gambar :)

Wah menarik Bukan? Mau jelasin dikit ya kawan :) gini loh efek miring waktu Cursor menyentuh image[gambar] menarikk bukan. langsung Lah..

Caranya:

1) Sign in akun blogger

2) Template > Edit HTML > Tick kotak "Expand Widget Templates"

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

]]></b:skin>

4) Kemudian copy paste kode di bawah sebelum kode ]]></b:skin> yang anda cari tadi:

.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

5. Jangan asal save, Klik preview dulu :) kalo enggak error.. save boleh

selamat Mencoba :)

Sabtu, 12 Mei 2012

Floating Button Blog :)

Floating Button adalah Tombol yang memudahkan Pembaca Connect Dengan social Network Anda .
enakkan.. selain mudah , dia juga terlihat kemas dan elok ,
Floating button ini akan muncul pada sebelah sisi kanan atau kiri blog
elain sosial network, korang juga boleh letak button lain untuk floating button ini (cth: email, link blog, youtube dan etc)

Caranya :

1. Sign in akaun blogger

2. Tata Letak > Add A Gadget > Html / Javascript

3. Copy paste kode di bawah pada ruang Html / Javascript tadi

<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:140px; left:-12px;'>

<a class='linkopacity' href='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />

</div>

NB :
- Pada tulisan berwarna biru, masukkan url facebook, twitter dan blog
- Pada tulisan berwarna merah, masukkan url button yang Anda. Search button di google atau mana-mana image hosting. Kalau mau gunakan yang sedia ada pun tak ada masalah, tak perlu search.
- Yang warna purple pula, boleh tukar mengikut kesesuaian blog. Left boleh ditukar kepada right.

4) Save dan lihat hasilnya.

Cursor Text Bergerak :)

Caranya :

1) Login akun blogger > Tata Letak > Add A Gadget > HTML/Javascript

2) Copy paste kode dibawah pada ruangan html tadi

<style type="text/css">

/* Circle Text Styles */

#outerCircleText {

font-style: normal;

font-weight: normal;

font-family: 'ARIAL';

color: #8D38C9;

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 = "TEXT HERE";

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>

NB :
Dalam kode di atas, tukarkan :
ARIAL - font pilihan Anda
TEXT HERE - masukkan text pilihan anda
8D38C9 - kode warna text pilihan anda, boleh pilih kode warna di bawah:
klik di sini)

SAVE DAN LIHAT HASILNYA :)

DropDown Menu :)

Laah.. aku Pake ini.. gak terlalu canggih memang, tapi dapat memudahkah Pandatang Blog. :)

Begini caranya :

1. Sign in akaun blogger

2. Tata Letak > Design > Add A Gadget > Html / Javascript

3. Copy paste kode di bawah pada ruang Html / Javascript tadi

Terdapat 2 pilihan kode,

Copy kode ini jika mahu link dibuka dalam page yang sama:

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

<option value="Link 1">Menu 1</option>

<option value="Link 2">Menu 2</option>

<option value="Link 2">Menu 3</option>

<option value="Link 2">Menu 4</option>

<option value="Link 2">Menu 5</option>
</select>

Copy kode ini jika mahu link dibuka dalam page yang berlainan.

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

<option value="Link 1">Menu 1</option>

<option value="Link 2">Menu 2</option>

<option value="Link 3">Menu 3</option>

<option value="Link 4">Menu 4</option>

<option value="Link 5">Menu 5</option>
</select>

NB :
Tajuk menu - tajuk menu Anda [ judul yang anda inginkan ]
Menu - menu yang ingin kamu letakkan.
Link - link untuk setiap menu

SAVE dan lihat hasilnyaa....

Tombol Back To Top Pada Blog :)

Biasanya Posting Blog yang banyak atau Comentar yang banyak Memerlukan waktu untuk Samapi ke atas Lagi. Nah disni saya akan Memberi Trik Back to top Button.
Blogger biasanya menggunakan button "back to top" untuk memudahkan pelawat jump ke bagian atas blog semula tanpa perlu scroll tepi bar.

Caranya :

1. Sign in akaun blogger

2. Dashboard > Tata Letak > Add A Gadget > Html / Javascript

3. Copy paste kode di bawah pada ruang Html / Javascript tadi