Tuesday, 20 December 2016

Tutorial Back To Top Jquery


Hye guys! Leva here ^.^ So today I would like to teach you back to top jquery. Example :


When you press the button, it will go up until you reach the top of the blog

1. Copy this code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- &#169; Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byLyssaFaizureen***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL TOP BUTTON" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
So the green colour, you can filled it with your fav top button URL. Beautiful and cute top button can find at HERE 
She had freebies and all

2. Go to Dashboard > Layout > Add Gadget > HTML/Javascript

3. Paste the code you copied

4. Save and check it out

If there had any problems, please comment down here

More tutorials at TUTORIAL

Monday, 19 December 2016

Tutorial Tukar Warna Highlight


Assalamualaikum semua! Harini saya akan ajar korang tutorial tukar warna highlight jadi warna warni di blog anda
Di bawah ini ada contoh :

 Cantik x?
Anda juga boleh tukar warna kegemaran anda

1. Pergi ke Dashboard > Template > Edit HTML

2. Cari kod di bawah menggunakan Ctrl F
a:link {


3. Pastu, paste kan code di bawah ini DI ATAS code yg korang cari tadi
 ::-moz-selection {
background:#000000;
color:#FFFFFF;
}

::selection {
background:#000000;
color:#FFFFFF;
}
 Korang boleh tukar nombor yg berwarna hijau dan biru ikut warna fav korang di 

Warna hijau: warna background highlight
Warna biru : warna tulisan yg di highlight 

4. Save template dan lihat hasilnya!

If there had any problems, please comment down here

More tutorials at TUTORIAL 

Sunday, 18 December 2016

Tutorial Hujan Berbentuk Hati


Assalamualaikum! Hari ni saya akan ajar tutorial hujan berbentuk hati. Lihat contoh di bawah :


Comelkan? Mari ikuti tutorial di bawah!

1. Copy code di bawah
 <marquee behavior=scroll direction=down scrollamount=3 scrolldelay=48 height=631 style='position:absolute; left:85%; top:5px; width:15; height:631px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=22 height=655 style='position:absolute; left:9%; top:171px; width:15; height:655px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=49 height=659 style='position:absolute; left:80%; top:61px; width:15; height:659px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=47 height=629 style='position:absolute; left:34%; top:61px; width:15; height:629px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=13 height=584 style='position:absolute; left:12%; top:126px; width:15; height:584px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=6 height=689 style='position:absolute; left:48%; top:171px; width:15; height:689px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=19 height=666 style='position:absolute; left:23%; top:139px; width:15; height:666px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=9 height=619 style='position:absolute; left:40%; top:90px; width:15; height:619px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=16 height=592 style='position:absolute; left:52%; top:180px; width:15; height:592px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=23 height=695 style='position:absolute; left:10%; top:1px; width:15; height:695px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=50 height=532 style='position:absolute; left:66%; top:1px; width:15; height:532px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=27 height=662 style='position:absolute; left:8%; top:7px; width:15; height:662px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=42 height=649 style='position:absolute; left:33%; top:173px; width:15; height:649px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=43 height=555 style='position:absolute; left:92%; top:197px; width:15; height:555px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=35 height=568 style='position:absolute; left:87%; top:185px; width:15; height:568px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=14 height=659 style='position:absolute; left:89%; top:46px; width:15; height:659px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=6 height=685 style='position:absolute; left:29%; top:0px; width:15; height:685px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=30 height=619 style='position:absolute; left:29%; top:108px; width:15; height:619px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=45 height=530 style='position:absolute; left:38%; top:45px; width:15; height:530px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=38 height=572 style='position:absolute; left:73%; top:129px; width:15; height:572px;'><img src=http://dl4.glitter-graphics.net/pub/111/111944aomhvemlia.gif border=0></marquee>
2. Then, pergi ke Dashboard > Layout > Add Gadgets > HTML/Javascript

3. Paste kan code tersebut

4. Save dan lihat hasilnya!

If there had any problems, please comment down here

More tutorials at TUTORIAL 

Tutorial Mini Hearts Cursor


Hi everyone! My name is Leva, Damia's cousin. Well, Damia is not in mood to do any tutorial today and I replace her. So today, I would like to teach you about mini hearts cursor tutorial. It's really easy to do it and its really cute too ^.^ Here an example of mini hearts


Well, it will look cute if it another color other than black. But you can choose any color you want. 
Lets start our tutorial

1. First, copy this code down here :

 <script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
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>
 I highlight the #FFFFFF (white color) because it mean you can change any color you want other than white. It depends on your choice. You can go to HTML Color Codes if you want to choose your fav color's code.

2. Then, go to Dashboard > Layout > Add Gadgets > HTML/Javascript

3. Paste the code that you copy just now and click save

4. Now, you can check it

If there had any problems, please comment down here

More tutorials at TUTORIAL

Tutorial Sparkling Snow Cursor


Assalamualaikum! Hari ni saya akan ajar tutorial sparkling snow cursor.
Apa benda tu?

Sparkling snow cursor tu ialah salji bersinar yg dikeluarkan oleh cursor korang setiap kali korang gerakkan cursor korang. Contohnya mcm ni :


Ok, follow tutorial kat bwh ni!

1. Copy kod di bawah

 <script type='text/javascript'>


</script>


<script type='text/javascript'>
// <![CDATA[
var colour="#a0a0a0";
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>

Yang warna turqoise tu warna sparkling snow yg korang nk.
Pilihan warna boleh dipilih di sini HTML Color Codes 

2. Bukak Dashboard > Layout > Add Gadget > HTML/Javascript

3. Paste kan code tadi dan save!

4. Lihatlah hasilnya!

If there had any problems, please comment down here

More tutorial at TUTORIAL 

Saturday, 17 December 2016

Tutorial Followers Box


Assalamualaikum!
 So, harini saye nk ajar tutorial follower box
 
Contoh follower box :
 

Function followers box ni adalah untuk mengira berapa ramai followers korang!
Tutorial dia simple je!

1. Pergi kat Dashboard > Layout > Add Gadget

2. Tekan More Gadget

 
 
3. Scroll sampai bawah sekali and akan terjumpa 'Followers'


 4. Tekan simbol '+' tu

5. Check it out!

Comment down here if there had any problems 
Thank You!

More tutorials at TUTORIAL

Tutorial Rainbow Link


Hye again guys! So harini saya ni saya nk ajar tutorial rainbow link
Macam mana tu?

Senang je. Contoh, cube tkn slh satu link di blog saya. Ia akan berwarna-warni kan? 

1. Copy code di bawah
<script src="http://fwzynn.googlepages.com/rainbow.user.js" type="text/javascript">/*********************************************** * 
Script edited by Ynn at http://fwzynn.blogspot.com/* Please keep this notice intact***********************************************/ </script>
2. Then pegi dkt Dashboard > Layout > Add Gadget >Html/Javascript
3. Paste and save!
4. Check it out

If there has any problem, please comment down here

More tutorials at TUTORIAL

Tutorial Awesome Cursor


Hello guys! So today saya nak ajar untuk buat cursor/arrow yg menarik!
Yg x tahu ape tu cursor bwh ni ade contoh gmbr cute cursor


yg kat atas tu yg normal. Baca smpai habis kalau nk tau kat mana nk dptkan cursor yg cute cute

1. Copy code di bawah ni

<style>body {cursor:url(URL CURSOR), url(URL CURSOR), auto;} </style>
<a href="LINK BLOG KORANG" target=_blank><div style="height: 50px; width: 50px; position: absolute; top: 0px; left: 0px;"> </div></a>
Yg warna perpel tu url cursor korang. Kalau x tau mane nk dptkan cursor yg cute dan awesome, boleh dptkan di sini Cursors4U 

Yg warna turqoise tu link blog korung. Example : damianasreen333.blospot.my

2. Lepastu Dashboard > Layout > Add Gadget > Html/Javascript

3. Paste code tersebut 

4. Save and Wallaa! Jadi tak?

Comment for any problems 

More tutorials at TUTORIAL