Everyone needs a blog button. You can view my previous post here about what a blog button is, why you need it and how you can make one for yourself.
Now to continue my post on blog buttons, I will be showing you how to place your button in your side bar with the text box below it so everyone can copy the html and place it on their blog.
Now to continue my post on blog buttons, I will be showing you how to place your button in your side bar with the text box below it so everyone can copy the html and place it on their blog.
Step 1
You would probably like to host the button online. I use photobucket and my explanations and screen shots will be based on that. So if you would like to follow me along with this, make an account on photobucket and then upload your button(s) in the size(s) you want to add to your blog.
Step 2
Open the "Albums" section of your photobucket and click on the row that says "HTML code". Good, if you saw "copied" quickly flash, this means you have just copied the html code of your button.
Step 3
Open your blogger account and go to layout.
Step 4
Click on "Add a Gadget" and then select "HTML/JavaScript". A new window will pop up with empty fields.
Step 5
Insert the code which you copied from Photobucket by pressing "Ctrl+V" in the content field. I like to add "<center>" at the beginning and "</center>" at the end so the image is centered.
Step 6
Highlight the entire text in the content field and click on "Rich Text". This will let you see the image the way it would look on your blog instead of seeing the html code.
Step 7
Highlight the image shown and click on the ball with chain. This will make a new window to pop up in which you will need to insert the URL to your blog. This is done so the image links to your blog when clicked and not to your photobucket.
Step 8
Now we have to make the text box below the image so everyone can easily copy the code. For this, use the following code:
<center><textarea id="button-source" rows="4" cols="20" name="button-source">Paste html code from Photobucket here</textarea></center>
Just copy the code above and insert it into the content, delete the sentence written in red and paste the same code which you copied from photobucket. After inserting the code, click save.
End result
Here is what your end result should look like.
I hope this has helped you in placing your own button in your
sidebar. If you need any help, don't hesitate to contact me.
this is so helpful! managed to do my button now! thank you!
ReplyDeletehttp://straycloset.blogspot.com xx
So glad if I can help. I know it took me some time to make and place mine. :)
DeleteThanks hun. x
ReplyDeletevery helpful-thnx
ReplyDeleteI'll be happy if you check out my blog too:)
Glad to know. Hope it helps. x
DeleteHelpful and insightful.. Nice share! :))
ReplyDeleteDaney ♥
THE UNCANNY GIRL
Thanks lovely. x
DeleteThis is a really great and simple tutorial - I think this will be very useful for beginners! x
ReplyDeleteIsland Girl Insights ♥
Thank you. That was my reason for making it.:)
DeleteHi linked to your blog via the #bbloggers blog hop. Thanks for this and previous tutorial re blog buttons really useful & think I will be creating myself a blog button now:)
ReplyDeleteHi lovely, glad to have you stop by. If you need any help creating a button, just let me know. x
Delete