Jun 14, 2014

How to Create a Grab Button & Other Blog Tweaks (for Blogger)

Grab buttons, related posts, and custom navigation | Business, Life & Design


So if you're not new to blogging and you've already optimized everything, you probably don't need to read this.  Through much struggle, I just figured out how to add a grab button, custom navigation, and "similar posts" to the bottom of each post.  If you don't know what any of those things are, then this is the place for you!

When I did it, it involved a lot of googling and wrangling and was all-around more painful than it needed to be.  So hopefully I can simplify things for other novice bloggers.  I'll start with the grab button.

How to Add a Grab Button

(and what is that?)

Grab buttons are those things on the side of everyone's blogs.  Sometimes sponsored, sometimes just "let's be friends!"

Exhibit A (from Insert Classy Here by Steph G.)
Grab button example from Insert Classy Here

After lots of trial and error, and struggling with html, I finally found this guy's Grab Button Code Generator.

Grab My Button Code Generator Link

This makes it super simple.  Just fill out the information in the form on the website.

Grab Button Generator Layout Example

Then copy the code it generates and paste it into a blank "html/javascript widget" in your layout screen.

Blogger layout for adding custom html

And viola!  Much happiness.

Grab button example | Business, Life & Design


How to Add Links to Similar Posts


Adding similar posts is a little more complicated (you have to delve into the Blogger layout html), but this tutorial from Helplogger was great!

The only thing I'd like to note is that the image it grabs is random (or maybe just the first in the post).  It's not necessarily the one that will fit the best, and tall or wide shapes will get squished to fit.  If not all your posts have images (mine certainly don't, especially pre-2014) then it will display whatever is in there (like your signature) or a generic image icon if there isn't even a signature.

Related posts example layout | Business, Life & Design

I couldn't find an example with the generic image icon now that I've added images to more posts, so I'm hypothesizing that it makes an effort to use posts with images for the links.  But... I have no idea how that would even get coded, so I'm going to worry about it too much.  If you're consistent with having imagery, then you'll have no problems and this will work beautifully!

How to Add a Custom Navigation


This requires knowledge of HTML and CSS.  Feel free to skip this one, if that's not in your knowledge base.  I'm sure there's other ways, but after struggling with several tutorials, I found it easiest to just use the HTML/JavaScript widget and write out my own links, referencing my own images.

I wanted a horizontal nav that didn't have the ugly tabs that the Blogger layout defaults to.  So I added the HTML/JavaScript widget to the top (there's only one spot for a widget above the post/sidebar areas).  Leaving the title blank (this widget is one of the few that allows that option), I filled in my HTML and CSS.

The CSS actually stumped me for quite a while.  Finally I realized you can format it just like a style sheet from any regular website design, as long as you put it between the <style></style> tags.  You don't need the head or body tags.

Blogger layout example custom HTML for navigation

So after setting up my divs, and referencing images that I'd uploaded to my regular website, I had buttons across the top!  And I did pretty much the same thing for my social media icons and the about blurb on the right.

Custom navigation example | Business, Life & Design

What's your favorite blog trick or tutorial?

2 comments:

  1. I've been blogging for over four years, and I still remember spending HOURS Googling "how to make a blog button." Where were you 4 years ago?! ;) Seriously, all this stuff isn't that hard once you know how to do it, but figuring it out takes so much work. These are great tutorials!

    ReplyDelete
    Replies
    1. Thank you! That's exactly what I thought. It's all fairly easy but figuring it out is a pain. And even knowing HTML, the Blogger template code is still a mystery to me. It's so huge and complicated! So finding tutorials that say things like "copy and paste" is a huge relief.

      Delete

Talk to me! I'm friendly. I won't bite.

P.S. If you use Blogger and you want to get email replies to your comments, use your blogger profile instead of Google+ and make sure the box is checked next to "show my email address."