Blog buttons are lovely things.
Before I got my own blog buttons, whenever I came across a blog that had one I got the distinct impression that this was a serious blogger operating here.
It must be the whole thing with codes that does it….when you spot a bit of code you immediately think of clever things done by cleverer people……I wanted to be a clever person so I needed to get that code.
Of course by now we all know that google is a god and in 2 hours I had researched and created one of my own….that was supposed to work…..
I only found out they were not working properly when a couple of friends started giving me feedback a day or two later.
Looking back at the tutorials I had used I noticed that each explained something the other left out so I had to sort of pick from one tutorial’s code and add to another.
I managed to get a combination of code that worked and that is what I’m sharing with you today. So you can also get yours done perfectly, hopefully with monimal fuss….I will try to be as clear and concise as possible.
Please understand I am not a CSS or HTML code professional. All I do is get these things to work and off I go. That’s as geeky as I get.
First let' ssee what we want to achieve. This is the result we want. You see my blog logo has a code underneath it.
That code is what people will grabe from your sidebar for them to get the picture of your blog on their own sidebar and automatically link with your blog.
Step One: Get Your Picture coded.For you to be able to use the picture you want other people to put on their side bars, you have to get it converted into code. This picture can be any size between 250 and 300px. Mine above is 250px because my sidebar is quite small.
I use photobucket.com to do this. If you don’t have an account, registering is as easy as clicking on the “REGISTER USING YOUR FACEBOOK” option. Uploading your picture is simple, like doing it for Facebook.
When you finish uploading, highlight the direct link in the sidebar to the left and copy it.
Let me show you a picture of the link I want you to get after you upload your picture.
The code for your IMAGE LINK which you have copied from Photobucket, the one labeled “DIRECT” next to my heart, will look like this:
Next you need to get the URL to the page where you want a visitor to land when they click on your button from a blog in “neverwhere” (wherever they come across it).
Ialways want mind visitor to land on my homepage so I copy MY MAIN PAGE URL:
ALWAYS MAKE SURE BOTH LINKS START WITH http. DO NOT mistakenly cut it off when you copy past.
NOW TO INSERT THE URL’S YOU HAVE COLLECTED.I have read that there are two parts to this code. Frankly separating it confuses me so I will use color coding to help you here.
RED means it’s an IMAGE so replace my image link with yours.
BLUE means it’s your BLOG LINK so replace my Blog URL with yours.
PURPLE *i think* is my BLOG NAME so you need to replace it with your blog name.
NOTE: make sure you insert all your replacements within the quotation marks (“…..”) – DO NOT DELETE THEM.
So here we go. REPLACE as instructed and the COPY & PASTE the whole code to the HTML widget box on your sidebar. If you don’t know what that is, let me know in comments.
<a href="http://fabulosityreadsbookpromotions.blogspot.com/" target="_blank" title="Fabulosity Reads Book Promotions"><a href="http://fabulosityreadsbookpromotions.blogspot.com/"><img border="0" src="http://i1359.photobucket.com/albums/q795/SkillsDepot/Tour%20Badges%20for%20Clients/FEBPBadgeTemplate250_zps52266d3b.png"/></a></a></div>
<textarea style=”width: 250px; height: 112px;” id=”code-source” rows=”3" cols=”13" name=”code-source”>
<a href="http://fabulosityreadsbookpromotions.blogspot.com/"><img src="http://i1359.photobucket.com/albums/q795/SkillsDepot/Tour%20Badges%20for%20Clients/FEBPBadgeTemplate250_zps52266d3b.png"border="0"></a>
PLEASE SHARE THIS POST IF YOU FOUND IT USEFUL.
I'd also love for you for follow my blog through GFC on my sidebar.