tulisan berjalan

selamat datang di blog saya dan semoga blog saya bermanfaat ☺

text

don't forget follow twitter me : @istianahghitan

tips blogspot


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 dalam postingan kali ini saya akan memjelaskan tentang bagaimana 
Cara Membuat Cursor Bertaburan Bintang. Cursor yang bertabur bintang adalah salah satu cara untuk mempercantik tampilan blog, karena saat cursor di geser cursor tersebut akan mengeluarkan bintang-bintang. Contohnya bisa kamu lihat disini.



Cara Membuat Cursor Bertaburan Bintang


1. Login ke blogger2. Pilih Rancangan kemudian Tambah Gadget3. Pilih HTML/JavaScript4. Masukan salah satu kode HTML sesuai warna yang kita inginkan berikut ini:<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>5. Kita warnan biru dengan, hijau, merah, ungu, silver, kuning, hitam6. Simpan jika sudah selesai.  




Membuat Efek Bubble (Gelembung) Pada Cursor

Membuat Efek Bubble (Gelembung) Pada Cursor




















Bagaimana tampilan blogmu? Sudah oke? Kali ini Belajar Ngeblog di BLOG menyajikan salah satu cara membuat blogmu terlihat berbeda. Kalau dulu pernah kita membuat efek bintang sekarang ganti membuat efek bubble (gelembung) yang akan mengikuti cursor. Sama seperti mainan anak-anak kecil yang bola yang bergelembung-gelembung dari sabun itu loh,, tapi di terjadi di blog dan cursornya adalah penghasil bubble (gelembung-gelembung) itu.
Saya pernah mencoba, dan lucu. Gelembung itu dari berasal daricursor kecil lalu lama-lama besar dan naik ke atas. Ibarat sebuah halaman atau toko, kadang blog juga perlu kejutan atau tampilan yang berbeda dari biasanya. Efek bubble (gelembung) ini bisa menjadi pilihan ketika ingin membuat berbeda itu. Dan melepas (menghapusnya) ketika sudah mulai bosan. ;)

Cara Membuat Efek Bubble (Gelembung) Pada Cursor1. Login ke blogger2. Pilih Rancangan kemudian Tambah Gadget3. Pilih HTML/JavaScript4. Masukan kode HTML berikut ini:



<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>
5. Kode warna pink adalah kode warna dari bubble (gelembung) itu, kamu bisa mengubah dengan kode warna yang lain.
6. Simpan jika sudah selesai. 





Cara Membuat Cursor Animasi

Hmmm jika anda adalah orang orang yang suka mempercantik blog, neh ada sedikit Tutorial blog tentang membuat Cursor keren, hmmmm kok keren? yah..karena cursor nya bertabur bintang. Trus bagaimana membuat cursor bertabur bintang?

Sebenarnya ini udah gak asing lagi karena udah banyak sekali para blogger yang memosting membuat cursor bertabutur bintang ini, tapi bagi yang belum paham neh tutorial nya yang saya ambil dari blog sahabat saya


1. Login ke akun blogger anda
2.Masuk ke Layout atau Rancangan
3. Trus tambah Page Element / elemen laman
3.Tambahkan gadget HTML/JavaScript
4.Pilih kode warna taburan bintang dibawah ini.

Kode warna bintang Hijau
<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>  

Kode warna bintang Ungu
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script>
Kode warna bintang Merah 
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script>
Kode warna bintang Putih
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

Kode warna bintang Biru
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script> 

5. Kopi salah satu yang anda suka lalu simpan dan simpan lagi
6. Kode di atas juga bisa dicampur campur menurut saudara
7. Lihat hasilnya....keren kan?


Cara Menampilkan Hari, Tanggal dan Jam di Blog

Untuk Menampilkan Hari, Tanggal dan Jam di Blog, diperlukan suatu kode JavaScript.
Sehingga Tanggal dan Jam tersebut bisa langsung terupdate sesuai dengan zona waktu.Untuk menerapkannya di Blogger, sobat tinggal memasukan kode JavaScript berikut ke dalam Blog sobat.
Jika sobat mengerti dengan JavaScript, sobat bisa mengaplikasikannya di Html Blog sobat.Berikut kode Scriptnya :

<script type="text/javascript">
var dayarray = new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
var montharray = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus",
"September","Oktober","November","Desember");

var myblog = new Date();

var day = myblog.getDay();
var month = myblog.getMonth();
var daym = myblog.getDate();
var year = myblog.getFullYear();

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()

if (minutes < 10)
minutes = "0" + minutes

if (daym < 10)
daym = "0" + daym;

document.write("<b>Hari :</b>" + " " + dayarray[day] + ", " + daym + " " + montharray[month] + " " + year);
document.write(",<b> Pukul :</b>" + " " + hours + "<blink>" + " : " + "</blink>" + minutes);
document.write(" WIB");
</script>

Selamat mencoba. 

Tidak ada komentar:

Posting Komentar