cara mudah merubah cursor mouse pada blog

Mouse pointer atau penunjuk mouse adalah tanda yang menyatakan posisi mouse pada layar. Umumnya berbentuk tanda panah akan tetapi bisa diubah sesuai keinginan. Untuk itu pada postingan kali ini saya akan membagikan cara mudah merubah pointer atau cursor mouse pada Blog anda. Cursor mouse merupakan salah satu bagian penting pada Blog, karena merupakan bagian yang paling sering mendapat perhatian dari pengunjung. Dengan merubah kursornya dengan tampilan yang lebih unik tentunya Blog anda akan terlihat lebih menarik. Jika anda tertarik untuk mengganti kursor pada Blog anda, silakan ikuti tutorialnya dibawah,

Langkah-langkah:

  • Disana anda akan disugukan banyak contoh dari kursornya.
  • Anda dapat memilih berdasarkan kategori yang ada.

kategori kursor


  • Silakan anda pilih salah satu gambar yang anda ingin gunakan pada Blog anda.
pocketball kursor

  • Jika anda telah menentukan kursor mana yang akan anda gunakan, klik gambar tersebut untuk mendapatkan kode dari kursornya.
  • Sekarang copy kode yang diberikan untuk kursor yang telah anda pilih. (Option #1 - Universal CSS/HTML Code)
copy kode kursor

  • Nah anda sekarang telah mendapatkan kodenya.

  • Untuk memasangnya di Blog anda, Pilih Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
  • Isikan konten dengan kode yang sebelumnya telah anda copy.
  • Jika sudah klik "Simpan".

Sekarang anda akan menemukan perubahan yang terjadi pada cursor mouse yang ada Blog anda.

Sekian tutorial dari saya mengenai cara mudah mengganti kursor blog dengan animasi, Semoga bermanfaat.

date Kamis, 03 April 2014


 memasang cctv untuk blog
Halo sahabat blogger di manapun anda berada. Postingan kali ini tentang memasang CCTV di blogger. CCTV sendiri merupakan singkatan dari Closed Circuit TeleVision. Letak penyimpanannya sendiri berada di sudut kanan dari blog. Walaupun kameranya tidak dapat di akses tapi lumayan untuk memperindah tampilan blog. Jika Anda tertarik untuk memasang kamera CCTV tersebut, nih blog 

★Šiti Nurhaerani!★

 akan berbagi scriptnya, silahkan di copy kodenya berikut ini:
<script language="JavaScript" src="http://js4you.googlecode.com/files/cctv.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65y7-7bb9o1nKTe-HO1Y_Zd98WPOYQty8TgBO2iJLriu85uRL9JOXsHipITaXuoeL8Ia1-Oj2vDr1Jrh68MO0qFqjuwB28qdH18wp6NqbLij__BW-2_HPSRCFDXxD8khhutKqTk5G8HI/s1600/cctv.gif")</script>
 Cara memasangnya:

1. Masuk ke Dashboard Blogger

2. Pilih Tata Letak

3. Pilih Tambah Gadget

4. Pilih HTML / Javascript

5. Paste kode di atas tadi pada kotak konten yang tersedia

6. Simpan dan lihat blog Anda

date

Buat kalian yang ingin mempercantik blog, kalian bisa menambahkan efek love yang berjatuhan pada kursor blog kalian :D Mau tau caranya kayak gimana ?? Cekidot!

 
1. Buka Blogger ==> Sign In
2. Klik Tata Letak.
3. Tambah Gadget,
4. Cari HTML/Java Script.
5. Copast Code di bawaah ini.
<script type='text/javascript'>
// <![CDATA[
var colour="#FF0066";
var sparkles=40;
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(5, 5);
var rdow=createDiv(5, 5);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
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()*5;
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;
}
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"49px";
div.style.width=width+"50px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>


6. Ganti tulisan "FF0066" Itu dengan Warna Love-nya yang kalian mau.
7. Kalo udah... Save :)
8. Simpan perubahan.
Selesai! Semoga bermanfaat ya!! Wassalamualaikum!

date Senin, 31 Maret 2014


Kali ini saya akan berbagi ilmu tentang menambahkan efek petir di blog, bagi para pemula blogger contohnya seperti saya pasti banyak yang menginginkan background blognya di ganti dengan foto sendiri atau gambar yang mereka inginkan sendiri. Kali ini saya akan menulis artikel tentang 'Membuat Background Kilat Di Blog'.

Ikuti langkah berikut untuk membuat background blog :

