How to make a blog button • Tutorial

So long time no see-- I'm not afraid to admit it -- I've been a major slacker on the blog :) but now that I'm back and dedicated you'll see me a lot more-- you'll run away afraid screaming for some space :) but don't run just yet cuz' I made a button and we are so so so excited to see it huh :)

I actually might have made just a few buttons :)

 What can I say?? It was fun :) and I love the look of metal button pins :) 

anyways I thought it would be fun to make a button that people can grab and so of course I googled it and found this site and since it was for wordpress though  I had to figure out how to do it blogger style-- so here's my tutorial on it.

1- first off your gonna need to make yourself a button - I used photoshop and illustrator to make mine-- you need to make your document 150px by 150 px -- design it-make it- save it

2- The slightly tricky part-- so you need to have your image uploaded somewhere on the web where you can access it and really the easiest way to do this {if your not married to a computer nerd} is to make a blog post and put the button in it-- easy right--- after you do that post it and click on the image and it will take you to a separate page and you need to copy the website address at the top-- write it down-- save it-- you'll need it

3- now you need to get into your design page on your blog-- figure out where you want to put your button so others can grab it and click "add a gadget" add a new html/javascript gadget

when the box pops up you are going to need to add this code:

<img src=”YourButtonImageURL” alt=”YourSiteTitle” /><div style=”width: 150px; height: 150px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;YourSiteURL&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;YourButtonImageURL&#34; alt=&#34;YourSiteTitle&#34; width=&#34;150&#34; height=&#34;150&#34; /&gt;&lt;/a&gt;</div>



4- now you are going to need to customize it with your info anything that is highlighted you need to change

***** Note you need to make sure and retype the (") when you are doing it also otherwise it will not work***************
”YourButtonImageURL” is that crazy link I wanted you to save-- the pictures link
”YourSiteTitle” is well your site title :) site name-
YourSiteURL  is the url of your site like this site's url is http://bitsofblissphotography.blogspot.com if your on your homepage it will be displayed in your bar.
YourButtonImageURL this is that crazy link url of the picture again the one I had you save remember :)
YourSiteTitle once again your site title-- where this link is gonna take you

 so if say I was going to do it for this crazy picture I saved above I'll show you how the code would look

<img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOYK9a0bMEAXfRMfU7mL0cHKLRKzIWgJ96BamjCQqXTq_uS11WmnkUUVDLB6sWgUlbu7RcPdGNYPY782w6MnSxOYH6Mtawbi4UB9da_4JYNOa7-0oLJNIJ2RiuIw7a0d5bzOGMitZEt31/s1600/Organization+tips.png” alt=”littlebitsofbliss” /><div style=”width: 150px; height: 150px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;http://littlebitsofbliss.blogspot.com&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOYK9a0bMEAXfRMfU7mL0cHKLRKzIWgJ96BamjCQqXTq_uS11WmnkUUVDLB6sWgUlbu7RcPdGNYPY782w6MnSxOYH6Mtawbi4UB9da_4JYNOa7-0oLJNIJ2RiuIw7a0d5bzOGMitZEt31/s1600/Organization+tips.png&#34; alt=&#34;littlebitsofbliss&#34; width=&#34;150&#34; height=&#34;150&#34; /&gt;&lt;/a&gt;</div>


5- Save it and look at your blog--- If it didn't work-- try repasting the code-- making sure you've changed all the " in it (-hint there's six of them) and making sure your url's are correct.


Now your done Happy day and people can now copy the code to put your button on their blogs ect..


{ps. if you do this tutorial and make a button I'd love to see them-- send me a link in the comments :)}