Fans Family 48

February 27, 2012

membuat link bergoyang

Monday, February 27, 2012 tutorial blogs No comments

Maksudnya apa sih, link kok bergoyang? kayak dangdutan saja :D Maksudnya begini lo, link yang disetuh oleh cursor akan bergerak ke kanan, dan kalau dijauhkan akan kembali ke tempat semula. Sudah mengerti? Jadi hampir samamarquee, bedanya link akan bergerak hanya jika disentuh.

Dengan membuat link bergoyang ini, selain untuk membedakan kalau teks itu ada linknya, tentunya juga untuk membuat lebih menarik. Dulu ada cara membuat link menjadi pelangi, bahkan juga ada membuat link berkedip-kedip. Sekarang kita akan belajar membuat link yang bergoyang ;)

Cara Membuat Link Bergerak (Bergoyang)
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh kode berikut 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>

6. Simpan Template jika sudah selesai.

Bersiaplah untuk melihat link yang ada di blog kita akan bergoyang jika disentuh, ayo digoyang lagi :D

Cara Membuat Judul Blog Bergerak

Monday, February 27, 2012 tutorial blogs No comments

kali ini saya akan membahas tentang Cara Membuat Judul Blog Bergerak.Knapa judul blognya bergerak ? tujuanya mungkin supaya Blog jadi terlihat dinamis.Judul blog kita jadinya akan terlihat berjalan pada title bar browser.S
Buat kamu yang ingin membuat Judul Blog Bergerak silakan ikuti tutorial Cara Membuat Judul Blog Bergerak Berikut ini.

1.LOGIN ke blogger.

2.Kemudian klik Tata Letak Kemudian Klik Lagi Edit HTML.

3.Selanjutnya cari kode berikut ini.

<title><data:blog.pageTitle/></title>

4.Hapus Kode Tersebut dan ganti dengan Kode berikut ini>

<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

5.Kamu bisa mengganti angka 100 yang berwarna biru tersebut dengan keinginan kamu.Angka tersebut adalah kecepatan pergerakan judul blog kamu.
6.Kalo udah selesai silakan klik SAVE TEMPLATE

cara membuat cursor diikuti text

Sunday, February 26, 2012 No comments

Assalamu'alaikum! Halo sob, ketemu lagi di blog saya ^^ Kali ini saya ingin mencoba berbagi tentang trik membuat cursor diikuti text. Sebenarnya postingan ini hasil referensi dari blog orang lain, tapi tidak apa, nanti akan saya beri sumbernya di bawah.

Setelah saya membaca artikelnya, ternyata banyak pengunjung yang berkomentar bahwa triknya tidak work (tidak berhasil). Setelah diselidiki, ternyata ada beberapa bagian template yang tidak mendukung trik ini. Alhasil, yang seharusnya teks berputar di cursor, malah menjauh dari cursor. Jadi, bagi yang telah mencoba trik ini tapi tidak berhasil, sabar saja ya sob ^^ Oke langsung ke TKP aja yuk ..

1. Blogger > Rancangan/Tata letak

2. Tambah Gadget > Pilih HTML/JavaScript

3. Copy kode di bawah ini !!!

var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

4. Paste kode di atas pada kolom HTML/JavaScript

Simpan !

Sebelum menutup tab ini, saya ingin memberi sedikit keterangan. Kalimat yang berwarna merah adalah text yang berputar pada cursor. Dan angka yang berwarna biru adalah kecepatan text memutari cursor. Dan yang terakhir, kode yang berwarna oranye adalah kode warna text yang memutari cursor. Sekian dari saya sob, Wassalam!

Cara Membuat Variasi Kursor Mouse | Animasi, Kartun, Simbol, Smiley, dll

Thursday, February 23, 2012 No comments

Cara Membuat Variasi Kursor Mouse | Animasi, Kartun, Simbol, Smiley, dll
– Pernah melihat blog yang kursor mouse-nya gambar animasi atau simbol tertentu? Cara membuatnya gampang.

