Add Scrollbars to Blog Widgets

Document Sample
Add Scrollbars to Blog Widgets Powered By Docstoc
					Add Scrollbars to Blog Widgets




This tutorial shows you how to create widgets or boxes with
scrollbars. 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.

The “overflow” style property

Let
us first explain what the code is about. We use the “overflow” property
to create the scrollbars in CSS or the stylesheet. There are several
values that can be assigned to it, although not all are useful for our
purposes.

1. overflow:visible

This
is the default value. The extra content is either rendered outside the
box or the length of the box is extended to include the extra content.
Don't bother to use this in Blogger blogs because you will see the
contents of the widgets overlapped like this:-




2. overflow:hidden

This
will cut off the extra content that overflows and there will be no
scrollbar to the box. It doesn't serve our purpose as well.
3. overflow:scroll

The content is clipped but there will be scrollbars at the sides.




4. overflow:auto

We
like this attribute. Basically, it tells the browser to display a
scrollbar only when necessary i.e., when the content overflows the
width and height settings.




Scrollbar in All Widgets

Now
that we know what the code does, we can apply it to our template. If we
have many widgets in our sidebar, we can specify a fixed height for all
the widgets. Carefully planned, our layout can look very neat since all
the widgets will have the same height.
Login and go to Template
-> Edit HTML. Insert this piece of code. For easy reference, we have
added it under the /* Sidebar Content */ :-

/* Sidebar Content */
.sidebar .widget{
height:200px;
overflow:auto;
}




In
our 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.

Scrollbar in Widgets of One Sidebar

Let
us assume for our discussion that you have modified your template to
include an additional sidebar using our Three Column Template guides.
We may have all the AdSense Ads in one sidebar and we want to add the
scrollbars into the widgets of the other sidebar. The style that can be
inserted into the template will be this:-

/* Sidebar Content */
#newsidebar .widget{
height:200px;
overflow:auto;
}
Or this:-

/* Sidebar Content */
#sidebar .widget{
height:200px;
overflow:auto;
}


depending
on which sidebar your widgets are at. Preview the template and if it is
what you want, save the Template and refresh your Blog.

Scrollbar in One Widget only

We can add the scrollbar only to one or several of the widgets. To do that, we must first
know the ID
of the widget. When we are at Template -> Edit HTML, scroll towards
the bottom of the template code. You will see something like this:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'
preferred='yes'>
<b:widget id='LinkList1' locked='false'
title='General' type='LinkList'/>
<b:widget id='HTML1' locked='false' title=''
type='HTML'/>
<b:widget id='Label1' locked='false'
title='Label' type='Label'/>
</b:section>
</div>


In
this example, we have added a Link List Page Element into our Sidebar
and the ID for this widget is “Linklist1”. If we have more link lists,
the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have
inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The
third widget we added is a Label list and the ID is “Label1”. Look at
your template and identify the widget. Take note of the widget ID.

With the ID, we can now add the overflow property into the stylesheet under /* Sidebar
Content */:-
/* Sidebar Content */
#Label1{
height:200px;
overflow:auto;
}




This will add the scroll-bar to the Labels widget only without affecting the other widgets.
Insert the relevant ID of your widget into the portion shown in red.

Scrollbar in All Widgets except One

A
further variation is to add scrollbars to all the Widgets except one or
two. As mentioned earlier, AdSense widgets should not have scrollbars
and it might be your intention to have scrollbars in the rest of the
widgets.

Follow the guide above to insert scrollbars into all
the widgets. After that for the ones that you do not want scrollbars to
appear, specify a bigger value for the height:-

/* Sidebar Content */
#AdSense1{
height:600px;
}
For
example, if your AdSense unit is a 160x600 Vertical Wide Banner, put
the height of the widget as 600px. Since the contents fit nicely into
this size, the scrollbars should not appear. Change the widget ID accordingly to point to
the widget that you want to exclude and adjust the height value.

Scrollbar for Links and Labels

We
need scrollbars usually for Label lists and Blogrolls created using
Link lists because these are usually lengthy. You may have noticed that
using the above codes, the entire widget is included in the scroll.
Supposing we want the title to remain static and have a scrollbar only
for the links or labels, we can insert a code as follows (remember to
enter the relevant ID into the part shown in red):-

/* Sidebar Content */
#LinkList1 ul{
height:200px;
overflow:auto;
}




Scrollbar for Blog Posts

Should you want the scrollbars for each of your blog posts, scroll to where you see this
code and add the portion (shown in red):-

