Wednesday, July 10, 2013

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:

 photo scroll_zps0c2b6ea3.png
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!

0 comments:

Post a Comment

Thanks for visiting! If you have any questions or concerns, please email me at bbrown@thesmallthings89.com! ~Bre