Scrollbar in selections sidebar

If you wan't to modified your template to include an additional selection sidebar, the style that can be inserted into the template will be this:-

Login and go to Template - Edit HTML. Insert this piece of code. Depending on which sidebar your widgets are at (#newsidebar or #leftsidebar or # rightsidebar etc).

.#newsidebar .widget{ height:200px; overflow:auto; }

* Sidebar Content ----------------------------------------------- */ #newsidebar .widget{ height:200px; overflow:auto; } .sidebar { color: $sidebartextcolor; line-height: 1.5em; }

Scrollbar in All Widgets

When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

Login and go to Template - Edit HTML. Insert this piece of code.

.sidebar .widget{ height:200px; overflow:auto; }

In this example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

/* Sidebar Content ----------------------------------------------- */ sidebar .widget{ height:200px; overflow:auto; } .sidebar { color: $sidebartextcolor; line-height: 1.5em; }

Uploading animated gift to bloggers

Upload via bloggers photo uploader	Upload via free photo hosting

Examples site

If you upload the animated image direct via the Blogger photo uploader, the animated image will no longer be animated as you can see from the first image which was uploaded via the Blogger photo uploader.

If you want the image to remain animated, you must first host the animated .gif image with the free images hosting, I prefered to use photobucket .

After upload your pictres to photobucket, you can see the above diagrams. Copy the HTML code and paste it to your blog post or your html page elements.

Pictures open in new URL

Original Uploading Pictures	Pictures open in new windows	Pictures open in new url

Here is the trick when you upload year image you would see has part of code that would look something like below :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/intechclan.jpg"><img style="cursor: pointer;" src="http://4.bp.blogspot.com/intechclan.JPG" alt="" id="BLOGGER_PHOTO_ID_5165934739229656114" border="0" /></a> <div style="text-align: center;">Original Uploading pictures

changes the codes, as per below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL Address"> <img style="cursor: pointer;" src="http://4.bp.blogspot.com/intechclan.JPG" alt="" id="BLOGGER_PHOTO_ID_5165934739229656114" border="0" /></a> <div style="text-align: center;">Original Uploading pictures