Cara Membuat Efek Gelembung Pada Cursor Blog - Kali ini ane akan Share Tutorial blog tntang
Cara Membuat Efek Gelembung Pada Cursor Blog,
dengan mengunakan Script yang ane sediakan di bawah nanti, Cursor blog
agan akan mengeluarkan gelembung - gelmebung atau bisa juga dikatakan
bubble.
Sebelum ane share caranya, Ane ingin menegaskan bahwa Efek ini hanya
salah satu cara untuk mempercantik atau menghias blog agan, dan sifatnya
tidak wajib, karena mingkin saja efek ini bisa memperberat loading blog
agan, klw ane berakata" truss kpn selesainya :D heheheh !. Ok langsung
saja
Cara Membuat Efek Gelembung Pada Cursor Blog :
ini Scriptnya
:
<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000"); // 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>
1
. Log In
blogger.com
2. Klik Tata Letak
3. Tambahkan Gadget / Add Gadget
4.Pilih Gadget/ HTML/JavaScript
5.Masukkan Script Efek Gelembung
5. Truss Jangan lupa Simpan
6. Taraaaa... Jadi deh :D dan lihat hasilnya
Keterangan :
- Kode berwarna Merah adalah kode warna gelembung, silahkan agan ganti sesuka hati agan !!
- Kode Warna aqua ( 100 ) adalah jumlah maksimal gelembung yang akan keluar, silahkan ganti angka 100, dengan angka / Jumlah yang agan sukai :).
itu dia tutorial blog tntang
Cara Membuat Efek Gelembung Pada Cursor Blog. Semoga bermanfaat. Selamat Mencoba.
Cara menampilkan gambar animasi di pojok blog.
Terkadang untuk menghias blog agar tampak lebih menarik maka bisa
memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan
kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar
lucu-lucu.
Untuk menampilkan gambar lucu, cukup copy salah satu script html di
bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat
menggunakan kode html ditambah gambar dari situs sweetim.
Contoh dan scriptnya bisa dilihat di bawah ini :
1.Gajah loncat
Script:
<div style="position: fixed; bottom: 0px; left:
20px;width:120px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com"
target="_blank">Widget-Animasi</a></center></small></div>
2. Boring
Script :
<div style="position: fixed; bottom: 0px; left:
20px;width:80px;height:120px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img
src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif"
border="0" /></a><small><center><a
href="http://blog-tutorial.blogspot.com"
target="_blank">Widget-Animasi</a></center></small></div>
3.Tuyul ketawa
Script:
<div style="position: fixed; bottom: 0px; right:
20px;width:82px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img
src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif"
border="0" /></a><small><center><a
href="http://blog-tutorial.blogspot.com"
target="_blank">Widget-Animasi</a></center></small></div>
4.Boneka joget
Script :
<div style="position: fixed; bottom: 0px; left:
20px;width:82px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img
src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif"
border="0" /></a><small><center><a
href="http://blog-tutorial.blogspot.com"
target="_blank">Widget-Animasi</a></center></small></div>
5. Panda main bola
Script :
<div style="position: fixed; bottom: 0px; right:
30px;width:160px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img
src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif"
border="0" /></a><small><center><a
href="http://blog-tutorial.blogspot.com"
target="_blank">Widget-Animasi-Blog</a></center></small></div>
6. Tuyul baring
Script :
<div style="position: fixed; bottom: 0px; left:
20px;width:120px;height:100px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com"
target="_blank">Free-Widget-Animasi</a></center></small></div>
7. Panda biru
Script
<div style="position: fixed; bottom: 0px; left:
20px;width:100px;height:100px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif"
title="Click to get more." /></a>
<small><center><a href="http://blog-tutorial.blogspot.com"
target="_blank">Free-Widget-Animasi</a></center></small></div>
8. Panah
Script:
<div style="position: fixed; bottom: 0px; left:
10px;width:210px;height:120px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
9. Bunga
Script :
<div style="position: fixed; bottom: 0px; left:
10px;width:100px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
10.Anjing laut
Script:
<div style="position: fixed; bottom: 0px; left:
10px;width:110px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
11.Lumba-lumba
Script :
<div style="position: fixed; bottom: 0px; left:
10px;width:110px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
12.Kucing tidur
Script :
<div style="position: fixed; bottom: 0px; left:
10px;width:110px;height:140px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
13.Kelinci
Script :
<div style="position: fixed; bottom: 0px; left:
10px;width:125px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
14.Dragon
Script:
<div style="position: fixed; bottom: 0px; left:
10px;width:150px;height:130px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
15.Ikan
Script :
<div style="position: fixed; bottom: 0px; left:
10px;width:100px;height:130px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif"
title="Click to get more."
/></a><small><center><a
href="blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
16.Pinguin
Script :
<div style="position: fixed; bottom: 0px; left:
10px;width:110px;height:130px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
17. Helikopter
Script :
<div style="position: fixed; bottom: 0px; left:
10px;width:110px;height:130px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif"
title="Click to get more."
/></a><small><center><a
href="http://blog-tutorial.blogspot.com" target="_blank">Widget
Animasi</a></center></small></div>
Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget
html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik
bisa copy script di atas ke widget text html.
Cara memasang widget animasi ke blog :
1. Pilih script yang tersedia
2. Di Dashboard blogger pilih Tata Letak
3. Selanjutnya pilih
Tambah Gadget
4. Kemudian pilih
HTML/Javascript
5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript
Jangan lupa klik tombol
Save dan Lihat Hasilnya
Catatan:
Untuk mengganti posisi widget dari sebelah kiri ke kanan ganti tag
left menjadi
right
Untuk mengubah posisi dari kiri ke kanan ganti tag
right menjadi
left
Contohnya bisa dilihat di bawah ini
<div style="position: fixed; bottom: 0px; left:
30px;width:160px;height:160px;"><a
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10"
target="_blank"><img
src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif"
border="0" /></a><small><center><a
href="http://blog-tutorial.blogspot.com"
target="_blank">Widget-Animasi-Blog</a></center></small></div>
Itu dia Tutorial Blog tentang
Cara memasang gambar animasi lucu di pojok blog . Selamat Mencoba !!
Adakah Kalian suka kalau Kursor yang Kalian gunakan untuk Blog ada
beberapa Bintang Kecil Berwarna yang mengikutinya.? ini juga sebagai
media untuk membuat pengunjung merasa tertarik dengan Blog kita.
Bagaimana, Kalian tertarik...??? kalau Kalian tertarik, silahkan ikuti
langkah-langkahnya.
[1]. Pertama pastinya, Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Elemen Laman
-->
Tambah Gadget -->
HTML/Javascript.
[3].
Pilih salah satu
Script di bawah.
[4]. Copy dan Paste-kan Code di bawah ke Dalam kotak HTML/Javascript.
A. Bintang Warna Warni
<script type="text/javascript" src="http://jmkjs.googlecode.com/files/Bintang%20Warna%20Warni.js"></script>
B. Bintang Warna Biru
<script type="text/javascript" src="http://jmkjs.googlecode.com/files/Bintang%20Biru.js"></script>
C. Bintang Warna Ungu
<script type="text/javascript" src="http://jmkjs.googlecode.com/files/Bintang%20Ungu.js"></script>
[5]. Terakhir, tinggal di SAVE dan lihat hasilnya.
Semoga Berhasil...!!!
Effect ketikan pada judul Blog, mungkin Kalian sudah tahukan, seperti
kalau Kalian lihat pada Blog ini, pasti pada bagian Tab Browser Kalian
ada tulisan yang bergerak. Nah kita akan membuat yang seperti itu. OK
buat yang tertarik, silahkan ikuti langkah-langkah berikut :
[1]. Seperti biasa Login ke Blog Kalian
[2]. Trus pilih Tata Letak
[3]. Klik Edit HTML
[4]. Cari Code
</body>
[5]. Paste Code di bawah ini tepat diatas Code yang tadi.
<script>
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle()", 2000)
}
else {
c++;
setTimeout("writetitle()", 275)
}
}
writetitle()
</script>
[6]. Simpan dan Lihat Perubahannya
Selamat Mencoba...!!!
Mungkin yang sudah terjun di dunia blogger tak asing lagi dengan nama
backlink, namun bagi pengguna awam atau newbie masih belum tahu banyak
apa itu istilah backlink.
Backlink merupakan link kita yang terpasang pada situs lain.
Backlink ada yang bersifat one way link dan two way link.
Yang dimaksud dengan One way link adalah link situs kita dipasang oleh
situs lain namun kita tidak memasang linknya di situs kita sedangkan two
way link adalah saya melink situs anda dan anda juga melink situs saya
atau yang sering disebut dengan link exchange.
Adapun tujuan dari backlink tak lain meminta agar page rank jatuh ke
blog kita bisa juga dengan istilah lain meningkatkan PR pada blog
ataupun situs web kita. Di sini saya akan memberikan sedikit masukan
cara nge-check backlink blog atau situs web sobat melalui tool online,
tool ini bisa di sebut dengan
Backlink Watch atau anda bisa mengunjungi ke alamat ini [
http://www.backlinkwatch.com ].
Cara menggunakan sangat mudah di fahami sob. atau anda bisa lihat screen shot yang sudah saya buat di bawah ini :
 |
| Langkah Pertama |
Setelah Memasukan URL blog kita, Check Backlinks
 |
| Langkah Kedua |
Keterangan :
1242 Merupakan total backlink dari blog Mawan 89 dan link pada OBL merupakan link dari situs yang memberikan backlink.
Flag Pelajaran Blog merupakan bagian untuk menampilkan keterangan follow
atau nofollow. Jika ada keterangan nofollow berarti situs tersebut
memberikan tag nofollow pada link kita yang artinya kita tidak
mendapatkan backlink dari situs tersebut.
Kalau agan mencari tutorial tentang cara buat link berwarna
warni. ok langsung saja di simak !!
Cara Buat Link Efek Pelangi di blog :
- Kunjungi blogger.com
- Di Menu Drop Down klik Layout ---> Add a gadget ---> HTML/JavaScript
- Lalu Copy Paste kode berikut pada kolom yang tersedia :
<script src="http://tutorialblogspot.googlecode.com/files/LinkPelangi.js" type="text/javascript"></script>
Tambahan :
Saat agan memasukkan kode tersebut, jangan kasih Title atau Judul pada kolom pertama, biarkan kosong.
Widget Feedjit adalah sebuah widget yang menampilkan dari mana
pengunjung kita datang, kapan dia datang dan menampilkan judul postingan
kita yang membuat mereka datang ke blog kita. Widget pengunjung ini
bisa digunakan secara gratis oleh siapa saja yang memiliki blog.
Ngomong-ngomong, apa keuntungan yang didapatkan perusahaan Feedjit kalau
dia meyediakan layanan gratis sepert ini? Sebenarnya Feedjit juga
menyediakan layanan berbayar, tapi tidak perlu saya jelaskan disini.
Untuk yang gratis, di bawah widget Feedjit tampil sebuah iklan kecil.
Nah... dari situlah mereka memperoleh keuntungan. Tanpa banyak
bercerita, Talk less do more, kita langsung saja belajar membuat widget
Feedjit.
- Pertama, kunjungi dulu link berikut :
http://feedjit.com/freeLiveTrafficFeed/?utm_source=ltf&utm_medium=web&utm_campaign=feedjitTopAdGetFeedjit
- Selanjutnya, isi form yang sudah disediakan.
Your first and last name : Isi dengan nama sobat blogger
What country are you in : Isi dengan nama negara kita, Indonesia
Enter your email address : Masukkan email sobat blogger
- Klik tombol Get your traffic feed,
- Pada laman yang terbuka, sobat blogger bisa melakukan kostumisasi tampilan widget Feedjit.
Select a color scheme adalah tampilan warna dari widget Feedjit, silahkan sobat blogger pilih sesuai selera.
Select widget width (pixels) adalah ukuran lebar widget
Number of visitors Feedjit shows adalah jumlah pengunjung yang akan ditampilkan
- Klik tombol Go.
- Klik tombol "Click to open a new window and install on blogger"
- Selanjutnya, sobat blogger akan di bawa pada laman sepert ini. Jangan klik Add a Gadget/Menambah widget tapi klik Edit Content.
- Lalu copy paste kode tersebut di blog sobat.
- Semua laman dari situs Feedjit bis di tutup.
- Proses pembuatan Widget feedjit sudah selesai.
- Lihat hsilnya
3. Tambahkan Gadget / Add Gadget
4.Pilih Gadget/ HTML/JavaScript
