• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Live Laugh Rowe
  • About
    • About Me
    • Contact Me
    • The Rowes
    • In The Press
    • PR & Advertise
    • Privacy Policy
    • Resources
  • Recipes
    • Appetizers/Snacks
    • Beverages
    • Breakfast
    • Desserts
    • Main Dish
    • Side Dishes
    • Sandwiches
    • Skinny Dishes
    • Slow Cooker
    • Soups/Chilis
    • Weight Watchers
  • Crafts & DIY
    • Crafts
    • Decor
    • DIY Projects
    • Fall Projects
    • Holidays
    • Home Projects
  • Printables
  • Shop My Home
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
Subscribe
Live Laugh Rowe

Live Laugh Rowe

A lifestyle blog that shares crafts, recipes, tutorials and life's moments.

  • About
    • About Me
    • Contact Me
    • The Rowes
    • In The Press
    • PR & Advertise
    • Privacy Policy
    • Resources
  • Recipes
    • Appetizers/Snacks
    • Beverages
    • Breakfast
    • Desserts
    • Main Dish
    • Side Dishes
    • Sandwiches
    • Skinny Dishes
    • Slow Cooker
    • Soups/Chilis
    • Weight Watchers
  • Crafts & DIY
    • Crafts
    • Decor
    • DIY Projects
    • Fall Projects
    • Holidays
    • Home Projects
  • Printables
  • Shop My Home
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
Subscribe

Making a Bloggy Grab Button {Tutorial}

03/02/2012 · Kelly Rowe · 17 Comments

This post may contain Amazon or other affiliate links. As an Amazon Associate I earn from qualifying purchases.

Pin
Share
Tweet
Share
I’ve received lots and lots of bloggy questions in my live laugh rowe Inbox lately — so slowly, but surely,  I’m going to try to answer some of them.  For this post, I’m going to assume (shame on me, I know) that you have a button or will be making a button in the very near future.  Side Note: I would {love} to do a tutorial on making a button, but I’m not sure how many of you have Adobe Photoshop.  That is what I use and {love}.  I know there are a lot of different resources and sites that can be used, so that post is still iffy {smile}.  Feedback is welcome.

Anywho, are you ready to make a “Grab A Button”
scroll box for all of your bloggy friends to grab??  
Alrighty, let’s do this! {yay}

STEP 1: FIND A PLACE TO STORE YOU BUTTON
You can store it on your own server, or upload it to one of the many of the photo hosting sites like Flickr or Photobucket. I use Photobucket because once you upload the file, you can hover your mouse over the picture and it generates the HTML link code for you (code you will need). Then with one mouse click you can copy this code. And who doesn’t like that {woot}? A point to note here is if you don’t use a lot of pictures, you may not need to pay for membership. The down side is there is a limited amount of space on their free accounts, so keep that in mind.  

STEP 2: EDIT THE HTML LINK CODE
So, go ahead and upload your photo, hover over the picture, and left-mouse click on HTML Code. You will see Copied flash in the box to the right.

This is the code I’ve copied from photobucket for my button:
<a href=”https://s1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/?action=view&amp;current=kelly_avatar_200x100rounded.png” target=”_blank”><img src=”https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png” border=”0″ alt=”Photobucket”></a>

This code is made up of two major tags. The first tag is the <a href=http…> ending with </a>. Enclosed in that tag is the second tag named <img src=”http…>.

We’ll explain the second tag first. This tag is the image source tag – make sense, right? The link “https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png” is where the browser goes to get the image that displays on the page. Any errors in this code will break the link to the button and it will not show on the page.

The first tag is where the browser will go when you click on the button. In the copied link from Photobucket, the highlighted link will send the browser to the source of the image, and you do not want that to happen. So you will need to replace that link with your web address.

So your code will go from this:
<a href=”https://s1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/?action=view&amp;current=kelly_avatar_200x100rounded.png” target=”_blank”><img src=”https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png” border=”0″ alt=”Photobucket”></a>

to this (the center tag added afterwards):
<center><a href=”https://livelaughrowe.com/” target=”_blank”><img src=”https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png” border=”0″ alt=”Photobucket”></a></center>

A curious note: if you are wondering what target=”_blank” does, it opens the link in a new browser window. Remove it if you do not what this to happen.

