I really enjoy tumblr. I know, it has a bad-rap as a juvenile system full of first-world problems. I, however, think it’s a great platform to quickly and easily share content.
It would be even better, however, if I could get something out of the people viewing my content on this platform. That’s why I wrote an easy-to-add call-to-action to the bottom of my Tumblr. Here’s how you can do the same.
First of all, you need to view the public URL of your Tumblr. Usually that is your Tumblr username (dot) tumblr (dot) com. For instance, my SEO tumblr is http://dizzyseo.tumblr.com/ If you’re signed-in to Tumblr, you’ll see a box at the top of the page, inviting you to edit your theme. Click that button to get started.
Next you need to edit the HTML of your Tumblr theme. Don’t be scared, it’s pretty easy. Click on the link that says “Edit HTML” near the top of the left-column.
Third, scroll to the bottom of the HTML. Really, you can place this anywhere in your HTML code (we’re actually telling Tumblr how to display your CTA in a different step) but to keep this simple find the closing body tag. It will look like </body>
Right before this code, type the following.
<div id="hovering">This is the text you want with your Call-to-Action</div>
Of course, change your text to whatever you want. You can even include a link to a page on your Tumblr blog (such as a “Ask” page or a “Submit” page, for example). Click “Update Preview” to see this text on your Tumblr page but please note, we’re going to format the way this looks, later. Click “Save” and then the arrow (at the upper-left) before moving on to the next step.
Fourth (and you should now be back to the “Edit Theme” page, above) scroll to the bottom and click “Advanced options” at the bottom. Don’t be intimidated, this isn’t going to be that hard.
At the bottom of your options, you can “Add Custom CSS”. Just add the following to this code:
#hovering {
text-align: center;
background-color: #333;
color: #fff;
position: fixed;
bottom: 0;
width: 100%;
padding: 5px 10px;
z-index: 1000;
}
Of course, change the background-color and text “color” to whatever you want- here I’ve used a nice, dark gray. Once you’re done, it will look like this (the blue slider-boxes are my preferences, and don’t matter as far as this CTA renders):
Click “Save” and then “Exit” and your CTA is now live!
You’ll notice that this CTA stays at the bottom of the screen, as you scroll- hence the “hovering” effect, I promised. Thanks to the CSS lines designating the position as “fixed” and the bottom as 0, this CTA will appear on all pages of your Tumblr blog.
Downside: This Will Not Be Visible to All Tumblr Users
There is one down-side to this CTA: your visitors will only see this if they view your Tumblr blog (or your Tumblr blog’s posts) from a browser. If they’re logged-in to Tumblr or using the App, they won’t see your call-to-action. That means this is only good when you don’t expect your visitors to be Tumblr users. What good is this, then? If you’re using your Tumblr blog as landing pages (from search or social media, for instance) and don’t care about using the Tumblr platform, this will still be productive.
SEO Tip: Beware of the Site-Wide Link
Since I make a couple claims about SEO in this website, let me give you a little tip when using this CTA. If you add a link within your tip you are creating a site-wide link (because it appears on every page of your Tumblr blog). This is no problem if you are linking to a page on your own blog (an “Ask me a question” page, for instance) but if you’re using this to create a link to another website, you might be creating a bad link, from a Google perspective. I’m sure you know how much Google has been cracking-down on spammy links, over the last couple of years. One of the links that has fallen-out of favor is the site-wide link. Therefore, if you’re linking to another of your websites from this link (for instance, a contact page on your main company website) I’d add a nofollow attribute to this link.
Were my directions clear? Did I miss a step? What call-to-action do you want to add to your Tumblr blog? Leave your questions and ideas in the comments, below.