Designed by Sofi

How to embed your Tumblr into your own website

I’ve spent ages looking for a simple tutorial on how to do this and for some reason there isn’t one…

Well, I figured how to do it so I want to share…

You’ll need:

• Your Tumblr
• Your Website
• Very Basic knowledge of HTML and CSS (which you should have if you’ve got your own website)

Firstly head to ‘Goodies’ in Tumblr, near the bottom it says ‘embed your blog’ and gives you a line to call your blog should be something like: 

script type=”text/javascript” src=”http://yourtumblrname.tumblr.com/js” enclosed with <>

Copy and paste this into the div you want your HTML blog to show up in. Now if you view your website page that you’ve just embedded your blog into it will be there but, it doesn’t look very nice, the text is tiny, the images are all over the place, so you need to style it using CSS.

If you’ve already got a CSS sheet attached to the document I’d create and attach a new one called tumblr or whatever relevant name, this is where you will write your CSS to style your tumblr blog, this will not effect the other elements of your site (as long as your class or div names do not clash).

Next, go and download the firefox add on called Web Developer. It’s amazing. Now view your webpage that you’ve embedded your tumblr in firefox with this plug in and go to the tool bar > information > Display Id and class details.

[If you don’t know how to view your page in firefox just go to firefox > open file > pick your html doc (the one with the blog embedded)]

It will now have yellow tags all over your document in firefox displaying the class selectors of each element!!! So just copy and paste each class or element name into your CSS document (which is attached to your blog page of your website) and enter in the CSS values as normal.

Hope people find this useful

Here are a few image examples, this shows an example of your CSS styling for your site

and this shows the firefox add on in action