STEP 3: CONVERT THE HTML LINK CODE
This explanation of this step is somewhat technican. Basically, your browser interprets all tags as formating instructions. So if you browser sees <b>bold</b> it will display bold. But what if you are doing a tutorial on coding and you want to show the tag code? Well, you will need to tell the browser not to interpret the tag but display it as is. To do this we have to convert the tag characters. So <b>bold</b> becomes &lt;b&gt;bold&lt;/b&gt; Of course! Simple!

Well, lt is “less than,” or the less than sign and gt is “greater than,” or the greater than sign. We enclose the lt and gt text within & and ; to make the browser display < > and not interpret it as a formatting code. Now, you could go through your code and do all this by hand, or…take this code and visit {here}.  You’ll see this box:

Go ahead and paste your html code into that box and click on the Convert special chars to entities button. Your code will convert to the necessary code that can be used within your scroll box, as you can see here:

Go ahead and copy that code, as you’ll be needing this to place within the html for the scroll box.
STEP 4: CREATE THE SCROLL BOX
All you’ll need for this is the following code to create a 125×125 scroll box:
<div style=”border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;”>YOUR TEXT HERE</div>

See the text in all CAPS and bolded that says YOUR TEXT HERE?  That is where you’re going to paste the converted text you copied earlier.  I’ve added and bolded mine below.

<div style=”border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;”>&lt;center&gt;&lt;a href=&quot;https://livelaughrowe.com/&quot;&gt;&lt;img src=&quot;https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

If you were to take this new code and paste into your html widget box or the html tab of your post, this scroll box is what you should see once it’s published or in preview mode. YAY! Isn’t this exciting?
Let me also mention that you can modify this box.You can change the border color from black to another color, or the size of your box by changing the number of the height and width (the px numbers), the color of your html code, and the thickness of your border. Just tinker around and you’ll see there are quite a few options.  I tried to coordinate the items I’m referring to with the items in the code below, does that help at all?
<div style=”border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;”>&lt;center&gt;&lt;a href=&quot;https://livelaughrowe.com/&quot;&gt;&lt;img src=&quot;https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

Here’s an example where I’ve changed some things out in the code:
<div style=”border: 3px solid pink; overflow: auto; height: 200px; width: 125px; color: lightblue; background-color: white;”>&lt;center&gt;&lt;a href=&quot;https://livelaughrowe.com/&quot;&gt;&lt;img src=&quot;https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

This is what the box would then look like:
 
STEP 5: ADD YOUR BUTTON
Okay, now that we have the box, we probably want our readers to know what the button is going to look like that they’re grabbing, right?  I mean, duh! {giggle}  Remember the original code above, the code that we converted to use within our scroll box?  Well, that’s the buttons original code, and we need to place that above the scroll box code.  Please note that I inserted the break <br> between the two codes so that there would be a slight space between them — because I’m so very anal.

<center><a href=”https://livelaughrowe.com/”><img src=”https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png” /></a>
<br>
<div style=”border: 1px solid black; overflow: auto; height: 125px; width: 125px; color: black; background-color: white;”>&lt;center&gt;&lt;a href=&quot;https://livelaughrowe.com/&quot;&gt;&lt;img src=&quot;https://i1184.photobucket.com/albums/z329/Kelly_Kuert-Rowe/kelly_avatar_200x100rounded.png&quot; /&gt;&lt;/a&gt;</div>

That’s it!  The code above equals this button and scroll box:
I’ll be partying {here}!
Subscribe to Updates | Like on Facebook | Follow on Pinterest

Pin It

keep living and laughing, friends.
Pin
Share
Tweet
Share

Related Posts

45+ Solutions to Organize your Home! livelaughrowe.com

45+ Solutions to Organize your Home

Hot Cocoa Bombs for Valentine's Day

The Numbers Game in Blogging: Social Media

Vintage lovers rejoice! 15+ Vintage Bed Spring Crafts to inspire you. From picture holders to vases, you're sure to find some inspiration. More at livelaughrowe.com

15+ Old Bed Spring Crafts for the Vintage Lover

Indecisiveness | live laugh linky #82

Ornament Exchange | live laugh linky #84

Technical Jibber Jabber, Tips and Tricks

Previous Post: « {What I Wore Wednesday}
Next Post: DIY Jewelry Holders »
about kelly

ABOUT KELLY

A DIY fanatic, Kelly shares her journey through her blog, Live Laugh Rowe, where she showcases her recipes, tutorials, crafts, home projects, and all things DIY. This East Coast Girl at heart believes family is number one as she finds the perfect balance of being a daughter, wife, sister, entrepreneur, writer and woman of God. Be sure to follow along as she shares her passion for life, love and family! Read more...

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recipe Rating




