Efek-efek Keren pada Blog
Pada Menu Template, Pilih Edit HTML
Cari Kode ]]></b:skin>
Pastekan Kode dibawah ini tepat diatas kode ]]></b:skin>
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease
Caranya sama seperti cara diatas pada Kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:600px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Masuk Pada Tata Letak, Klik Tambahkan Gadget
Pilih HTML
Pastekan Kode dibawah ini (Untuk Judul dikosongkan aja)
<script src='https://sites.google.com/site/didopalangkaraya/efek/Link%20bergoyang.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>
Efek Judul post dan link berkedip berubah warna saat disorot Mouse
Pada Template
Pilih Edit HTML
Cari Kode </head>
Pastekan Script di bawah ini tepat dibawah kode </head>
<script src='https://sites.google.com/site/didopalangkaraya/efek/EfekJudulPelangi.js'/>
Efek Link Berbintang-bintang saat disorot Mouse
Pada Template,
Klik EDIT HTML
Cari kode <head>
Pastekan Kode dibawah tepat diatas kode <head>
a:hover { text-decoration:blink; background:url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/animasibintangkuning_zpsf8325443.gif); }</style>
Perhatikan alamat URL yang berwarna Biru diatas,
Untuk berwarna PINK ganti aja URL nya denganhttp://i1009.photobucket.com/albums/af214/Dido_Canabis/animasibintangpink_zps90e5f80f.gif
Pada Tata letak Letak
Pilh Tambahkan Gadget
Klik HTML/Javascript
Pastekan Kode dibawah ini
<script src="https://sites.google.com/site/didopalangkaraya/efek/Kursor%28%2B%29Merah.js" type="text/javascript"></script>
Efek Gelembung (Bubble) mengikuti titik Cursor/mouse
Pada Tata letak Letak
Pilh Tambahkan Gadget
Klik HTML/Javascript
Copy Paste Kode Script dibawah ini :
<script type="text/javascript" src="https://sites.google.com/site/didopalangkaraya/project/Gelembung%20Mouse.js"></script>
Efek Gelembung Air Pada Blog
Pada Template
Pilih Edit HTML
Cari kode </body>
Pastekan Kode dibawah Tepat diatas kode </body>
<script type="text/javascript">
// <![CDATA[
var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc"); // 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 Gelembung Air *
* (c) 2012 devilcode *
* Konten Publik *
* Dont't Edit Below This Box*
****************************/
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>
Sumber Link: http://dido-borneo.blogspot.com/2014/01/efek-efek-keren-pada-blog.html#ixzz3YKoRgo4E
0 comments:
Post a Comment