Showing posts with label kursor. Show all posts
Showing posts with label kursor. Show all posts
Wednesday, December 28, 2016
Cara Membuat Tombol Like Facebook Mengikuti Kursor
Cara Membuat Tombol Like Facebook Mengikuti Kursor
Cara Membuat Tombol Like Facebook Mengikuti Kursor ini adalah postingan Jona Rendra yang berjenis sama dengan Like Box Facebook di Blog, Like Box Melayang di Blog danTombol Like Diatas Postingan Blog karena mempunyai fungsi untuk menyarankan pengunjung untuk mengklik Suka atau Like. Mengapa kita memasang tombol like di blog? Sebab, seperti pemikiran banyak orang, semakin banyak pengguna facebook yang meng-like facebook page kita, semakin terlihat populer pula halaman tersebut.
Nah, pada trik yang satu ini, saya akan membuat pengunjung mau tidak mau akan mengklik Suka pada halaman facebook page anda. Mengapa demikian? Karena tombol like ini mengikuti kursor. Jadi, apabila si pengunjung telah login di facebook sebelumnya pada komputernya, jika ia mengklik bagian pada laman blog kita, ia akan memberi satu like ke FP kita. Bermanfaat bukan?
Tetapi, perlu diingat bahwa orang orang tidak menyukai widget yang menghalangi niatnya untuk membaca konten blog anda. Apabila ada kotak like yang mengitari blog anda, alih alih ingin mendapat puluhan like, blog anda malah ditinggal pengunjung. Kalau anda tetap ingin memasang widget ini di blog, silahkan ikuti tutorial dibawah ini.
Cara Membuat Tombol Like Facebook Mengikuti Kursor
1. Tentukan facebook page anda yang akan dibuat tombol like
2. Login ke blogger, pada dashboard pilih blog, masuk ke Template
3. Sisipkan script dibawah ini tepat di atas kode
</body><script language=javascript src=https://sites.google.com/site/blogjona/files/likejona.js/>5. Masuk ke Tata Letak blog lalu klik Tambah Gadget pada kolom yang tersedia
6. Pilih HTML/Javascript lalu masukkan rangkaian script dibawah ini di kolom konten
<script language=javascript>var fan_page_url = https://www.facebook.com/JonaRendra
var opacity = 0.5;
var time = 30000;</script>
Keterangan:
- Jangan lupa ganti URL diatas dengan alamat fans page facebook anda. Kalau tidak diganti juga tidak masalah :D
- Pada var opacity, 0.5 berarti transparan. Kalau 0 berarti bening (tak terlihat)
Silahkan pratinjau blog anda dan coba mainkan kursor anda disekeliling laman blog. Pasti ada tombol like yang mengikuti.
Itulah artikel dari Jona Rendra yang berjudul Cara Membuat Tombol Like Facebook Mengikuti Kursor, semoga dapat bermanfaat untuk anda. Perlu saya ingatkan sekali lagi, jika anda tidak ingin mengecewakan pengunjung blog anda, jangan pasang script ini. Karena akan membuat blog lambat. Apabila ada pertanyaan mengenai langkah langkah diatas, silahkan poskan melalui komentar
Go to link Download
Saturday, November 26, 2016
Cara membuat tulisan mengikuti kursor di blog
Cara membuat tulisan mengikuti kursor di blog
Cara membuat tulisan mengikuti kursor di blog
By :http://www.seowaps.com/
Postingan kali ini mengenai cara mengatur/mengedit tulisan agar mengikuti kursor di blog. Setelah sebelumnya saya juga membahas tutorial mengenai modifikasi blog dan Panduan blogger yaitu cara membuat dan memasang Shoutcamp di blog dan kumpulan efek blogger berikut ini langkah-langkah trik membuat teks/tulisan mengikuti gerakan cursor di blog:
1. Masuk ke dashbor blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Copy code berikut ke dalam box HTML/Java Script tadi
1. Masuk ke dashbor blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Copy code berikut ke dalam box HTML/Java Script tadi
<style type=text/css>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: comic sans ms, verdana, arial;
color: #a4336a;
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>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tulis teks anda disini";
/* 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 =20;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: comic sans ms, verdana, arial;
color: #a4336a;
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>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tulis teks anda disini";
/* 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 =20;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>
4. Save/Simpan dan lihat hasilnya.
NB: Sobat dapat mengganti jenis dan warna font. Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah. Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.
Go to link Download
Wednesday, November 2, 2016
Cara Membuat Kursor Komputer Sendiri
Cara Membuat Kursor Komputer Sendiri
Cara Membuat Kursor Komputer Sendiri - Terkadang kita merasa jenuh dengan tampilan kursor blog yang default, kali ini saya akan membagi tips cara membuat kursor untuk pc atau komputer, caranya adalah menggunakan software bernama AnifXPortable, software ini didesaint untuk membuat kursor blog sesuai dengan keinginan kita, kita juga bisa memodifikasi foto kita menjadi kursor.
>>Download AniFXPortable
>>Download AniFXPortable
Go to link Download
Saturday, October 29, 2016
Cara Membuat Link Membesar Saat disentuh Kursor
Cara Membuat Link Membesar Saat disentuh Kursor
Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menarik. "Membuat Link Membesar Saat disentuh Kursor". Maksudnya link yang pada saat dilintasi cursor mouse akan menjadi besar tulisannya, Selain cara ini Anda juga bisa Membuat Gambar Membesar Saat disentuh Cursor, Membuat Link Berkedip Saat Disentuh Cursor, Membuat Link Berwarna Warni, dan lain-lain.
Buat Sobat yang ingin memasang trik ini silakan ikuti tutorial dibawah ini.
Cara Membuat Link Membesar Saat disentuh Kursor :
- Masuk ke akun blogger sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari kode a:hover {
- Ganti kode font-size dengan ukuran yang lebih besar.
Contoh :a:hover {ganti dengan
color:#d2691e;
font-size:10px;
font-style:italic;
cursor:wait;
}a:hover {
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
} - Terakhir klik Simpan Template.
Selamat Mencoba dan Semoga Bermanfaat...
Go to link Download
Wednesday, October 5, 2016
Cara Membuat Efek Bintang Jatuh dari Kursor Blog
Cara Membuat Efek Bintang Jatuh dari Kursor Blog
Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobatBuat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan aq berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat, tertarik ? silahkan ikuti tutorial dibawah ini. :)
Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger :
- Login di Blogger
- Pilih Design > Add gadget > HTML/Javascript
- Masukkan kode dibawah ini ke kolom HTML/Javascript
<script type=text/javascript>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
Go to link Download
Subscribe to:
Posts (Atom)