How to embed Tumblr on your website and customize it

Mar 3, 2010

Tumbler couldn’t make it easy to embed your blog to your website. Have in mind that what you can bring to your website is the “homepage” of your blog, the posting themselves will stay in tumblr (unless you display them entirely on it). Also you will be only able to do this is you have access to the html files in your site.

The Steps:

  1. Go to your blog and click on “dashboard”
  2. On the top menu go to “goodies”
  3. Look on the right side bar for the last block called “Embed Your Blog”
  4. Copy the script tag
  5. Now, go to your website
  6. Open the html page where you want to place the blog
  7. Insert the scrip tag, exactly where you want the posts to show.
  8. Open your page on the browser and voila! you have your blog right there

Now this was the quick part. If you want to go further and style the postings themselves you can do so. What you need to do is find out what css styles is tumblr using in the markup that displays the blog data. These are also called “hooks” and are there for you to “hang” on them the styles you want. Here’s how the mark up looks:

Mark up for a text post

<ol class="tumblr_posts">
<li class="tumblr_post tumblr_text_post">
<div class="tumblr_title">
Your Blog Title
<div class="tumblr_body">
<p>Your blog post</p>
<p class="read_more_container">
<a href="" class="read_more">
Read More
</li> ...

CSS Hooks for a text post

.tumblr_posts {	

.tumblr_post {		

.tumblr_title {	

.tumblr_body img {	

.read_more_container {
.read_more_container a {

Markup for a quote post

<li class="tumblr_post tumblr_quote_post">
<div class="tumblr_quote">
<span class="tumblr_open_quote">“</span>
Your quote
<span class="tumblr_close_quote">”</span>
<div class="tumblr_source">
Your Souce

CSS Hooks for a quote post

.tumblr_quote {	

.tumblr_quote p {		

.tumblr_source {

You can get the css and html code here. You’ll find de second one useful especially if you use dreamweaver for preview purposes. There’s this really cool tool I got on a tweet from smashing magazine. It’s called "primer" and it will do the job I did of extracting the ccs hooks from the markup, in a snap! (would have been very useful yesterday, thanks!).

Once your are done, don’t forget to upload the css and any background images you use. The above examples only cover text and quote posts, but you get the gist of it. Nice and simple.

I’m on may way to find out how to further customize my posts on tumblr, to match my website. Hope you find this helpful.

  1. foolishfools reblogged this from adrifolio
  2. foism reblogged this from adrifolio
  3. aetoricdesign reblogged this from adrifolio
blog comments powered by Disqus