Tutorial- How to add a scrollbar for blog buttons

I am going to show you have to add a scrollbar into your sidebar with blogger. It is so simple and easy and it makes your blog less cluttered. =)  Look over to the bottom - right and you will see mine.  Or I made one with the image above too!
It will look like this:

Step 1- Go grab the html for your image(s)! If you want to add a linked image use this code:

<center><a href="Page you want the code to link to">
<img src="direct link to the image" />
</a></center> 
IF you want to have JUST an image then go to your photo hosting ( photobucket is a good one) and use this:

<center>Insert HTML of image code here</center>

Copy and paste into your notepad or wordpad.

Step 2- Go to your blogger dashboard and click layout:

STEP 3- Click ADD GADGET and then click on HTML JavaScript.

You will now see a blank box like this:

Step 4- NOW here is the code you need to paste into the box.

<center><div style="height: 150px; overflow: scroll; width: 150px;">Insert one of the codes that I have you in step 1 </div></center>

Now you can edit the height and width but in a sidebar I do not recommend going over 200X200. =] If you just want the scrollbar in the post you can go bigger of course!   If you choose more than one image I would use <center>image code</center> tags for them all. =) It really makes them all aligned and neater.

STEP 5-You can choose to name your scrollbar but I chose not to. Click save and position wherever you want on the sidebar. =)

You can click preview to see if it is where you want it or click save arrangement.

You will now have a beautiful scroll bar with your buttons of images you want to display. Play with the height and width and see what fits your blog the best. PLEASE leave a comment and let me know if you need any help. Thank you!  If you like this post please take a second and "pin" it to Pinterestby hovering over the first photo, and click pin on the left side of it or click a share button below and share!