Grab My Button for your Sidebar

As I have mentioned short in my yesterday’s post that I have redesigned my blog – Hence, I want to share with you of how I created my own “button” :)

 

There are two ways of how to do it. A) you do it completely by yourself or B) you just do ~75% by yourself and use a Grab My Button Code Generator for the rest :)

I will first explain the more “time-consuming” A) variant – these are the steps to follow:

1. Choose an image – I found mine at shuttersock.com (which I also use, as you can see, for my new blog background)
2. Go to picmonkey.com. There is no registration needed. Simply click on Edit a photo and upload the image. Once this is done click on Resize and resize the image to max. 200 x 200 (I resized mine to 150x150). After that you can use other optional functions like adding a text etc.
3. Click Save to save your edited image on your laptop and upload it on Picasa or Flickr or any other free online photo sharing sites. The reason for this is that your image needs an URL for the code later (an IMAGE DIRECT LINK). I used Picasa as it is automatically connected with blogspot.com Therefore, there is no need to register. Simply use the same username and password that you use for your blogspot.com account.
4. Go to your blog and click on Layout and add the gadget HTML/ Java. Name the gadget “Grab my Button” (or whatever you prefer). And in the text copy this code:

<div align=”center”>

<a href=”IMAGE DIRECT LINK” target=”_blank”>

<img alt=”NAME OF YOUR BLOG” src=”IMAGE DIRECT LINK”/>

</a>

</div>

<div align=”center”>

<form> <textarea rows=”6” cols=”20”>

<a href=”URL OF YOUR BLOG” target=”_blank”

<img alt=”NAME OF YOUR BLOG” src=”IMAGE DIRECT LINK”/>

</a>

</textarea>

</from>

</div>

Simply replace the parts, which I have highlighted with the relevant URLs. However, don’t worry if it doesn’t work, there is always a plan “B” *lol*

Now to the B) variant:

Follow step 1 – 3 from A) variant

Instead of writing your own code (in step "4") simply go to this site Grab My Button Code Generator

It does all of the HTML word for you!! Moreover, you can even pick custom colours for your code box and text :)  All you have to do is copy & paste the completed code to your blog! 

That’s it – Easy isn’t it? :) It doesn’t matter for which variant you choose – at the end you have your own personal button, which somehow in my view gives your blog an additional personal touch – don't you agree? ;))

Check mine out in the sidebar to see how it looks & feel free to grab it (^_^)”

Lisa xoxo