Tuesday, October 18, 2011

Adding A Button Option

Hey guys, I added a "button" on my sidebar (at the bottom) in case you wanted to add it to your blog! *wink wink* To put it on your blog (and to do this with other blogger's buttons), you copy the code, add an HTML/Javascript gadget to your design and paste the code. I thought I would also share a little tutorial on how to make your own.

First, I created a "button" in photoshop. I made my button 90 px high and 180 px wide. Next I uploaded it to flickr, and copied the code. On blogger, I added a new HTML/Javascript gadget and entered the code for my button.  This will show the actual button on my blog.
Now here comes the tricky scroll box/coding part. Create another HTML/Javascript gadget and paste this code:

<div style="height:120px;width:250px;Serif;overflow:scroll;">Add Code Here</div>
Then copy your flickr button code again and go to Simplebits. Paste your code from flickr in the "enter markup" box.

Where it says  a href="(flickr website)", cut the websit out (the very first link in the code, not the second) and replace it with your blog's website address (ie. http://mylatestobsession3.blogspot.com/). This will make is so that when you click on the picture, it'll go to your site instead of the picture on flickr. You can also do this to the actual picture you add to your blog but since it's already on your blog, it doesn't matter.  So just make sure you add it to the code for everyone to copy.

Once you've put in your web sites address in the appropriate place, press process. This will make it so your html code shows as text and not a picture. Now copy the html code that's in the "copy n' paste" box and insert into the code above (in the second HTML/Javascript gadget) where it says "Add Code Here". Save and preview!
It took me a little bit of researching to figure this out. I've been taking a web design class so I knew what to look for but had to look around to get just the right codes. Hope this helps! If you have a question, feel free to ask.
**Also, check out my new sponsor page!

Signature copy