Sunday 8 May 2011

BLOG ADVICE: How to make a scroll box

Another great article from  Jenieshell's Design Challenge

This is how to make a scroll box similar to the one on my sidebar called Grab the Button.




<center><a href="http://jenieshell.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiseEJuNWqYFTvQsAY_oOoHI7fDtKH1asW6806o6y1SBoivca1i2yzCUjLr2kSs6zbO1oD2cNHFPjGm_uIZJV40Ttw_ZrgaLx5SIiZUK7FLS791tnnNtZ_6Ingoimdo84pOjIeXQ7NHx2g/s170/Blog+Design+Button+copy.gif"/></a></center>


Here's the code you will need for the scroll box.

<div style="border: 3px solid black; overflow: auto; height:
125px; width: 125px; color: black; background-color: white;">YOUR
TEXT HERE
</div>


You can change the color of your border by changing the color from pink to another color, or the size of your box by changing the number of the height and width. (example: 200px)

You will need to copy this code into your side bar or post where you are needing the scroll box. You will also need to add text that fits your needs where it says YOUR TEXT HERE! If you are wanting to make a scroll box for a "grab the button code" you will then add the code for your button here also. If you want to know how to make a blog button click here!

Once you've added "Your Text" you are now ready to copy and paste the entire code into your blog post or sidebar.

If you are installing it to your Blogger sidebar you will select Add a New Gadget in your layout page. Next you will select HTML/Javascript and paste your code. Click save and enjoy!

FYI: If you are wanting to display HTML code inside your box, such as code for a blog button, you will need to alter the code so your computer won't read the html code. To learn how to alter your HTML code GO HERE!!

No comments:

Post a Comment