Home

Tag // tutorial

Embed Tumblr posts in your sidebar!

In the last two weeks I’ve fallen in love with Tumblr. Mostly because it’s SO darn easy to post a photo, link or quote with the bookmarklet. If you look over in the left sidebar of LittleBirdLLC.com/blog there is a stream being pulled in from our Little Bird tumblr. The web is full of amazing things that we see everyday – this is an easy way to collect them as a resource and share them with you.

First, paste the following into a text widget or your sidebar.php file. Replace ‘yourname’ with your tumblr account name.

<script type="text/javascript" src="http://yourname.tumblr.com/js?num=5"></script>

The /js$num=5 is limiting the amount of posts to 5, this can be whatever number you want.

If you look at it now it’s probably a mess. Every element has tumblr css classes wrapped around it so next you’ll want to style it. At the very least you’ll need to change the width so it fits. I recommend using Firebug, the Mozilla Firefox extension, for finding and styling your posts.

/* Tumblr Styles */

ol.tumblr_posts {width: 183px;}
li.tumblr_post {}

li.tumblr_quote_post {}
  .tumblr_quote {}
  .tumblr_source {}
  .tumblr_open_quote {}
  .tumblr_close_quote {}

li.tumblr_link_post {}
  a.tumblr_link {}
  .tumblr_description {}

li.tumblr_photo_post {}
  img.tumblr_photo {}
  .tumblr_caption {}

/* and that's just a few! */

Tumblr makes it incredibly easy to import RSS feeds so all you have to do is import all of your various feeds to tumblr and Ta-da! Instant life-stream.

Comments Off on Embed Tumblr posts in your sidebar!

Aw, we like you too!

© 2017 Little Bird LLC » Email