Friday, July 22, 2011

making a blog button {guest post by Destiny}

This is me, so psyched to be guest posting on this blog! I was sitting here the other day wondering what I would post about... nothing came to mind! Until a very nice young lady email me, asking me how to make a blog button. BINGO! For this post I will give a nice and sort of easy tutorial on how to make a blog button! Here we go...

Note: This tutorial only works while using PHOTOBUCKET! If you do not have one, I encourage you to go and get one! Its free and it only takes seconds! It makes making a blog button easy.

{1} Go to photobucket and upload an image of your choice, Here is my photo:

Then click "save and continue on to my album"

{2} This should take you to your album (duh) scroll over your image and click on edit, like so: 

{3} the editing page should pop up and from there you can do whatever you want with you image: (All I did with mine is add text)

{4} at the bottom of the editing page there should be three small boxes: (click on replace original)

{5} After clicking that, it should take you to a page with your finished piece: 

Copy the code that's placed beside where it says HTML code (in the box at the bottom right side of the page) 

{6} Now, go to your blogger dashboard and click design on the blog of your choice (if you have more than 1 blog) 

{7} This should take you to the 'Add and arrange page elements' page. There, click on 'add a gadget'. A box like so should pop up:

{8} Scroll down that box until you see this:

then, click on that.

{9} A different (empty) box should appear, in that, you paste you copied code:

{10} Now it's time to fix the code! Please don't give up! It may seem a little hard, but it's really easy if you be careful! 

Your code looks something like this right now: (but instead it's MY code)

<a href=";current=destinybutton1.gif" target="_blank"><img src="" border="0" alt="Photobucket"></a>

replace the highlighted part of the code with the URL of your blog.

<a href="" target="_blank"><img src="" border="0" alt="Photobucket"></a>

{11} Now copy and paste this code directly UNDER your current code:

<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”>YOUR BUTTONCODE HERE</textarea>

Replace the red text with your current button code, like so: Right now your code should look something like this,

<a href="" target="_blank"><img src="" border="0" alt="Photobucket"></a>

<textarea cols=”15″ rows=”4″ wrap=”VIRTUAL”>YOUR BUTTONCODE HERE</textarea>

After you paste the top code and put it where the red text is, it should look something like this:

<a href="" target="_blank"><img src="" border="0" alt="Photobucket" /></a>

<textarea cols="”15″" rows="”4″" wrap="”VIRTUAL”">&lt;a href="" target="_blank"&gt;&lt;img src="" border="0" alt="Photobucket"&gt;&lt;/a&gt;&lt;br&gt;</textarea>

{12} Now click save and your done!!! Congrats you have made your first blog button! Click on view blog and see how it did for you!


That's all! If it didn't work than just go back and check yourself! Because, I'm 100% sure this tutorial works. 

A bit about the author:
Hello! My name is Destiny! a teenager, a photographer, an artist, a Jesus freak, and a blogger for life! I love capturing God's creation.... especially flowers and such! It's just SO beautiful! I love making people laugh and I enjoy writing. I l'amour Paris and vintage too. Heck, I love a lot of things.... to find more of my writings, feel free to check out my blog, "Sharing Endless L'amour". I hope you enjoyed reading this post :))


  1. Lovely post, Destiny!! Blog buttons are lots of fun to design once you get the hang of it. :)


  2. Hi Destiny,

    Thanks for the post. It's really cool. It's sure interesting about the whole blog button thing. I should try it out one day.

    Hey, I LOVE Paris too. Actually, I went there a few years ago.

    Izi :)

  3. This post makes me want to make an new blog button all over again! Maybe I'll use it when I decide to have a new button to go with a new header in the near future ; )
    Thank you for the guest post!!
    Love Holly

  4. Thank-you so much!
    i have been trying to figure this out for such a long time! I saw your blog, i love it :)

    -Regina <3

  5. I am not able to copy my code from Photobucket to blogger...please help?

  6. I found so many interesting in your blog especially its discussion. keep up the good work.

    Pic Grant By Iras


I love comments.