Friday, August 09, 2013

Blogging 101: How to Make a Blog Button for Blogger


I am supposed to be working on something for my work which is due, but then once I start tweeking my our or our wedsite I just cant stop, so for the past 2 days I was changing our entourage pictures in our wedding website I found this cool and easy to use picture collage maker (will make another post about this), updated my blog with button from the cool sites that help me...then it struck me I should make a button for our wedding website..and Google was again to the rescue, after much trying from the different tutorials this is the easiest to follow.

Source: http://www.wikihow.com ( my inputs in ITALIC)

Blog Buttons (or badges) are becoming a very popular way to promote, track and link back to your blog. Here is a short tutorial on how to make your own blog button. These steps should be pretty easy to follow and they are only for those blogs who use blogger.

1. Find a picture that you like. Either a photo you have saved on your computer or you can draw a picture using paint or any other drawing program you have.
Since am making our for our wedding website I decided to use the clip art from our wedding stationary, I just cant get enough of the lovebirds

I found this easy to use photo editor http://www.online-image-editor.com/ 
and I was able to create these
  

2. Upload the photo to an online photo gallery service, such as Photobucket. Resize the image to 125 x 125. 
You could also use Picasa whis is convenient if you're using Blogger
Copy the URL link by right clicking the picture

you're supposed to have something like this:

https://lh6.googleusercontent.com/-jEnXS5F6-Tc/UgRqTvJLgnI/AAAAAAAADEM/s1FbGzliY_g/s161/photo_name.png
 
3. Sign into Blogger.

4. Go to your design tab and add an HTML gadget to the place you want your button to show.


5. Add a catchy title, like “Grab my Button” (or whatever you like).
I used "Our Wedding Website"

 
6. Copy this HTML code:
  • <a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a>
    <textarea id="code-source" rows="3" cols="13" name="code-source">
    <a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a>
    </textarea>
7. Paste the above HTML code into the HTML gadget.

 
8. Replace YOUR WEB ADDRESS with your actual blogs web address
9. Replace BLOG TITLE with your blogs title such as Tips For Saving
10. Replace IMAGE WEB ADDRESS with your new image html
remember the photo URL, this is where you paste it :-)
11. Save all of your work and test to make sure it works 

 
  Tadah!!!!

CODE GENERATOR

Grab My Button" Code Generator

Blogging and searching is like me buying shoes, I would jump to the first thing that I like buy it, use it but still continue with my search only to be  knocking myself on the head for finding something better, well this what happened to me during my search for the blog buttons hahahahhaha.

This is for those who are confused when it comes to the part of copy,pasting and changing the HTML codes.


The interface is easy and your codes would be ready in a jiffy :-)
Then just follow these steps:

  1. Sign into Blogger.
  2. Go to your design tab and add an HTML gadget to the place you want your button to show 
  3. Add a catchy title, like "Grab my Button" or whatever you like
  4. Copy and Paste the HTML code that you had generated into the HTML gadget.
  5. Save all of your work and test to make sure it works 

 


author image

Miss Chuchubells

Miss Chuchubells was born and grew up in Manila, Philippines in 1973. She left Manila for Singapore in 2001and still lives in there with her Hubbyness and brother. When not updating her blog, Miss Chuchubells is a passionate food enthusiast, proud coffee fanatic, social media advocate, tv fanatic , amateur travel buff, beauty newbie but mostly she is a dreamer and believes that “People are capable at any time in their lives, of doing what they dream of.” and she is living it right now.

No comments:

Post a Comment