Cara Membuat Banner

Teman teman pada postingan kali ini saya akan memberikan cara agar kalian bisa membuat banner untuk blog, banner tersebut bisa berganti ganti dan jika diklik akan menuju link yang kalian akan tulis nanti
oke , langusng aja ke tutornya

  1. masuk ke blogger kalian "pastinya"
  2. masuk ke sini
  3. dan pilih salah satu bannernya, cara mencari banner yang lainnya bisa di klik "Previous" atau "Next" 
  4. jika sudah menemukan banner yang kalian suka , sekarang klik "Edit this"
  5. isikan kata kata dengan yang kalian mau , jangan lupa isikan juga alamat yang akan dituju jika diklik
  6. jika sudah selesai klik "Generate Animation"
  7. setelah itu copy kan tulisan yang ada di kolom Easy
  8. selanjutnya tinggal memastekan tulisan tersebut ke blog teman teman
  9. caranya masuk ke "Tata Letak" selanjutnya klik "Tambah Gadget" cari "HTML/JavaScript" selanjutnya pastekan tulisan  yang tadi teman teman copy di kolom konten
  10. klik simpan
lihat hasilnya :D
sekian dulu tutorial dari saya , semoga bermanfaat, dan jika ada kesalahan atau yang lain silahkan komentar :D

Cara Membuat Link Bergerak Jika Terkena Kursor

Teman teman :) , sesuai judul saya akan memberi tahu Cara Membuat Link Bergerak Jika Terkena Kursor
Pasti teman teman semua pernah berkunjung ke website atau apapun, dan pada saat kalian akan membuka link yang ditujukan penulis , kalian bingung karena link yang ditujukan si penulis tersebut sama dengan tulisan tulisan yang lainnya. Untuk membuat link bergerak tidaklah susah , hanya butuh ketelitian.
Oke , panjang langsung aja ke Tutornya

  • kalian buka blogger "pastinya"
  • masuk ke "Template" - "Edit HTML"
  • tekan "Ctrl + F" dan cari kode </head>
  • setelah itu letakan kode di bawah ini tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>
  • simpan template, lihat blog
Demikian yang dapat saya sampaikan, semoga bermanfaat. Jika ada kesalahan ataupun masukan dari teman teman silahkan di isi di kolom komentar :)  

Cara Membuat Efek Salju pada Kursor Blog

Oke teman teman , pada postingan saya kali ini saya akan memberi tahu Cara Membuat Efek Salju pada Kursor Blog . tanpa panjang lebar langsung aja ke cara caranya :
  1. Login Blogger, pilih tata letak
  2. kemudian tambah widget 
  3. Edit script html yg bru ditambahkan, copykan script dibawah ini, jangan lupa disimpan

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">

// <![CDATA[

var colour="black";

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;

}

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+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>


Demikian yang dapat saya sampaikan, semoga bermanfaat. Jika ada kesalahan ataupun masukan dari teman teman silahkan di isi di kolom komentar :) 

Cara Mengganti Kursor Mouse pada Blog



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 kalian. 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 kalian akan terlihat lebih menarik. Jika kalian tertarik untuk mengganti kursor pada Blog kalian, silakan ikuti tutorialnya dibawah,

Langkah-langkah:
  • Disana kalian akan disugukan banyak contoh dari kursornya.
  • kalian dapat memilih berdasarkan kategori yang ada.

kategori kursor


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

  • Jika kalian telah menentukan kursor mana yang akan kalian gunakan, klik gambar tersebut untuk mendapatkan kode dari kursornya.
  • Sekarang copy kode yang diberikan untuk kursor yang telah kalian pilih. (Option #1 - Universal CSS/HTML Code)
copy kode kursor
  • Nah kalian sekarang telah mendapatkan kodenya.
  • Untuk memasangnya di Blog kalian, Pilih Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
  • Isikan konten dengan kode yang sebelumnya telah kalian copy.
  • Jika sudah klik "Simpan".

Sekarang kalian akan menemukan perubahan yang terjadi pada cursor mouse yang ada Blog kalian.
Demikian yang dapat saya sampaikan, semoga bermanfaat. Jika ada kesalahan ataupun masukan dari teman teman silahkan di isi di kolom komentar :)
Rock On
Powered by Blogger.