Comments

  1. Lauren says

    03/02/2012 at 9:20 am

    Thanks Kelly! Awesome tutorial! :o) Have a great weekend.

    Reply
  2. Remy Hadley says

    03/02/2012 at 4:25 pm

    Thanks soooo MUCH for this! Came in handy!!

    Remy / Cinnamon Bubbles

    Reply
  3. Danielle says

    03/03/2012 at 1:10 am

    Awesome tutorial and tips. Great job!

    Thanks so much for stopping by Blissful and Domestics Blog Hop. I am of course following your cute blog and am now catching up on your bloggy cuteness here. I hope you will come back this week and link up again:>

    http://www.blissfulanddomestic.blogspot.com

    Reply
  4. Magnetoid Magnets Magnetic Mayhem says

    03/03/2012 at 2:16 am

    Thank you so much for this Kelly! Answered sooooo many questions for me :)And thank you for including my button!
    You rock!!!
    Have a great weekend!
    magneticmayhem.blogspot.com

    Reply
  5. Olga@Stardust-Decor&Style says

    03/03/2012 at 8:52 am

    Kelly just before 2-3 days I posted the same tip! LOL! Brainstorming?

    Reply
  6. Olga@Stardust-Decor&Style says

    03/03/2012 at 8:52 am

    Kelly just before 2-3 days I posted the same tip! LOL! Brainstorming?

    Reply
  7. Olga@Stardust-Decor&Style says

    03/03/2012 at 8:52 am

    Kelly just before 2-3 days I posted the same tip! LOL! Brainstorming?

    Reply
  8. Olga@Stardust-Decor&Style says

    03/03/2012 at 8:52 am

    Kelly just before 2-3 days I posted the same tip! LOL! Brainstorming?

    Reply
  9. I am LOVD says

    03/03/2012 at 10:19 am

    Thank you, thank you, thank you!!! Bookmarked this page for when I need it!

    Reply
  10. Lena @ Mom2MemphisAndRuby says

    03/04/2012 at 4:53 pm

    Thank you for this… I'm going to try to make a new button, I'm usually such a spaz when it comes to "coding!" :S
    New linky & GFC follower, found you through the hop! 🙂

    Reply
  11. Fox Hollow Cottage says

    03/05/2012 at 2:20 pm

    Sorry I did not respond to your comment, I found it in spam, marked that it wasn't and have no idea where it went! I did get your blog name though 😉 Yay. I have this post saved for when I feel up to tackling this. Thanks for the info =) Shannon

    Following with Linky Follower tool

    Reply
  12. Our Delightful Home says

    03/06/2012 at 7:19 am

    Great tutorial!

    Mrs. Delightful
    http://www.ourdelightfulhome.blogspot.com

    Reply
  13. DebbieDoesCreations says

    03/08/2012 at 9:44 am

    This is a great tutorial! I also use a website that had a code generator: http://www.mycoolrealm.com/sandbox/gbgen/ Thanks so much for linking up to Toot Your Horn Tuesday 🙂

    Reply
  14. Dyea says

    03/08/2012 at 2:17 pm

    Fantastic! Thank you!

    Reply
  15. Gen says

    03/13/2012 at 7:12 am

    This has got to be the most complete tutorial for making a button grab box I've come accross. Been looking to change the size of the box of mine since it overlaps my post section, and hadn't found anything until this, so thank you so much! Will share and pin, too 🙂

    Reply
  16. Bri + Vincent says

    03/18/2012 at 7:48 pm

    Thank you so much! I've been meaning to try this ever since you posted the instructions and finally got around to it. Our blog now has a cute little button thanks to your tutorial!

    Bri @briandvincent.blogspot.com

    Reply
  17. Morgan Brooks says

    04/08/2012 at 12:43 am

    Thank you so much. Great tutorial. So easy and it really helped a bunch Dear!
    xoxo
    Morgan
    http://thesocialboutique.blogspot.com/

    Reply

Primary Sidebar

Looking for something?

Hey there! I’m Kelly.

I’m the author, creator, cook, and photographer behind the blog. I am so glad you’re here!  I’m passionate about life, family, and my faith. If there’s one thing I’ve learned in my journey, life is hard, but God is good.  Read More

Popular on Pinterest

Valentine Favors with cones and candy.

Footer

  • Facebook
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Looking for something?

Copyright © Live Laugh Rowe, LLC • Privacy Policy • Log in