Computer Consultant

    

   - Browse Archives -      May 2008 June 2008 November 2009 December 2009 January 2010

In this article, we shall suggest some modifications to the CSS template to change the appearance of the Poll widget to something eye-catching and attention-grabbing. For example, we can add background colors or images to the Polls widget and change the font and border colors. These should draw the attention of your readers to the Poll and put some buzz into the Blog.

In case you are not aware, Blogger recently introduced a Polls Page Element allowing you to add a Poll to your sidebar. You determine the question and answers, and readers cast their votes within the Poll period set by you. It sounds like a nice feature, except that the look of this Poll widget is plain and unexciting as it blends into the background of your sidebar. With a bit of effort, we can change all that.

Set up a Poll

To set up a Poll, go to Template -> Page Elements and Add a Page Element in your sidebar. Select “Poll”. Enter the Question and insert all the possible answers. Tick if you allow multiple answers and set a date for the Poll to end. When you refresh your Blog, this is the Poll widget you see.



It follows the sidebar styles and blends with the sidebar background color. It is plain and many readers may not even notice it there.

Add Border and Colors

Let us now add a border and background color to it. Go to Template -> Edit HTML, scroll to any early part of the CSS template and insert the following code (shown in red). For easy reference, let's put the code under /* Sidebar Content */

/* Sidebar Content */ #Poll1{ background:#FFFF00; border:3px solid #736AFF; width:150px; padding:0 10px; }

Note:

1. When a Poll is created, Blogger will assign an ID to the widget. If this is the only poll, it will be named Poll1. If there is another poll in the Blog, that second poll will be named Poll2 and you should change the reference accordingly.

2. We have given it a yellow background color (#FFFF00). Change it to any other color by inserting the relevant color code from our Color Code Chart.

3. By default, there is no frame border to the widget. To make it stand out, we added a border of 3px. You can reduce it to 1px if you want a narrow border. Also, the color of the border is blue (#736AFF) in this example.

4. If the Poll widget is placed in the sidebar, it takes up 100% of the sidebar width. To narrow it, we can insert a width setting.

5. The padding is to give a space of 10px to the left and right of the contents, so that the border does not come too close to the wordings.

After saving the above modification to the template, this is the new look of our Poll widget. Doesn't it catch your attention right away?



Change Title Font

If this is not enough, let us change the font of the Title to make it different from the other widgets in the sidebar. Where we inserted the earlier code, we add this other definition (shown in red) into the template:-

/* Sidebar Content */ #Poll1{ background:#FFFF00; border:3px solid #736AFF; width:150px; padding:0 10px; } #Poll1 h2{ text-align:center; font-size:140%; color:#F87431; font-family:arial; font-weight:bold; }

Note:

1. The text-align property shifts the Title to the center. If you are happy having the Title aligned to the left, remove this line.

2. You don't need a font-size that large. This is to show you how you can adjust the font-size if you want to.

3. Again, you can assign a different color code to the color of the text.

4. Under font-family, you can change the font face of the Poll Title. Usual font families in Blogger include – arial, courier new, georgia, lucida grande, times new roman, trebuchet ms, verdana.

5. We made the Title bold by adding a font-weight. If you want it in italic, you can add another line of code - font-style: italic; - before the sign }

With the above code, readers should clearly see the new Poll widget:-



Add Background Image

Instead of a background color, we can use an image as a backdrop to our Poll widget. First create an image and upload it onto a free server like Google Page Creator and Google Groups. You may also refer to our rather comprehensive list of free Image Hosts and File Hosting Services in the article on Manage Blogger Image Storage Space. Take note of the IMAGE URL.

Next, go to Template -> Edit HTML and insert the background image as follows:-

/* Sidebar Content */ #Poll1{ background:url(IMAGE URL); border:3px solid #736AFF; width:150px; padding:0 10px; } #Poll1 h2{ text-align:center; font-size:140%; color:#F87431; font-family:arial; font-weight:bold; }

The IMAGE URL is the address of the image uploaded onto the web server. There are more attributes you can add to adjust the image position or repeat it. If you need to know more, you can refer to our guide at Background Image for Blogger Template.

With a background image, the Poll widget can look truly outstanding and inviting like this:-



Finally, together with this article, we have created a new Poll to ask you what Blogger template you are using. Although we are using the Minima template, we have received many queries by users pertaining to their other templates. To reply to their queries, we have also created test blogs in other Blogger template formats. Some of our articles, such as the ones on Blog Title alignment and Three Columns Templates, are catered to different template users. If you could let us know what Blogger template you have, we could bear that in mind in our future articles and discuss the changes to be made in relation to these other templates. Have fun creating and designing your own Poll widget!