Tumblr HTML Codes

shutterstock_180584510Hey, nobody wants a lame looking Tumblr page, so this article will give you some Tumblr HTML codes to use to make your page look great. You can do things like add effects to the text on the page, change the font and add scrolls by adding a little HTML code. If you want to learn more about learning HTML, then you can take a very inexpensive online HTML class.

HTML Codes for Tumblr

Any of these codes can be inserted where you are allowed to put custom HTML codes in Tumblr. Just replace the words Your Text Message with your own words. Enter the code and you will be done!

HTML Codes to Dress up Your Tumblr Text

Make your text bold: <b>Your Text Message</b>
Italicize your text: <i>Your Text Message</i>
For the times you want your text to appear that it has a line through it, like you changed your mind about saying it use this code: <s>Your Text Message</s>
Underline your text to emphasize it: <u>Your Text Message</u>
Make your text blink off and on: <blink>Your Text Message</blink>
Subscript text, like you would use for a footnote: <sub>Your Text Message</sub>

How to Format Text on Tumblr

The following are HTML codes to format your text on your Tumblr page to make it just how you want it.

To align your text to the left side of the page or table cell: <div align=left> Your Text Message</div>
To align your text to the right side of the page or table cell: <div align=right> Your Text Message</div>
Put your text in the middle of the page: <center>Your Text Message</center>

HTML Code to Change the Font on Tumblr

<font face="Font Name Goes Here” size="Font Size Here" color="The Hex code for the color goes here">Your Text Message</font>

An example of how this would look when you are done is <ARIAL BOLD” size=”E.G.1″ color=”FFFFFF”>Mary had a little lamb.</font>

HTML Code to Make a Button on Tumblr

<form method="get" action="http://www.udemy.com" target="_blank"><input type="submit" value="SUBMIT"></form>

The url that is written there is where the button should take the person that clicks on it. So, you would put your own url in there. You can also change the value to be whatever word you would like to see on your button.

HTML Code to Make a Scroll Box on Tumblr

<div style="height:100px; width:100px; overflow:auto;">Your Text Message</div>

This code gives you a scroll box that will be 100px by 100px in size. You can change 100 and put in whatever size you would like the sides to be. Of course, enter your own text where it has Your Text Message and those will be the words that scroll in the box.

If you’d like a scroll across the page that is called a Marquee, here is the HTML Code for that: <marquee direction=”right” scrollamount=”1″>Your Text Message</marquee>

You can change the speed of the scroll by change that number 1 to a different number. You can have it scroll to the left by replacing the word right with the word left.

HTML Code to Make a Table on Tumblr

Here is a basic table for your Tumblr page. You can change the border to be any size you want by changing that number 1 to a different number. You can change it to zero if you don’t want a border. You can also put the url of a photo in the where it says Your Text Message.

<table border="1">
<tr>
<td>Your Text Message</td>
<td> Your Text Message</td>
</tr>
<tr>
<td>Your Text Message</td>
<td>Your Text Message</td>
</tr>
</table>

You can add more cells by adding more of this line: <td>Your Text Message</td>

You can add more columns by adding more of this line before the code </table>:

<tr>
</tr>

HTML Code for a Link

If you would like to write a link to use on your Tumblr page, use this: <a href=”http://www.udemy.com”>Your Text Message</a>

Change this: http://www.udemy.com to the url that is where ever you want the person to go. And of course, the Your Text Message needs to be changed to the words that you want to be highlighted and clicked.

HTML Code for Inserting an Image to Tumblr

<img src="https://www.udemy.com/yourimage.jpg" width="100" height="300 alt="Your Text Message">

You need to enter the exact url that pulls up your image on the Internet. Enter that url instead of using: https://www.udemy.com/yourimage.jpg. And of course, change the Your Text Message to whatever title you want to have on that image when it displays on your Tumblr page. You will need to change the width and the height numbers to the exact size you want the image to be.

If you do not want to add an image title or don’t want to have to enter the size of the photo, use this HTML code instead:

<img src="https://www.udemy.com/yourimage.jpg">

Of course, you use the url of your actual image, not the sample shown.

How to Change the Size of the Font on Tumblr

Here is the HTML code you need to change the size of the font on your page:

<font style="font-size:20px!important;">Your Text Message</font>

You can change that 20 number to any size number that you want it to be.

Code for a Pop up Message on Tumblr

If you would like a message to pop up to welcome guests to your Tumblr page or to ask them to do something like join your mailing list, you can use this code:

<script type="text/javascript">
window.onload= loaded;
function loaded()
{
alert('Your Text Message’);
}
</script>

Write whatever message you want the pop up to display where it says Your Text Message.

To use the code, put your text message in the code and then add it to the HTML customization section of your Tumblr page.

Mouse Sparkle Trails Code for Tumblr

Would you like a trail of sparkles to happen every time someone moves their mouse on your Tumblr page?  Then go to the customization section and paste the following javascript code before the </head> tag on your Tumblr page. Be sure you find </head> and not <head>. They are two different things.

You can change the color of the sparkles by entering a different color code where it has “var colour=”. #00baff is a teal green color. To choose your own special color, you can use this color code generator.

<script type="text/javascript">
// <![CDATA[
var colour="#00baff";
var sparkles=120;
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="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()*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>

Dressing Up Your Tumblr

You can use just about any HTML code on Tumblr to make changes and get away from the standard choices that are available as themes. Or maybe you need just some quick HTML modifications to use your Tumblr account for business. By learning some HTML, you can make all the changes you want to make to have your Tumblr looking exactly the way you want it to look. By taking an intense class for HTML online, it is the easiest and least expensive way to learn new HTML tricks that you can use on Tumblr.