1. Login ke blogger dengan id anda
2. Lalu menuju ke 'design' -> edit HTML
3. Centang Expand Template Widget
3. Cari kode  body {
4. Tambahkan kode berikut di bawah kode ' body { '

background:#000000 url(http://petir-project.googlecode.com/files/zuaz-petir.gif) no-repeat center fixed;


    Kode ungu = Kode warna di belakang background
    Kode Biru  = Link/url background kilat / url background lain yang ingin dipasang
    Kode merah = Jika inginkan gambar berulang-ulang hilangkan saja


5. Lalu 'Save Template' dan lihat hasilnya.

Semoga bermanfaat ya !!! :)

date

Banyak cara untuk memodifikasi tampilan blog agar lebih menarik, salah satunya adalah menambahkan efek salju pada blog kita. Meskipun ini agak menambah berat loading blog tapi blog kita menjadi tampak rame dan menarik.

Kalau Anda penasaran ingin memasang efek salju pada blog, berikut ikuti langkah-langkah cara membuat efek salju pada blog :

1. Login akun blogger Anda.
2. Pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript.
3. Letakkan kode berikut pada HTML/JavaScript untuk judulnya dikosongkan saja. 


<script type="text/javascript" src="http://id-pemula-javascript.googlecode.com/files/efek-salju.js" /></script>
<script type="text/javascript">
snowStorm.snowColor = '#6bd'; 
// salju biru muda silakan ganti dengan warna lain
snowStorm.flakesMaxActive = 96;
snowStorm.useTwinkleEffect = true;
</script>

4. Kemudian Simpan.

Nah, sekarang Anda bisa melihat hasilnya, tampilan blog Anda menjadi lebih rame dan menarik. 

date Kamis, 27 Maret 2014

Cara Menggerakan Tulisan Judul Blog Di Tab

Untuk menggerakan indahnya blog anda dengan tulisan bergerak dalam searah serta kembali terus menerus seperti geraknya di tab atas blog ini, yaitu:
1. Seperti biasa masuk blog -> Desbor -> Rancangan -> edit hTML lalu
2. jika setelah buka cari kode <head> paling atas, jika lebih dari satu kode seperti itu.
3. Simpan kode dibawah ini:

<script language='JavaScript'>
var txt="----> MUSUKAN TULISAN YANG ANDA INGINKAN ";
var kecepatan=80;var segarkan=null;function bergerak() { document.title=txt 
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

Cara simpannya tepat dibawah kode <head>

4. Perhatikan tulisan "---> MASUKAN TULISAN YANG ANDA INGINKAN" ganti dengan tulisan yang anda inginkan.

5. Setelah itu save / simpan HTML, lihat hasinya,
Semoga sukses!.

date


Cara Membuat Tulisan Mengikuti Cursor
        Sudah pernah lihat tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti Cursor di blog blogger?

Tadi saya baru saja berkunjung ke salah satu blog teman yang menulis pesan di buku tamu, di sana saya melihat sebuah tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti kemanapun arah cursor tersebut.

Setelah melihat itu saya jadi ingin untuk menuliskan caranya, siapa tahu ada yang ingin  menghias blog nya dengan tulisan berputar mengelilingi cursor blognya.

Panduan Cara Membuat Animasi Tulisan Berpuatar Mengelilingi Cursor

  1. Login ke dashboard blogger
  2. Klik Tata Letak
  3. Cara Membuat Tulisan Mengikuti Cursor
  4. Setelah itu klik Tambah Gadget
  5. Gadget Tulisan Mengikuti Cursor
  6. Pilih Gadget / Widget HTML/JavaScript
  7. Script Tulisan Mengikuti Cursor
  8. Klik Edit HTML
  9. Tutorial Panduan Membuat Tulisan Mengikuti Cursor
Kemudian masukkan semua script / kode tulisan mengikuti cursor berikut pada widget tadi.
<style type='text/css'>
/* Circle Text Styles */
#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: #999;

/* 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'>
//<![CDATA[
/* 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 = "MASUKKAN TEKS ANDA DI SINI";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's 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>
Keterangan :
// Your message here (QUOTED STRING)
var msg = "A.R Blog (Blogger Tutorial)";

silakah ganti tulisan A.R Blog (Blogger Tutorial) dengan tulisan yang anda inginkan, karena tulisan itulah yang nantinya akan berputar-putar mengeliligi cursor.

Bagaimana cara merubah warna tulisan yang mengikuti cursor tersebut ?

Karena ada beberapa teman kita yang menanyakan hal tersebut maka akan saya tuliskan caranya.

Silakan lihat pada bagian atas kode script tulisan mengikuti cursor tersebut, maka kamu akan menemukan kode
color: #999;
Silakan ganti #999 dengan kode warna lainnya yang kamu suka (ingat hanya kode #999  yang diganti). 

date