Fantage Forum
Welcome to the Fantage Forum.


Fantage Cheats, Secrets, Glitches, Info & Help.
 
HomeFAQSearchMemberlistRegisterLog inUsergroups


Share | 
 

 Tumblr Tutorials

View previous topic View next topic Go down 
AuthorMessage
char
Hero Fantagian


Posts : 6313
Join date : 2012-11-12
Age : 17
Location : New Jersey

PostSubject: Tumblr Tutorials   Fri Apr 05, 2013 8:03 pm

A lot of people have been asking me recently how to upload any cursor on your tumblr and make I generate text.
Ex: (x)
Well, to make the cursor, you use this code:
Code:
<style><!--
BODY{
cursor: url('INSERT IMAGE ADRESS'), default }
}
-->
<!-- CURSOR CODE BY: ITSTHEMAE.TUMBLR.COM // CHOCCOPANDA.TUMBLR.COM -->
</style>
This works on anything, no size limit
For the text, again look at the example, you enter this code between the head tags. Ex. <head> <head>
Code:
<script language="javascript">
var text='TEXT HERE';
var delay=40; // speed of trail
var Xoff=16; // pixel count from the left of the cursor (- values go to left)
var Yoff=0; // pixel count from the top of the cursor (- values go up)
var txtw=10;  // amount of pixel space each character occupies
var beghtml='<font color="#000000"><b>';  // optional html code that effects whole text string such as font color, size, etc.
var endhtml='</b></font>'; 
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)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
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>

To make clickable links on your description,
Code:
 <a href=LINK HERE SAYAKA>NAME HERE MIKI</a>

Here are some fine cursor examples: {x}

To make an image on your description:
Code:
 <img src= IMAGE ADRESS>

Fandom Scarves:
{x}

Moving Tumblr Title:
Code:
<!--------------- TYPING/MOVING TITLE ----------------------->

<script type="text/javascript">
var rev = "fwd";
function titlebar(val)
{
var msg = "TITLE HERE";
var res = " ";
var speed = 100;
var pos = val;
msg = "TITLE HERE";
var le = msg.length;
if(rev == "fwd"){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);}
else{
rev = "bwd";
timer = window.setTimeout("titlebar("+pos+")",speed);}}
else{
if(pos > 0){
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);}
else{
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}}}
titlebar(0);
</script>

Looking for kawaii themes?

-yoshi.tumblr.com

Favicon:
It's the little icon in your address bar when you access your tumblr ;u;
Ex:
Spoiler:
 

Find the part in your HTML: <link rel="shortcut icon" href="{Favicon}" />


And replace {Favicon} COMPLETELY with the image address you want.

Code:
 <link rel="shortcut icon" href="IMG ADRESS" />

Hovering animated music player Ex: http://pearlsecrets.tumblr.com/post/45078059541/how-to-get-a-circular-music-player-thingy

find </style> and then paste this code on top:

Code:
#cornerplayer {
    z-index:999;
    width:30px;
    height:30px;
    border: 1px dashed #777;
    border-radius:30px 30px 30px 30px;
    -moz-border-radius:30px 30px 30px 30px;
    position:fixed;
    overflow:hidden;
    margin-top:-5px;
    margin-left:100px;
        -webkit-transition: opacity 0.8s linear;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
}

#icon {
    margin-left:1px;
    margin-top:9px;
        -webkit-transition: opacity 0.8s linear;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
}

#cornerplayer:hover #icon {
    margin-left:61px;
            -webkit-transition: opacity 0.8s linear;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
    }

#music {
    margin-left:-60px;
    margin-top:-20px;
            -webkit-transition: opacity 0.8s linear;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
}

#cornerplayer:hover #music {
    margin-left: -15px;
            -webkit-transition: opacity 0.8s linear;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
    }
next, put this code under <body>:

Code:
<div id=”cornerplayer”><center>
<!—ICON URL GOES IN THE “IMG SRC “___”—>
<div id=”icon”><img src=”http://i45.tinypic.com/pod9e.gif”/></div>
<div id=”music”>
<!—MUSIC PLAYER CODE GOES HERE—>
</div><div></center>

Music player generator : {x}
I hope this helped.


Last edited by Miki on Sat Apr 06, 2013 8:08 am; edited 2 times in total
Back to top Go down
View user profile
Guest
Guest



PostSubject: Re: Tumblr Tutorials   Fri Apr 05, 2013 9:14 pm

Thank you! This is a helpful and nice tutorial!
Back to top Go down
char
Hero Fantagian


Posts : 6313
Join date : 2012-11-12
Age : 17
Location : New Jersey

PostSubject: Re: Tumblr Tutorials   Fri Apr 05, 2013 9:22 pm

Hehe thanks! I updated with Favicon info.
Back to top Go down
View user profile
o
Veteran Fantagian


Posts : 4269
Join date : 2011-11-11
Age : 15
Location : California

PostSubject: Re: Tumblr Tutorials   Sat Apr 06, 2013 12:29 am

this helps so much thank you! i've been meaning to put a custom cursor on my tumble for a while now, so this is great!
Back to top Go down
View user profile
char
Hero Fantagian


Posts : 6313
Join date : 2012-11-12
Age : 17
Location : New Jersey

PostSubject: Re: Tumblr Tutorials   Sat Apr 06, 2013 8:05 am

Updated with music player info.
Back to top Go down
View user profile
taehyung
Veteran Fantagian


Posts : 3089
Join date : 2011-07-15
Age : 16
Location : somewhere

PostSubject: Re: Tumblr Tutorials   Wed Apr 10, 2013 3:38 am

I know an easier way
Go to http://www.cursors-4u.com/sets/
Choose a cursor
Then scroll and you will see 'Tumblr' click it and it will show you how.

Open Tumblr.
Go to your page
Click customize
Scroll down
Click Advanced options
Scroll down and you willl see CSS
Type inside the box the code in the box in the website.

I found that easier ^^^

Back to top Go down
View user profile
char
Hero Fantagian


Posts : 6313
Join date : 2012-11-12
Age : 17
Location : New Jersey

PostSubject: Re: Tumblr Tutorials   Wed Apr 10, 2013 4:32 pm

Yes, but the Cursor 4 u cursors aren't very kawaii, or high quality. Also, my method allows you to use the cursor all over your blog instead of one area. Also, this lets you use anything for a cursor without size proportions.
Back to top Go down
View user profile
Sponsored content




PostSubject: Re: Tumblr Tutorials   Today at 5:15 am

Back to top Go down
 
Tumblr Tutorials
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» Mig 21 tutorials
» New painting tutorial series over at BoLS
» Power Sword Tutorial (with more to follow)
» Survivor: Redemption Island Signature Contest!
» Who's the Best on YouTube?

Permissions in this forum:You cannot reply to topics in this forum
Fantage Forum :: Off-Topic :: Entertainment-
Jump to: