Spruce Up Your Site Part 1 / Tech Help For Bloggers Series

Welcome to the second installment of the Tech Help for Bloggers Series. This series is focused on providing technical tips and advice to help you understand and get the most out of your blogging experience. Here is the schedule of posts:

• July 1       Getting Started / Intro to HTML
• July 4       Sprucing Up Your Site Part 1 / Blog and social media buttons
• July 8       Sprucing Up Your Site Part 2 / Creating pages and navigation bars
• July 15     Getting to Know the Settings in Blogger / Your blog, behind the scenes
• July 22     Layouts and Templates in Blogger / How to change your blog's look
• July 26     CSS and Web Fonts / How to use custom fonts for your blog
• July 29     Organizing Events / Creating forms, polls, and sharable documents
• Aug 1       Hosting A Linky Party / Guest Post w/ Laura of TGIFF! and Quokka Quilts
• Aug 5       Pinterest and Flickr / Features for managing image sharing
• Aug 12     Giveaways / Technical tips and tricks for hosting a successful giveaway

Today we are looking at how to created blog and social media buttons using HTML coding. 

----------------------------------------------------------------------------------------------------------

Before you get started making any changes to your blog, I HIGHLY recommend making a back-up copy of your blog template to store somewhere safe on your computer. I do this regularly (along with also backing up my entire blog content) to ensure that if anything did go wrong with my site--say a piece of code accidentally gets deleted or worst case, my blog gets hacked--I have a back-up copy that I can reload without loosing my custom changes to my template. 

If you use Blogger, like I do, you can do this quickly by accessing your blog settings and going to the "Template" menu. In the upper right-hand corner there is a button labeled Backup/ Restore. Click on this and you will be able to download your backup blog template (see image below).

Making Social Media Buttons

Since we covered the basics of HTML in the first post of this series, it's about time we put that HTML to work by making a set of fun social media buttons. You will need a graphic image for each of the social media buttons (icons) that you would like to provide on your blog (such as Facebook, Flickr, Pinterest, etc...). You can either make your own (as I have done) or you can download a pre-made set.

I found a very good free set offered by Carrie of Carrie Loves and Sweet Faerie Designs. She has created a set of 12 free social media buttons that come in 15 different colors. This makes it easy to download the color set that works best for your blog theme and then choose the individual icons for your own social media profiles.

Once you have downloaded or created your images, you will need to upload them to the internet in order to create a corresponding URL for each button image. You can simply add the images of the buttons to a blank or existing page/post on your blog or to an image hosting service like Photobucket. 

Note: You cannot use Flickr to host your buttons (even though it is possible) because it's actually in violation of the Flickr Terms of Use (see here). I did do this for a while before a friend pointed this out to me. Better to be safer than sorry (and with a suspended account)!

So without further adieu, here is the code you will need for your social media buttons:

<a href="http://www.YourFacebookAccountAddress.com/" target="_blank"><img src="www.URLofImageLocation.com" width="50" alt="Facebook" /></a> <a href="http://www.YourFlickrAccountAddress.com/" target="_blank"><img src="www.URLofImageLocation.com" width="50" alt="Flickr" /></a> <a href="http://www.YourEMailSubscriptionAddress.com/" target="_blank"><img src="www.URLofImageLocation.com" width="50" alt="E-mail" /></a> <a href="http://www.YourPinterestAddress.com/" target="_blank"><img src="www.URLofImageLocation.com" width="50" alt="Pinterest" /></a> <a href="http://www.YourRSSsubscriptionAddress.com/" target="_blank"><img src="www.URLofImageLocation.com" width="50" alt="RSS" /></a> <a href="http://www.YourTwitterAccountAddress.com/" target="_blank"><img src="www.URLofImageLocation.com" width="50" alt="Twitter" /></a>

For example, the first part of the html code – www.YourFacebookAddress.com – is the URL of your Facebook profile page that you want someone to connect to. For example, I’d enter: https://www.facebook.com/EchinopsandAster

The second part of the code – www.URLofImageLocation.com – is where you include the Facebook button image location URL from where you uploaded it. Here are a couple screen shots showing how I located mine:

I placed my buttons into a secondary page on my blog and then opened each of the corresponding image URLs for the button on a separate tab in my web browser. 

Note: I was then able to delete the blog buttons from the page once I had copied all of their corresponding URLs without deleting the actual links.

I started with the Facebook button by copying its URL and adding it to the first piece of HTML code above where it specifies -- www.URLofImageLocation.com -- for the Facebook button. 

Each social media icon that you want to add to your website needs the above code and that code should be changed appropriately for each button (ie add your Flickr info to the Flickr button). In blogger, you can open an html/javascript widget (aka gadget) from your layout menu in your blog settings and add repeated lines of this code, editing as you go, until you have all of your social media buttons represented. Here is what the buttons look like on my blog under the "connect" heading in the right tab.

Making Blog Buttons

Making blog buttons essentially follows the same guidelines as making social media buttons. You need to have your graphic ready, then upload it to the internet, locate the URL, and then exchange the placeholders in the code for your image URL, website URL, and website name. Here is the code you will need:

<a href="http://www.YourWebsiteAddress.com/" target="_blank"> <img src="www.URLofImageLocation.com" width="150" height="150" alt="Name of Your Website" /></a> 

<textarea style="height: 100px; overflow: scroll; width: 150px;"><a href="http://www.YourWebsiteAddress.com/" target="_blank"><img src="www.URLofImageLocation.com" width="150" height="150" alt="Name of Your Website" /></a></textarea>

You will notice that the usual code is actually repeated, appearing twice with an extra bit of code located above the second one. That extra bit of code, actually another tag, describes a text box that will display your blog code so that others can copy it and add it to their own blog. Pretty cool huh? :) You can set the width and height of this text box, just like you can for the actual image, as well as the way the text box will handle overflow text that doesn't fit into the box. For the code above, the overflow will be handled by creating a scrolling bar feature on the side of the box.

I hope this tutorial was clear and easy to follow, but if you do have any questions, feel free to write me a comment or send me an e-mail. And of course to my fellow Americans...

Happy Fourth of July!