Post Game: cursor

Showing posts with label cursor. Show all posts

Thursday, December 22, 2016

Cara Membuat Gambar di Blog Berputar saat disentuh Cursor

Selamat sore sahabat blogger semua !!! Kali ini, aq akan membagikan Tips dan Trik nih buat kalian semua tentang Cara Membuat Gambar di Blog Berputar saat Tersentuh Cursor.

Cara Membuat Gambar Berputar Tersentuh Cursor :

Login Blogger.com
Klik Template
Edit HTML => expand template widget => Cari kode ]]></b:skin>
Letakkan kode di bawah ini di tepat atas kode ]]></b:skin> :

Gambar berputar di posting blog :

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.postimg:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Gambar berputar dan membesar di posting blog :

.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s 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;}

Gambar Post dan Komentar :

.img{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}.img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Hanya Gambar comment :

.comment img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.commentimg:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Hanya Gambar Header saja :

.header img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}.headerimg:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}

Save template

Catatan : Kode-kode diatas sebenarnya sama, yang membedakan hanyalah perintah yang telah aq beri warna merah pada fontnya.

Go to link Download

Cara Membuat Cursor Bertabur Bintang

Mempercantik atau memperindah tampilan Blog adalah naluri dari setiap blogger .dan jikalau tampilan blog seorang blogger telah mencapai tahap yang paling indah nantinya juga sang pemilik akan bangga terhadap blognya.hehehe jangan kaya tampilan blog klinik-it ini yang terlihat semerawut .hehehe nah...dalam postingan kali ini klinik-it akan menjelaskan tentang bagaimana Cara Membuat Cursor Bertabur Bintang.Cursor yang bertabur bintang adalah salah satu cara untuk mempercantik tampilan blog.karena saat cursor di geser kursor tersebut akan mengeluarkan bintang-bintang. Contohnya Bisa kamu lihat disini.

Setelah melihat Contohnya Tertarik tidak sobat untuk membuatnya ?jika tertarik silakan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini untuk Membuat Cursor Bertabur Bintang.

1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .

Bintang Biru

Bintang Hijau

Bintang Merah

Bintang Putih

Bintang Ungu

6.Kalo sudah selesai jangan lupa klik SIMPAN...

7.Selanjutnya silkan sobat lihat hasilnya...

Go to link Download

Cara Membuat Cursor Bubble Pada Cursor di Blog

Cara Membuat Efek Bubble Pada Cursor di Blog, Yups... seperti postingan saya tentang cara membuat efek bintang berjatuhan dari kursor, Tapi kali ini tentang Efek Bubble atau bisa disebut dengan gelembung. Tips ini ane dapet dari blog kang fatur Lalu ane ulas lagi disini..contohnya seperti blog saya.

Ok deh buat sobat" yang dah kepengen sama tips ini, Langsung aja ke TKP. hehehehe

1.Login ke Blogger
2.Rancangan --> Elemen Laman --> klik Tambah Gadget --> HTML/Javascript
3.Lalu Copy dan Paste Kode Bubble Kursor Efek di bawah ini di kotak HTML/Javascript

<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=100; // maximum number of bubbles on screen

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>

NB :

* Kode yang berwarna merah adalah warna Bubble silahkan sobat ganti dengan warna kesukaan sobat,
* Kode yang berwarna biru adalah jumlah Bubble yang akan kita pasang. Sobat boleh menggantinya mau seberapa banyak Bubble yang akan di tampilkan

4. Simpan dan coba lihat hasilnya.....

Semoga Berhasil ^_^

Go to link Download

Cara Membuat Gambar Membesar Saat disentuh Cursor

Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.

Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :

Masuk ke akun blogger sobat.
Pilih Template > Edit HTML.
Ceklis / Centang Expand Widget Template.
Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; 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: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.

Semoga tutorial singkat ini bisa bermanfaat...

Go to link Download

Cara membuat tulisan mengikuti arah cursor

1.login blogger
2.Tata letak/layout
3.Tambah Gadget
4.HTML/Java Script
5.Copy Paste kode di bawah ini

<style type="text/css">
/* Circle Text Styles */
/*http://www.dynamicdrive.com/dynamicindex13/circletext.htm */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: comic sans ms, verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
   Website: http://www.tempermedia.com/
   Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
   Modified Here for more flexibility and modern browser support
   Modifications as first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This notice must remain for legal use
   */

;(function(){

// Your message here (QUOTED STRING)
var msg = "WELCOME TO MY BLOG";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set fonts style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

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>

6.Selesai

catatan: tulisan yang berwarna merah ganti tulisa yang anda inginkan

Go to link Download

Post Game

Thursday, December 22, 2016

Cara Membuat Gambar di Blog Berputar saat disentuh Cursor

Cara Membuat Gambar di Blog Berputar saat disentuh Cursor

Monday, December 19, 2016

Cara Membuat Cursor Bertabur Bintang

Cara Membuat Cursor Bertabur Bintang

Saturday, November 26, 2016

Cara Membuat Cursor Bubble Pada Cursor di Blog

Cara Membuat Cursor Bubble Pada Cursor di Blog

Monday, October 24, 2016

Cara Membuat Gambar Membesar Saat disentuh Cursor

Cara Membuat Gambar Membesar Saat disentuh Cursor

Cara membuat tulisan mengikuti arah cursor

Cara membuat tulisan mengikuti arah cursor