Home











Embed Tumblr Blog Tutorial: Embedding Your Blog
A tutorial on how to embed your Tumblr blog.

Embed Tumblr Blog Tutorial




search engine marketing services

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;

}

Add Brandon to Your Circles on Google Plus

Go here for more social media articles and infographics.

Internet Marketing Company in Houston Texas
   
 
Copyright © ByReputation.com is an internet marketing services company located at 4501 Magnolia Cove Drive Suite #201, Houston, Texas 77345
Built with Volusion | Privacy Policy Terms & Conditions