Tutorial : Efek round hover pada image apabila dilalukan cursor
Rabu, 20 Februari 2013 | 10:50 PTG | 0 budak suka cupcake + pink
Sila ikuti tutorial di bawah:1) Login akaun blogger anda
2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)
3) Tekan ctrl + F serentak, cari kod
/* Headings
atau
/* Header
Copy kod di bawah dan paste SEBELUM kod /* Headings atau /*Header
a img {-webkit-transition-duration:.4s;}img:hover {filter: alpha(opacity=60);opacity: .9.9;border-radius:50px;border: 1px #FF66CC;-webkit-box-shadow: 0px 0px 20px #FF66CC;-moz-box-shadow: 0px 0px 20px #FF66CC;}
Contoh:
a img {-webkit-transition-duration:.4s;}img:hover {filter: alpha(opacity=60);opacity: .9.9;border-radius:50px;border: 1px #FF66CC;-webkit-box-shadow: 0px 0px 20px #FF66CC;-moz-box-shadow: 0px 0px 20px #FF66CC;}
/* Header
4) Save dan lihat hasilnya.
Selamat mencuba! :)
Tutorial : Efek Link Bergoyang / Nudging
| 5:44 PG | 0 budak suka cupcake + pink
Efek menarik ni korang boleh cuba apply dekat blog masing-masing.. Kalau berminat la, kalau tak berminat jangan paksa diri ok,hehe..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! :)
Tutorial : Efek kotak shadow apabila cursor menyentuh blockquote
| 5:12 PG | 0 budak suka cupcake + pink
1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
.post blockquote {
atau kod di bawah
blockquote:hover {
4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi
border:2px dashed #000000;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px;-moz-box-shadow: 0 0 18px #FF3399 ;-webkit-box-shadow: 0 0 18px #FF3399 ;}
Nota:
000000 - warna garis border. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah
FF3399 - warna bayang-bayang pada kotak. Tukar kepada warna yang korang suka. Rujuk kod warna di sini.
5) Klik preview, jika tiada error, klik save template.
Selamat mencuba! :)
Tutorial : Efek kotak shadow apabila cursor menyentuh blockquote
Sabtu, 8 September 2012 | 9:31 PTG | 0 budak suka cupcake + pink
1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod
.post blockquote {atau kod di bawah
blockquote:hover {
4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi
border:2px dashed #000000;Nota:
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF3399 ;
-webkit-box-shadow: 0 0 18px #FF3399 ;
}
000000 - warna garis border. Tukar kepada warna yang korang suka.
FF3399 - warna bayang-bayang pada kotak. Tukar kepada warna yang korang suka. Klik sini
5) Klik preview, jika tiada error, klik save template.
Selamat mencuba! :)
Tutorial : Efek Icon Muncul Apabila Cusor Menyentuh Blockquote
Jumaat, 22 Jun 2012 | 7:43 PG | 0 budak suka cupcake + pink
Apabila cursor dilalukan pada petikan blockquote, icon akan muncul pada penjuru bawah kanan kotak blockquote. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda.1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini
.post blockquote {
4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod .post blockquote { tadi
blockquote:hover {
background-color: #FFC8F2;
-webkit-transition-duration: 3.5s;
background-image:url(http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif);
background-position:bottom right;
background-repeat:no-repeat;
}
Nilai yang anda boleh adjust dalam kod di atas:
http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif - letakkan url icon yang anda mahu. Gambar-gambar mini icon yang comel anda boleh search di sini.
FFC8F2 - warna background pada kotak blockquote apabila disentuh cursor. Klik sini.
5) Klik preview dan jika tiada error, klik save template.
Selamat mencuba! :)
Tutorial : Efek double dashed apabila cursor menyentuh link (Double Dashed Hover)
| 7:42 PG | 0 budak suka cupcake + pink
Caranya: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
a:hover4) Kemudian copy paste kod di bawah selepas kod a:hover yang korang cari tadi:
border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;
contoh:
a:hover
border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;
Nota:
ff8fc1 - warna garisan dashed. Tukar dengan kod warna yang korang suka.Klik sini.
5) Lastly, klik preview, jika tiada error, klik save dan lihat hasilnya.
Selamat mencuba! :)
Tutorial : Efek Bubbles Pada Blog
| 6:44 PG | 0 budak suka cupcake + pink
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
0000CC - warna bubble. Tukar kepada kod warna yang anda suka.Klik sini.
4)Kemudian klik save dan lihat hasilnya.
Selamat mencuba! :)
Name : Yasmin Farisya 
Allah, Rasulullah and Islam 
Liar 