Easy HTML Code Box for Sidebars!

Wednesday, October 14, 2009

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:
html code box for sidebars blog

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;


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


Your content in here.


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

html code box for sidebars blog


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.


<a href="http://glamiva.blogspot.com"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 98px;" src="http://1.bp.blogspot.com/_kzuqSgBLlFE/StVgGrxT6BI/AAAAAAAABI0/vHvLak8aUK8/s320/Button.bmp" border="0" alt="html code box for sidebars blog"id="BLOGGER_PHOTO_ID_5392321796791068690" /></a>


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! =)


html code box for sidebars blog

<a href="http://glamiva.blogspot.com"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 98px;" src="http://1.bp.blogspot.com/_kzuqSgBLlFE/StVgGrxT6BI/AAAAAAAABI0/vHvLak8aUK8/s320/Button.bmp" border="0" alt="html code box for sidebars blog"id="BLOGGER_PHOTO_ID_5392321796791068690" /></a>


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

You Might Also Like

0 comments

Hi there, leave a comment! You can subscribe comments on this post by clicking the link below (if you're logged in). Thanks!

Popular Reads

Like us on Facebook

press

Flickr Images