I posted about how to get your own button on your website on my previous post. But it was big and won't fit into sidebars. It will look like this:


I found this article, and thank you whoever posted it, just nice for the side bar's size. Although it can be a bit wider tho. =P But I have no complains. =)

I copied this code provided;
<div style="width:200px;height:100px;overflow:auto; border-width:2px;border-color:000000;border-style:solid;"> <br /><br />Your content in here.</div> <br /><br />

and paste it on a new bog post here in blogger. It will look like this in Preview:


I thought of just putting my pic's code into the code above, but it turned out to be like this in Preview:


See my post on how to get the pic code, step 4-6. Mine's size is 251 wide x122 height. Remember to change the url of the pic to your own ya!

So how?? Hehe no worries. Go here, put your pic's code into the box provided and click HTML to Text button. The code takes a blink of an eye to process and automatically highlighted for you to copy it.

Copy the code and put it in the code box I meantioned.



Tadaaaaa!! All you have to do now is just put your pic's code above the code box's code.

To put it in your layout, go to Layout >> Page Elements >> Add Gadget >> HTML/JavaScript. Paste both codes (both for pic and the code box under it) you have on the post, give it a tittle and click Save.

There you go! Have fun! =)





My pic and the code above is like this because when I upload the pic, I set it to the left hand side. But no worries, it turned out just like the one I have on my blog now- the code is underneath the picture! =) So have fun y'all! Please do link me when you're using this, I spent hours on it! Thanks for reading!






Shine on,
Del