.post {
height:200px;
overflow:auto;
}


Scrollbar for text within Blog Posts

Perhaps
you might not want to have scrollbars for all the Blog Posts, but only
for a piece of text within a Blog Post. You can follow the steps in
this guide to insert scrollbars to text within the post.

Scrollbar for Long Text

If
you have a long piece of text like those found in the usual Terms of
Service, User Agreements, Rules, Privacy Policy, etc., scrollbars will
be very useful in minimizing the text area and yet allowing readers to
view the full contents.

Under Template -> Edit HTML, /* Sidebar Content */ , define a class as follows:-

.scrollingtext {
height:200px;
width:200px;
border:0;
overflow:auto;
}


What
we have done is to specify that the text will be contained in a box
with scrollbars automatically added if the text overflows the 200px x
200px area. The values of the border, height and width can be changed
to suit your needs.

We can now type the text. This text can
either appear in a Blog Post, or as an element in the Template. If it
is in a Blog Post, after you have typed the TEXT in the Post Editor, switch to “Edit
HTML” mode and insert these tags (shown in blue):-

<div
class="scrollingtext">TEXT</div>


The TEXT
can be inserted directly into the template via Template -> Page
Elements -> Text. Similarly, if you have typed it in the rich editor
mode, you can click the “Edit HTML” link at the top right corner and
insert the above tags.

After publishing the post or saving the page element, you will be able to see the TEXT
within a box and the scrollbars automatically inserted.

Posted by abc at 8:27 AM 0 comments
Labels: BLOGGER TIPS

Add Page Element to Blogger Header and Blog Posts

You would notice under Template -> Page Elements that there are
options to add a Page Element to the sidebar and the footer. However,
there is none for the Header and Blog Posts. Having a Page Element
option to these latter two is useful. You may want to add a picture at
the top, or a Google Adsense ad at the top or bottom of your blog posts.
To
have an “Add a Page Element” option, under “Template”, click “Edit
HTML”. Scroll down and towards the bottom, you will see these lines:-




<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>


Change them to this:-

<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='3' showaddelement='yes'>


This will give you 2 more page elements that you can add to your Header. You can
increase this number if you want.

Right after that are these lines:-

<div id='main-wrapper'>
<b:section class='main' id='main'
showaddelement='no'>
Change them to this:-

<div id='main-wrapper'>
<b:section class='main' id='main'
showaddelement='yes'>


You are now able to add Page Elements either before or after your Blog Posts.




Note:

1.
In different templates, the 'header-wrapper' may be called
'header-wrap' or 'header' and so on. Scroll to where you see an option
called showaddelement and you can probably figure out the rest.

2.
We realized that in some templates like the Dots Template, there is no
separate Header at the top. Instead, the Header is contained in the
left sidebar and the main posts appear on the right. This is the
template layout and it is probably the reason for your choosing this
design. In such templates, you can Add Page Elements to the
'main-wrapper' but not at the Header. Nevertheless, you can still look
at the guidelines below to Add Page Elements in the 'crosscol-wrapper'
part of the template. This will give you the option to Add Page
Elements right on top of both the sidebar and main posts. You can
upload images, insert AdSense code, text or other scripts into this
section.

Update:
There
is an additional position where you can add Page Elements to. This is
between the Header and the Blog Posts. When you add a Page Element in
the Header section, it follows the Header styles (like font, color and
margin settings) and similarly, if you add a Page Element in the Blog
Posts section, it follows the styles defined for the Blog Posts. You
might want to include a Horizontal Menu or Navigation Bar or AdSense Ad unit just
below the Header but before the Blog Posts and sidebars.

To do that, scroll to here and change to the value (shown in red):-

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-
align:center'>
<b:section class='crosscol' id='crosscol'
showaddelement='yes'/>
</div>


This
should appear in all new Blogger templates. If you don't see this in
your template, you can also add the entire code (shown in green).
When you view your Template -> Page Elements, you should now see a
new section in between the Blog Header and Blog Posts where you can
insert Page Elements.




Once
these are done, Save the Template. Click the “Page Elements” tab, and
you will now see “Add a Page Element” option at the top of the Header
and Blog Posts. Assuming you decide to add the element below the Header
or Blog Posts, not to worry. Simply create whatever element you want
and save. Next, drag and drop the element to the bottom of the Header
or Blog Posts. Click the Save button at the top right hand corner of
the page, and your settings have been saved.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:16
posted:12/1/2010
language:English
pages:11