Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 21, 2007

Digg This Story

Customize and Modify Poll Widget

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.

Customize and Modify Poll Widget

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?

Customize and Modify Poll Widget

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:-

Customize and Modify 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:-

Customize and Modify Poll Widget

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!

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

22 comments:

Amanda said...

You're a lifesaver! My poll was really hard to read with my light-colored sidebar and I've fixed it for the most part.

Any idea how to change the body text or results colors?

bizwhiz said...

Hi Amanda

The body and results text and font are fixed. Will look into it. In the meantime, you may want to change the background color to add contrast to the text.

Saige said...

Hi, my poll is not located at the sidebar...well, the thing is I've added a page element within the blog post and I've added the poll there and I don't know where I should insert the code...any idea?

bizwhiz said...

Hi Saige

It can be anywhere between <head> and </head>

Insert it after a curly brace } The reason why we put it under /* Sidebar*/ is for easy reference, so that we can locate the code in future. You can put it under /* Posts*/ if you'd like.

ekgheiy said...

Hi there,

How do you change the text color of the "Show Results" text? I can find it in the code. :\

Thank you much!!

bizwhiz said...

Hi ekgheiy

As we have explained, the other contents and text in the widget are fixed.

Fleurette said...

hello!

How can I change the text size? When I use font-size:140%; the only thing which changes is the title!

Thank you!

bizwhiz said...

Hi Fleurette

You are right. The text size remains the same.

Billy said...

Hi, bizwhiz.

Any devolopment on being able to change the poll's results font, size, colour etc?

MamaMay said...

This is helpful. I only have one issue, I can't seem to find a background color that will fit my needs. Can you look at my blog and maybe help me out?

Daniel said...

Hi - I work for polls boutique, and we offer a blog widget that allows you to post polls on your blog using pictures, video and audio, and full customization of the widget with your own colors, font, and logos. I think it can be seen as a viable option for people who don't want to start messing around with css code. The widget can even be transparent, so it looks like an integral part of the blog.

Go here for examples of poll widgets.

MusicMaster said...

Thank you! I was very frustrated but this was such a simple fix. I appreciate it!

Sakimichi said...

Thank you so much for this tutorial~!
http://matsuridaisuki.blogspot.com/

Billy said...

bizwhiz, you say that the poll results etc cannot be modified, but in your own template poll, you have clearly managed it. So how did you do it if it can't be done? I'm not being arrogant here, I'm just puzzled.

My results show up in Times New Roman, but you appear to have your's in Verdana, which is what I want.

Thanks

Kristy Blog said...

Thanks for the poll tips/code - it was helpful, but it sucks that you can't change the body font - mine doesn't even match my blog! ugh!

Jarron said...

Is it possible to add a comment box to a poll, if so, how could I do that?

Long YC said...

Hi, what should I do if the poll is not working? Whenever the "vote" is clicked, the poll will turn into "HTTP400 The Webpage Cannot Be Found". I didn't modify anything about the poll, any idea on what happened?

One Song said...

What if I want to add an image background to another page element? like say a blog roll or just some text? really what i want to do is use an image of a polaroid frame (the center is transparent) as the background so it looks like the widget info is inside of it. is this possible?

sam said...

Hi. I am not able to change the font. Can anyone help me?

========
sam
Did you see it? One more time? You won't get faked out here!
http://www.SelectWealthSystem.com/?t=wc

Alberto said...

bizwhiz,

can you tell me wheter it is possible to place a poll in a single post? Is there a way of creating a poll with HTML/Javascript?

thanks anyway

Alberto

Jackson Rubem said...

I like his site a lot. You gave us important teaching about poll. I learned and I used in my site O Brasileirinho

Anastasia said...

Do you know how to take the "show results" off the poll? So that you can only see the results once you've actually voted?