Embed Tumblr Blog Tutorial: Embedding Your Blog
Here is how you can embed
your Tumblr Blog into your website. A recipe for success:
Ingredients:
A website
A Tumblr Blog
Basic CSS and Html
knowledge
Directions:
On your Tumblr site you
need to head for “Goodies”. At the very
bottom of this page you will see a link called “embed your blog”. This will give you a line of code that you
will need to use later. It will look
something like this.
script
type=”text/javascript” src=”http://yourtumblrname.tumblr.com/js”
It will be enclosed with
parentheses like these - < >. Copy and paste this code onto a notepad for
use later.
Pull up the website that
you wish to embed with your Tumblr Blog.
You will need to paste your code, into the div part of your HTML code,
of the webpage you want your Blog to appear in.
Preview or publish the
web page/ Html document that you just embedded your Blog into and you will see
that it doesn’t look very good. The text
will most likely be very small and the images may have moved around. This is when you need to use CSS to style it.
If your webpage already
has a CSS sheet in it, then create another and call it your Tumblr one. You should then use this to write out your
CSS with which you are going to format your Tumblr Blog. Doing this will stop your script affecting
the rest of your site. It won’t affect
the rest of your page elements unless your div or class names clash.
Now move onto your Firefox
browser (or download it), and view your webpage with your blog embedded. This is done by opening up a Firefox browser
and then going to “open file” and selecting your HTML.doc. This way, you can
view it offline. Next you: Tool Bar > Information > Display Id
& Class Details.
Your cute offline HTML
document will now have yellow tags on it, where Firefox is showing/displaying
the pages class sectors for each of your elements.
Copy/paste the elements
or class onto your CSS document (which you have just added your blog into) and
then enter your CSS values as you desire.
Here is a little CSS code
to try:
.tumblr title
{
font-family: Arial, SimHei;
font-size: 64px;
line-height: 4em;
color:#FFFFFF;
}
.tumblr_body
{
font-family: Arial, SimHei;
font-size:16px;
line-height:1.5em;
}
.tumblr_caption
{
font-family: Arial, SimHei;
font-size: 64px;
}
