Monday, July 19, 2010

How to Make and Grab a Button for Bloggers



 I did it Laaaaaa... and You can too.

How to Make and Grab a Button

I am not an expert , I just made it my goal to Try to learn 1 new thing for my blog a week.
 Now I have decided to start sharing my experience with my fellow bloggers .
Hopefully then they will not have to struggle to put info together as I have. Truthfully I must say "The Help Button is my best friend some times"
  What I will try to do here is tell you how I have learned to do things. I'm sure there are other ways and even better ways.
I have sure spent a lot of time sifting through a lot of TECHY stuff I could not understand.
 Please feel free to share by leaving a comment if You know an easier way or If you know How to do Other blogs this way? Like WordPress.
My experience is with blogger, although I imagine the other blogging sites are  close to this. These directions worked  for Blogger.

To Grab a button:

    * copy the html code from the button you want , (Example the code under my button on the right.)
    * open your blogger account and choose "layout" or Design as they call it now.
    * click "add a gadget"
    * choose "html" and you'll get a blank box
    * paste the code you have copied in the box
    * click save

That's it! The new button should be on your blog. Go ahead, give it a try with mine. :-)
If you would like to see how mine would look on You blog gadget look at my other blog to see it. 
(Got to make a button for it now!?)
makingpressedflowerartandcrafts

Now to make Your OWN button.
Now to make Your OWN button.

     to actually make your own button, you'll need a photo program like Picasa , they have a free one at Google . It works great. You can even add words to your picture like I did.

    a standard square button size is 125 x 125, so when you open a new document (the picture), set the canvas size to 125 x 125 pixels .
 If you can not figure this out. Wait to size it at your photo website. I used the thumbnail size on the grab the link..
 
 put your images and text on the button in the Photo Program
 save as a gif (jpeg is generally used for photos, but will work & some sites will ask for it specifically) I reduced mine to thumbnail size on Picasaweb
    save your image on a website like http://picasaweb.google.com
    * Now that your Button is made ...

    Here's how To put a "grab our button" on your blog:
 copy the following html code at end of the blog .

You may want to copy and paste the code to wordpad ,so you can work on it first. That is How I did it. Then take away all spaces make sure there are No spaces in the HTML (other than in the name of blog as in my example) to make this work?
   

 * change My information to Your information- the url of the blog, the name of the blog, and the link to your image. (You'll need to go back to Picasaweb
 or wherever you saved your image and get the direct link code.)
 Here is an example highlighted (highlight may make it Not work proper  so copy and paste the one at the end of the blog to be safe.)(
Highlighted : green is url of the blog ; orange is Name ; blue is photo link.
<div align="center"> <a href="http://flowersbyterica.blogspot.com/" target="_blank"><img alt="Terica&#39;sFlowerImpressions" src="http://lh6.ggpht.com/_TKhLzqHZ9QA/S8cJrOl2C6I/AAAAAAAACpQ/0yBr4GfBNNs/s144/img342.jpg" /></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><a href="http://flowersbyterica.blogspot.com" target="_blank"><img alt="Terica&#39;sFlowerImpressions" src="http://lh6.ggpht.com/_TKhLzqHZ9QA/S8cJrOl2C6I/AAAAAAAACpQ/0yBr4GfBNNs/s144/img342.jpg" /></a></textarea></form> </div>

 Now that you have your code . Copy it so You can Paste ....
Open your blogger account and choose "layout" or Design
   
    * click "add a gadget"
  
  * choose "html" and you'll get a blank box
  
    * paste the code you have copied in the box
  
    * click save , Now go check it out! Then come back and let me know You have one and I will paste it here too!


 If you have trouble with this make sure there are no spaces in the HTML (other than in the name of blog as in my example) 
If You have trouble leave a comment and I can try to help.  
Good Luck and Happy Blogging !
_____________________________________
<div align="center"> <a href="http://flowersbyterica.blogspot.com/" target="_blank"><img alt="Terica&#39;sFlowerImpressions" src="http://lh6.ggpht.com/_TKhLzqHZ9QA/S8cJrOl2C6I/AAAAAAAACpQ/0yBr4GfBNNs/s144/img342.jpg" /></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><a href="http://flowersbyterica.blogspot.com" target="_blank"><img alt="Terica&#39;sFlowerImpressions" src="http://lh6.ggpht.com/_TKhLzqHZ9QA/S8cJrOl2C6I/AAAAAAAACpQ/0yBr4GfBNNs/s144/img342.jpg" /></a></textarea></form> </div>

4 comments:

  1. Thank you so much. I appreciate your teaching, you're good at it.

    ReplyDelete
  2. keep it up terica!! you always have good stuff goin' on!! :)

    ReplyDelete
  3. I use pressed flowers all the time in my art! So I am going to be following you around!!

    ReplyDelete
  4. Nice blog, and work, Terica, dear!
    Thank's for visit.

    ReplyDelete

I wish I knew an easier way for folks to comment ?
Thanks for leaving a message . I will try to always answer any questions ASAP.
PEACE