Tutorials

The following Tutorials are about the extra widgets and designs I put in my blog. All the basic credits go to the original creator of my base theme.

How do I put the Energy Saving Mode on my blog page?

Step One: Copy this code:

<script language=”javascript” type=”text/javascript” src=”http://www.onlineleaf.com/savetheenvironment.js”></script>

Step Two:

Paste the code before <head> tags:

** Look at the top of your theme, if the code like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

replace it with this

<html>

If your code is still not working then, paste this code before </head> tags

<script>jQuery.noConflict();</script>

**if still not working, change the 1st code with this code and paste before <head> tags

<script language=”javascript” type=”text/javascript” src=”http://www.onlineleaf.com/savetheenvironment.js?setting1=value1&setting2=value2&setting3=value3”></script>

How do I put the falling hearts effect on my blog?

src=http://dl3.glitter-graphics.net/pub/12/12603tbcu2fkuwr.gif border=0></marquee>

<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=20 height=582 style=’position:absolute; left:81%; top:198px; width:17; height:582px;’><img src=http://dl3.glitter-graphics.net/pub/12/12603tbcu2fkuwr.gif border=0></marquee>

<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=32 height=598 style=’position:absolute; left:79%; top:44px; width:17; height:598px;’><img src=http://dl3.glitter-graphics.net/pub/12/12603tbcu2fkuwr.gif border=0></marquee>

<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=27 height=613 style=’position:absolute; left:5%; top:3px; width:17; height:613px;’><img src=http://dl3.glitter-graphics.net/pub/12/12603tbcu2fkuwr.gif border=0></marquee>

These were my customized codes for the falling hearts. But if you don’t want the design. You can always generate your own falling objects on your blog!

I recommend this websites:

ONE | TWO | THREE

Where did you get your space-designed scroll bar?

I didn’t get it somewhere, I made it :)

Here’s the codes if you want it:

::-webkit-scrollbar {

height: 12px;

width: 17px;

background: #000000;

}

::-webkit-scrollbar-thumb {

background-image:url(http://i55.tinypic.com/11hbf38.jpg

);

-webkit-border-radius: 0ex;

}

::-webkit-scrollbar-corner {

background: #transparent;

}

</style>

But if you would like to make your own scroll bar, it’s always easy! Here’s the cheat!
::-webkit-scrollbar {
height: 12px;
width: 17px;
background: #000000;
}
::-webkit-scrollbar-thumb {
background-image:url(URL CODE IMAGE HERE);
-webkit-border-radius: 0ex;
}
::-webkit-scrollbar-corner {
background: #transparent;
}
</style>
See the bold lines? They’re the only things you’re going to edit. For the size, you would have to resize it to fit in your theme. And for the URL Image you can upload your picture in tinypic and get the online codes to replace it.

For the cursors and the designs/effects:

I got my cursors at Cursors-4u and the bubble effects at Tumblr-layouts (or you can pick other effects for your blog in there, just don’t paste codes in the wrong place)

For the scroll to top design:

<noframes></noframes><noscript></noscript><!— —><script type=”text/javascript” src=”http://www.freewebs.com/p.js”></script><script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script><script type=”text/javascript” src=”scrolltopcontrol.js”>/************************************************Coded by brokenheartsucks.tumblr.com*Designed by brokenheartsucks.tumblr.com* Originally by dynamicdrive.com and modified by brokenheartsucks.tumblr.com* Removal of credits shall result to report and suspension of account***********************************************/Or

Or Visit her site for more options in scroll to top designs.

For the Autoplay Music Widget:

I got mine at Mixpod and resized its width and height to make it hidden. If you’d like to do this, always remember to resize it. Reminder though: Never Ever Remove Credits or your Tumblr will be suspended.

You can refer to this sites if you’d like to try other great music widgets for free:

Videokeman | Hypster |

Grooveshark | Bee-Mp3 |

Streampad | Musicdumper | Playlist-mp3 |

Free Online Users:

<!— Start FastOnlineUsers.com —>

<a href=”http://www.fastonlineusers.com”><script type=”text/javascript” src=”http://fastonlineusers.com/on3.php?d=www.url-link-in-here.tumblr.com”></script> Roaming</a><br><a href=”http://www.glowingcasino.com”> Zombie/s </a>

<!— End FastOnlineUsers.com —>

That’s my code but you can always change it into what you want.

Disabling the Right Click Button:

You may refer to the codes posted by the users in here.

But here are the codes:

<script language=”javascript” type=”text/javascript”>

<!–

var message=””;

function clickIE()

{if (document.all)

{(message);return false;}}

function clickNS(e) {

if

(document.layers||(document.getElementById&&!document.all))

{

if (e.which==2||e.which==3) {(message);return false;}}}

if (document.layers)

{document.captureEvents(Event.MOUSEDOWN);document. onmousedown=clickNS;}

else

{document.onmouseup=clickNS;document.oncontextmenu =clickIE;}

document.oncontextmenu=new Function(“return false”)

–>

</script>

If it did not work in your blog, it means your theme is premade so here are the codes for the premade type:

<SCRIPT language=JavaScript>
<!— http://www.spacegun.co.uk —>
var message = “User Says: Nah-Uh”;
function rtclickcheck(keyp){ if (navigator.appName == “Netscape” && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf(“MSIE”) != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</SCRIPT>

If it’s still not working, give this code a try:
<noscript></noscript><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script language=JavaScript>  </script>

What are the codes for the duck shooting thing?

Oh about that. If you want it, TA me personally ok? But don’t be anonymous so I could Tumblr Ask it to you personally. Don’t publish the codes. K? I’m selfish. LoL. Sorry. And before it all, you have to promote me first.

That’s all. Thank you.

SHAKING IMAGE THING?

Step 1: Insert the below into the <head> section of your page:

<style>

.shakeimage{

position:relative}

</style>

<script language=”JavaScript1.2”>

//configure shake degree (where larger # equals greater shake)

var rector=3

var stopit=0

var a=1

function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0}

function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1)

return

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector+”px”}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector+”px”}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector+”px”}

else{

shake.style.left=parseInt(shake.style.left)-rector+”px”}

if (a<4)

a++

else

a=1

setTimeout(“rattleimage()”,50)}

function stoprattle(which){

stopit=1

which.style.left=0

which.style.top=0}

</script>
Step two: Put it below the <img> tag of the image you wanted to put effect
class=”shakeimage” onMouseover=”init(this);rattleimage()” onMouseout=”stoprattle(this);top.focus()” onClick=”top.focus()”

Fading Image thing?

Here are the codes:img{ -webkit-transition: opacity 0.7s linear; opacity: 1; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
img:hover{ -webkit-transition: opacity 0.7s linear; opacity: 0.6; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

Ok. If you wanna ask how I did the CLICK THIS IMAGE FOR LINKS thing, Tumblr ask me. Not because I don’t want to share it here but because I’m too lazy to explain when no one would want to listen/read.

Hope i somehow helped!

Are your questions not found here?

I always answer any tutorial question, as long as I know the answer. But please don’t hesitate to Tumblr Ask me.