Skip to main content

Creating a Blog Button

Mothers Who Know

Are you interested in creating your own blog button??

Making a blog button with a code underneath is not as hard as it looks. 

FIRST: Like with my whole blogging journey I turn to google for help.  I typed in a search "How to Create Blog Button"  Several tutuorials popped up and then it was a matter of time trying to find the right tutorial for my brain to understand.  I found it!  Here is the  {link}  I followed that really close. 

This takes time, concentration, and willingness to learn from mistakes until you figure it out.  It might take you a few tries until you can get it exactly right and how you want it.

 I think it took me three. 

I am sure there are many ways to do this... and probably better ways...but this is what worked for my brain! 

Your blog button image:
  1. Choose your button image
  2. Choose a photo editing site.  I use Picasa, and will just refer to them as a reference, but any photo editing site can do this for you.
Ok you have that part?
  1. Upload your photo image to Picasa
  2. Select your photo
  3. Click collage
While creating your collage, don't worry at this point on the size of your picture.  You will tweek that later on. 

  • Click "Create collage"

  This will then send you to the text editing page.
  • you can select what ever kind of text you would like for your blog button. In Picasa it recognizes all of your fonts and you can really get creative with your text on your picture. You can make it all the same size and text, or you can have each letter different or how ever you like it.
  • Crop your picture so the only thing you see is just the picture, no extra white around it, except for any picture border that you want.
When you have your blog button picture how you like it, click "Apply"

  • Click the EXPORT folder on the bottom taskbar
  • This will send you to the page where you can select the size of your picture.  They recommend 125 X 125.  This is the area I had to tweek a few times until I had it how I liked it.  125 X 125 was too small for my button.  You want it to be small so that others will want to put it on their blog, but not so small that you can't read the text.  Mine ended up at 180 X 180.
  • Now click the export button --this will send it to your computer picture file where you can store it
Creating the code: Part 1
  • Start a new post on your blog--you will not publish this, but will keep it as a DRAFT
  • Upload your new blog button from your computer picture file
  • On the LEFT, top corner of the post you will see two buttons: COMPOSE & HTML. 
  •  Click on the HTML button.  There you will see a will use part of this code to make your blog button code.  For right now, leave it alone, we will come back to this.

Creating the code: Part 2
For this part, you will need to open up a blank page in your documents.  This will give you a place to work on your code.  Copy and paste the code below.  Any mistake or deletion of any kind will mess up your code. Don't leave off any back slashes, quotation marks..nothing.

Copy and paste {this code}

Here are the changes you'll need to make to the above code to create a button with code underneath for your blog:

Step 1: In the two locations where you see the name of the  blog, Between Naps on the Front Porch in purple, replace that with the name of your blog. It’s okay to type it with spaces just as you see mine written. Remember, you don’t want to accidentally erase the quotation marks.

Step 2: Where you see the blog address written in red in two places, replace that with your blog address. You can copy and paste it from the address bar when you bring your blog up on your computer. 

Step 3: In the two locations where you see the blue code, replace that code with the HTML code from your blog button post above.

Once again, you won't need the whole code.  The code you need is the code that starts with http and ends with .jpg. I’ve highlighted it in blue below on my image code. Yours should be located in about the same spot on your image code in the html view.

Copy just that section of your image code from the html view of your draft post and paste it into the two places where you see the blue code for my blog button, replacing my code with yours.

That’s it…you now have the code for your blog button. Save this in your word document where you can find it when you need it.

Step 4:
Copy and paste this whole new code into yout HTML/javascript on your add a gadget side-bar.  If you have a test blog you can try it out on there first to see if it what you want.

 Now you have a blog button that represents YOUR blog  with a code underneath for others to share your blog from their site.

Mothers Who Know

YOU DID IT! Do a victory dance.  You deserve it. 

Popular posts from this blog

Putting on the Whole Armor of God/FHE

This was a family home evening lesson we did when we had grade school age children and teenagers. It was a great visual that worked on both age groups on teaching about putting on the armor of God. Lesson:   What is going to happen when we put these oranges into the water?  Are they going to sink or are they going to float? [the younger kids will probably answer SINK, because an orange looks heavy enough to sink in water] But, instead....the oranges FLOAT because they have their ARMOR on What happens when you peel the oranges? Without their ARMOR on, they sink! We can compare these oranges to us and how important it is to put on our full armor everyday. Here is on oldie but goodie seminary video from the 80's:   " Putting on the Armor of God"  and symbolically what can happen if we take off our armor even for a minute. Scripture: Ephesians 6: 11-17 11 Put on the whole a armour of God, that ye ma

Understanding Lehi's Dream

In 2007 something kind of awesome happened.  There were 3  Devotional/Fireside talks  given back to back one month after another....on Lehi's Dream.  Coincidental??  I think not! Lehi's Dream and You - President Boyd K. Packer, BYU Devotional given January 16, 2007 Reservoir of Living Water -Elder David A. Bednar CES Fireside , given February 4, 2007 Hold Fast to the Words of the Prophets - Elder Neil L.Anderson CES Fireside given March 4 2007 Interesting don't you think that all three randomly inspired, chose to speak on the same topic?  Here is what Elder Anderson said prior to giving his CES Fireside talk. "I want to tell you of the Lord’s guiding hand in our meeting tonight. During the early days of January I worked to organize and outline what I would present to you. Knowing that Elder David A. Bednar was scheduled to speak to you in February, I asked him if he had finalized the subject he would address. I was taken aback when he responded

Are You Like a Lighthouse?

 Heceta Head lighthouse before sunset in all her beauty!! My husband   and I went on an anniversary trip to the Oregon Coast. See my previous post   My Heceta Vacation .  I was mesmerized by the deep symbolism and parallel that lighthouses have to motherhood. So much, that I couldn't stop thinking about it!   Here are a few thoughts from inside my head.... Heceta Head Lighthouse Lighthouses stand on the shores and coasts of our world, and their purpose is timeless and constant.   They know who they are there and why they are on this planet.  They are on the shores as l eaders , who lead with strength, not uncertainty, and they are a guide to ships out at sea, trying to get to shore safely.  Their light shines 24/7  consistently through calm still waters, or through turbulent storms.     Heceta Head Lighthouse See the symbolism?! In my lighthouse touring...(if you want to call it that)...I learned a lot! I was like a spon