Category Archives: Tumblr Tutorials

Add a Lightbox 2 Slideshow to Your Tumblr Posts

Here’s how to add a really cool lightbox slideshow to your tumblr. The end result will be that when a user clicks an image on your blog, a stylish slideshow will pop up allowing the user to navigate through all the photos on your page. This is a great effect for photo blogs. Try it out on my tumblr to see the effect.

Here’s how to do it:

1. Download lightbox files & unzip

Get lightbox here: http://lokeshdhakar.com/projects/lightbox2/#download

2. Upload the image files

Tumblr allows you to upload static files to your theme. There is a 15mb limit per day, so be careful to do it right the first time! For this step you will only upload the IMAGE files from the lightbox package. You’ll need to edit some of the other files before you upload them.

  • Upload files here: http://www.tumblr.com/themes/upload_static_file
    You only need to upload these images:
    close.gif, closelabel.gif, nextlabel.gif, prevlabel.gif
  • Copy URLS into notepad as you add them (they should look something like this):
    http://static.tumblr.com/ubwkmto/Nvrweyu/loading.gif
    http://static.tumblr.com/ubwkmto/LXZwerwf5b/close.gif
    http://static.tumblr.com/ubwkmto/5nfasf00f5t/closelabel.gif
    http://static.tumblr.com/ubwkmto/xxawerwef6r/nextlabel.gif
    http://static.tumblr.com/ubwkmto/iN5werw73/prevlabel.gif

3. Edit lightbox.js

find the closelabel.gif, close.gif, and loading.gif referenced in the lightbox.js file and replace them with the absolute image paths from tumblr:

change this (lines 48 – 50):

LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

to this (using the URLs you copied from tumblr):

