Learn how to Declutter your Home and Life Like a pro

I’ll send you a simple guide that will help you declutter your home and improve your life!

Get the Free Decluttering Ebook by subscribing below.

    We respect your privacy. Unsubscribe at any time.

    Blog Button Tutorial: Installation for Blogger and Wordpress Skip to Content

    Blog Button Tutorial: Installation for Blogger and WordPress

    Part of being a blogger is having your brand logo. When you display it on your site, it can be called a blog button. It is time for our next edition in our blogging tutorial series; how to create your own blog button or some like to call it a blog button tutorial! The first part of this blog button tutorial will give you step by step instructions on how to create a blog button and insert it into blogger. This part I created shortly after I started blogging back in 2011, so please forgive any “outdated” photos. The second part will be how to create and install a button into Wordpress. And the third section will show you how you can slightly alter the code to create buttons for many different events and blogging occasions. Every blogger should know how to make their own simple buttons, as it will save you a lot of money if you have the basics for simple buttons! Once you have the basic “know how” you can then create your own blog button for blog events, weekly hops and more.

     

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    PART 1: Blog Button Tutorial for Blogger:

     


    Busy Creating Memories Family Lifestyle, Recipes and Crafts

    The most simple way to make a blog button is with an image or photo. Lets get started.

    Step 1: Select any picture you want to use.

    Step 2: you will need to crop the picture down to size. I often use Picmonkey.com as it is free, and I can quickly crop and resize my photo in just a matter of a few seconds. Standard Blog button size is 150X150. But really you can make it any size you want to fit the theme or size of your sidebar.

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    Step 3: You will need to upload your photo onto a site hosting page. You can use Picasa, but For this demonstration I will be using Photobucket. Once you upload your picture to photobucket, you can then select and copy the “direct link” code shown by my green arrow.

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    Step 4: This is where you will be creating the HTML code for the picture. You will want to open a “notepad” writing file. The program is actually called notepad if you have a PC computer. It is free and standard on PC computers. If you don’t know about it, simply go to your start menu and in the search box type in notepad. It will find the program for you. You can create a shortcut icon on your desktop to make it faster to find for future use if you want.

    Many people use Word documents, but I often found that when I would transfer the code from word to blogger or wordpress, that Word documents would change the coding slightly which then in turn would not work. Word documents don’t always play nicely with HTML codes, as they try to convert the actual code to do what the code is suppose to do once placed in an HTML code reader. So if you use notepad instead, it won’t alter any of the HTML coding, and you will have less struggle with getting your code to work.

    use this code:

    <a border=”0″ href=BlogURLaddress” target=”_blank”><img src=”imagedirectURL”/></a>

    Where it says blogURL address replace that with your blog’s actual URL address. Farther into the code it will say, “imagedirectURL” replace that with the link you just copied from Photobucket. Once you have the entire link set up, now you are ready to put it into your blog.

    This is also the most basic code you will use for many other uses! Basically that’s all the coding you need for a blog button! Simple right? Now let’s install this blog button!

    Step 5: For BLOGGER/Blogspot, go to your editing section and click “layout”.

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    Select “add a Gadget” and select HTML Then Add the HTML code you just created.

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    You can title it “Grab our button” or “take our button” or anything you want. Save and view your blog to make sure the link worked. Click on your picture to be sure it will direct your traffic where you want it to go. You now have a blog button!

    Step 6: If you want the little box at the bottom with the code inside where others can take your button and add it to their own page, then simply go back to the same Gadget box, but at the end of the current code that is written in that box add:

    <textarea rows=”4″ cols=”20″>insert your html code from before and end with </textarea>

    So you will have the first code listed twice, but with the <textarea rows… etc code separating the two. This short little code is what makes that fun box appear below your blog button so others can then take the code and insert your button into their own site. Our complete code looks like this:

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    Save and then view your blog to be sure it listed correctly.

    CONGRATS! You now have your button created!
    If at any time you want your button to direct your fans to a different location, you can simply go into the gadget html code and simply change the first URL to where you want the button to direct your traffic!

    Part 2: Blog Button Tutorial for WordPress:

    The only difference between making a blog button for blogger versus wordpress is the installation. So most of what I mentioned earlier you will still do. Follow steps 1-4 from above.

    Step 5: In your dashboard, go to Appearance and click widgets. Where you will then click on “TEXT” and drag it over into your chosen sidebar where you want the blog button to appear.

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    Step 6: Insert the same codes from above into the new text box. Name the box and click Save!

    Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

    You now have a Blog Button installed in your WordPress site!

     

    Part 3: Using your Button for Blog Hops and Events!

    As I mentioned, once you have a basic knowledge of how a button works, you can then with minor edits to the code and image create buttons for blog hops, blogger events and more! Take our Wordless Wednesday button for instance.

     

     


     

    All you do is start with an image. Crop and resize the photo how you want it. Add a little text if it calls for it and then saved the photo to your computer. You upload the photo to an image hosting site such as photobucket, and then merely use the same HTML code, just change the URL of the image and where you want the image directed. Simple as that.

    Then you can simply enter the code into the HTML side or Source side of the post editor in the location you want the button to show up.

    Again, if you only want the image, delete the rest of the code starting from

     <textarea rows=”4″ cols=”20″><a border=”0″  

    And then you will have just the image without the box. And when they click on the image, it will redirect them to the URL you specified. The possibilities are endless! Does it all make sense?

    So do you think you can make your own blog button now? 

    What did you think of our Blog Button Tutorial?

    If you found it helpful, don’t forget to share, pin, stumble, Google+ and more to help others out! 

    Is There Room In Your BBQ For Memorial Day?
    ← Previous
    Road safety measures; Auto mechanics, Tire Safety and What Women Need to Know!
    Next →

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Megan | Ginger Mom & the Kindle Quest

    Tuesday 3rd of October 2017

    Hi,

    I am having the same problem with the double images instead of the text box in Wordpress. Could I give you my html code and have you see what I'm doing wrong? I am a very newbie html-er :)

    Thanks! Megan

    Write an Ask Letter, Sample Pitch Letter for Review

    Tuesday 24th of May 2016

    […] Or check out our popular articles below. How to Start a Blog  How to increase Blog Traffic Blog Button Tutorial How to use Adwords Keyword Planner for Better SEO How to Improve SEO for better […]

    Kristine

    Sunday 14th of September 2014

    Thankfulness too my farher who stated to me about this web site, this webpage iss really amazing.

    Patrick

    Sunday 16th of March 2014

    Great tutorial, Amber! And very helpful that you outlined instructions for both Blogger and Wordpress. Your blog button is beautiful, Amber, and we would love to see it displayed in our Blog Button Directory (free to be listed). Come visit us. The offer is open to your readers as well, to help them get more exposure for their blogs.

    JustTrixie

    Tuesday 14th of January 2014

    Thank you Thank you Thank you!! I can't believe I actually did it. :) I had a couple of false starts - sometimes my brain is SO literal - lol, but I now have a button. Yippee!!

    Amber Edwards

    Tuesday 14th of January 2014

    I'm so glad it worked well for you!