1. Buka http://www.cursors-4u.com
2. Pilih kategori (di sebelah kiri), misalnya ‘Comics’.
3. Muncul beberapa pilihan gambar, klik salah satu.
4. Muncul kode HTML. Copy atau tekan Ctrl C
5. Login ke blog
6. Klik ‘Design’, ‘Edit HTML’, centang ‘Expand Widget Templates’
7. Pastekan kode HTML tadi (no.4) di atas kode <body>
8. Simpan dan lihat hasilnya.

membuat cursor ber tabur bintang

Thursday, February 23, 2012 No comments

Tips Cara Membuat Cursor Bertabur Bintang Pada Blog - masih seputar tips dan trick mempercantik blog. banyak cara yang dilakukan seorang blog untuk menghias blognya sedemikian rupa guna menghasilkan suatu blog yang enak dipandang.

Untuk tips Membuat Bintang Pada Cursor kali ini pun cukup mudah.

1. Login ke blogger.
2.Masuk ke Layout–>Page Element
3.Tambahkan gadget HTML/JavaScript
4.Pilih kode Cursor Bertabur Bintang dibawah ini.

Bintang Hijau

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

Bintang Ungu

<script src=’http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js’ type=”text/javascript”></script>

Bintang Merah

<script src=’http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js’ type=”text/javascript”></script>

Bintang Biru

<script src=’http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js’ type=”text/javascript”></script>

Bintang Putih

<script src=’http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js’ type=”text/javascript”></script>

5. Pilih salah satu kode script diatas lalu simpan di widget.

Cukup mudah bukan cara Membuat Cursor Bertabur Bintang. selamat mencoba..:)

Ageboy Blog: http://ageboy.blogspot.com/2012/02/membuat-cursor-bertabur-bintang.html#ixzz1nD4NVDK2

cara membuat efek double pada cursor di blog

Thursday, February 23, 2012 No comments

Cara Membuat Efek Bubble Pada Cursor di Blog

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Cara Membuat Efek Bubble Pada Cursor di Blog, Yups... seperti postingan saya tentang cara membuat efek bintang berjatuhan dari kursor, Tapi kali ini tentang Efek Bubble atau bisa disebut dengan gelembung. Tips ini ane dapet dari blog kang fatur Lalu ane ulas lagi disini..

Ok deh buat sobat" yang dah kepengen ma ini tips, Langsung aja ke TKP. hehehehe
1.Login ke Blogger
2.Rancangan --> Elemen Laman --> klik Tambah Gadget --> HTML/Javascript
3.Lalu Copy dan Paste Kode Bubble Kursor Efek di bawah ini di kotak HTML/Javascript

<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);
}

cara membuat tulisan mengikuti kursor

Thursday, February 23, 2012 No comments

Membuat kursor dengan animasi pada blog dapat dilakukan Java Script dengan mudah, maka dari itu pada blogger silahkan ikutilah langkah membuat kursor animasi dibawah ini.

Login ke Dasboard blogger kamu --> Layout --> Elemen Halaman
Tambah Gadget dan pilih "HTML/Java Script"
Copy kode dibawah ini dan simpan

<script language="javascript">

// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='MASUKKAN TEKS MU DISINI...';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml=''; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '' : '

';

t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

Rubah tulisan "MASUKKAN TEKS MU DISINI..." dengan apa yang kamu suka

SELAMAT MENCOBA!!

February 27, 2012

membuat link bergoyang

Cara Membuat Judul Blog Bergerak

February 26, 2012

cara membuat cursor diikuti text

February 23, 2012

Cara Membuat Variasi Kursor Mouse | Animasi, Kartun, Simbol, Smiley, dll

membuat cursor ber tabur bintang

cara membuat efek double pada cursor di blog

Cara Membuat Efek Bubble Pada Cursor di Blog

cara membuat tulisan mengikuti kursor

Follow This

Labels

Blog Archive

February 27, 2012

February 26, 2012

February 23, 2012

Social Profiles

Follow This

Labels

Blog Archive