LightboxOptions = Object.extend({
fileLoadingImage: 'http://static.tumblr.com/ubwkmto/N5651/loading.gif',
fileBottomNavCloseImage: 'http://static.tumblr.com/ubwkmto/5sdf159/closelabel.gif',

also change this (on line 122):

<img src="images/close.gif" alt="" />

to something like this (use the URL you copied from tumblr):

<img src="http://static.tumblr.com/ubwkmto/LSDFasdfas651/close.gif" alt="" />

Now you can save and close

4. Edit lightbox.css

change this (line 16 & 17):

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

to this (using the URLS you copied from tumblr)

#prevLink:hover, #prevLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/iN55354f73/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://static.tumblr.com/ubwkmto/xx2353456r/nextlabel.gif) right 15% no-repeat; }

Now you can save and close

Note:
DON’T USE THE EXACT VALUES I PASTED ABOVE! They won’t work. I just made dummy URLs. Make sure to do the upload step (step two) and replace the relative paths (../images/whatever.gif) with the absolute paths tumblr gave you when you uploaded your files (http://static.tumblr.com/somegarbled/nonsense/yourimage.gif).

If you need more info about paths, go here: absolute vs relative paths

5. Upload the css and js files

Upload them here: http://www.tumblr.com/themes/upload_static_file
(you will need to upload lightbox.css, lightbox.js, prototype.js, builder.js, effects.js and scriptaculous.js)

Copy the URLs into notepad as you upload them:
http://static.tumblr.com/ubwkmto/fBxm00gtt/lightbox.css
http://static.tumblr.com/ubwkmto/6y3m00gua/lightbox.js
http://static.tumblr.com/ubwkmto/nsLm00fbl/prototype.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/builder.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/effects.js
http://static.tumblr.com/ubwkmto/Ag0m00fcp/scriptaculous.js

6. Reference the js and css files in your theme header:

In your Tumblr dash, go to Customize Theme > Edit HTML
Just before the </head> add these:

(these need to be in this order, make sure to replace the URLs with the ones you got from tumblr)

<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/nsLmasdfbl/prototype.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/Ag0asfdfcp/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/RUasdf2/effects.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/5adf0f7r/builder.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ubwkmto/6asfgua/lightbox.js"></script>

7. Activate the script in your theme images

Go to Customize Theme > Edit HTML
Just after the {block:Photo}, find the {LinkOpenTag} and change it to this:

<a href="{PhotoURL-HighRes}" rel="lightbox[image]" title="{PhotoAlt}">

Note:
the title=”{PhotoAlt}” part is optional
the title will give a caption to your lightbox images when viewed

If you did this correctly, now when someone clicks an image that has been posted as a photo-type post, it will bring up a cool slide show of all the images currently loaded on the page. This is a great feature for any photo blog!

See an example on my tumblr

Comment on this post or contact me on tumblr if you have any questions about this! Good luck!

Shoutout: I was having some trouble with this at first, but a little trick I got from Greg Riley’s Blog helped me figure this out. If this helps you out, show Greg a little appreciation by following his tumblr. Thanks Greg! 

 

Give your Tumblr Posts their own Class or ID for unique style

Here’s a really neat trick I just learned with Tumblr. In a recent comment someone asked me how to remove a pinterest button from single posts, and have them only display with each post in her main index feed.

The easiest way to do it is to add a class that only appears on single posts, its actually pretty simple and really makes me love tumblr for having this kind of flexiblity. Here’s how:

  1. In the Edit HTML view of your Tumblr (in customize appearance), find this tag: {block:Posts} and paste this code immediately AFTER it:
    {block:PermalinkPage}<div class="single-post"> {/block:PermalinkPage}

  2. Find this tag: {/block:Posts} and paste this code immediately BEFORE it:
    {block:PermalinkPage}</div> {/block:PermalinkPage}

So what you’ve just done is added a containing div that only appears around content on a single page/post. This gives you a lot of flexibility in what you can do with the CSS, so if you want to remove your pinterest button from single posts, just add this to your custom CSS:

.single-post .pinterest {display: none;}

(this is assuming your pinterest button has a containing element with class=”pinterest”)

With a little CSS knowledge you could really use this information to completely redesign single pages and have them look entirely different from your index page if you want. Imagine the power!

Feel free to contact me on tumblr or comment below if you have questions about how to do this!

 

How to Add a Facebook Like Button to your Tumblr Posts

Here’s how to add a facebook like/send button to your tumblr in three simple steps. This will create a unique “like” button for every post on your tumblr. It’s really cool to do this because you’ll be able to share your own posts on your facebook wall really easily.

  1. Log in to tumblr, go to Customize Appearance > Edit HTML
  2. Paste this code immediately before the </head> tag:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=271140516272162";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  3. Paste this code just before the end of the post content. This is not the same for all themes, but usually it is between the tags {/block:PostNotes} and {/block:Posts}. Just try pasting it in different places within the code and hitting “update preview” until it looks right.
    <div class="facebook-button"><div class="fb-like" data-href="{Permalink}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div></div>

Make sure to click “update preview” before saving to make sure you don’t break your theme. If you did something wrong or this doesn’t work with your theme you should just refresh the page or close your browser so you don’t save the changes (otherwise you’ll have to install a new theme/reinstall your theme).


Good luck!

Add a Pinterest “Pin It” Button to Your Tumblr Posts

Disclaimer: I don’t really recommend this anymore. I haven’t had the time to try and make this work better, but it’s kind of buggy and won’t work all the time. I say go ahead and try to follow the steps below. It will probably work but like I said, kind of buggy. If you have a found a better way to do it or realize errors in my approach, please feel free to comment or talk to me on tumblr.

pin it

Before reading: there are a couple problems with this Pinterest and Tumblr integration. It only works on image post types (as opposed to link, quote, video, etc.) on tumbrl. The Pinterest button will show on every post you make, but it will only work if there is a single image associated with the post in order for the {PostURL-500} shortcode to work.

Nonetheless, here is a way to make it work:

  1. Get the “Pin-it” button code from Pinterest. It’s pretty far down the page.
    • For the first URL field just enter your website URL, like http://yoursite.tumblr.com
    • For the second URL field just enter something like xxxx (we’ll replace this in a minute)
    • Leave the description blank
    • Set to advanced mode
    • Copy the code
  2. Find where to paste the code from your dashboard
    • From your tumblr dashboard go to: Preferences > Customize Your Blog > Edit HTML
    • Paste the <script> portion of the code wherever you keep your scripts
    • Paste the rest of the code code just before this line:

      </div><div class=”META” …

    • You may need to try placing this in other areas depending on your theme
  3. Replace the media URL (xxxx) with the tumblr shortcode
    • Make it look like this:

      …&media={PhotoURL-500}” count-layout=”horizontal”>Pin It</a>

    • {PhotoURL-500} is the key part you’ll need to make this work dynamically for every different image.
  4. Use CSS to place your link correctly.
    • Unfortunately this post is not a lesson in CSS, but you’ll need to use CSS to move the link where you want it to be.

Some notes:
This method will make a “Pin It” button on every post you make on your tumblr. Unfortunately, if someone tries to pin a post that is not an image type, Pinterest will not grab an image. If someone knows a fix for this please comment below.

Check it out at my tumblr!