Creating widget areas in anywhere in blogger

Some of you have noticed that many blogs have AdSense Units or other ads and widgets in the header section of the blog, one of the most popular format being the AdSense 468x60 ad unit.

Unfortunately, we are not always able to add a widget inside the blogger header as a Blogspot user. The reason is that if we are using the Blogger default template, or any other customized template available on the internet, the header may be locked and have no option to Add a gadget inside it or just next to the blog title.

The reason why some bloggers are using AdSense ads or different widgets in a blog header is because of its maximum of number of impressions. For instance, when a visitor goes to a page, this will be the first place where he would give a first look and this makes it one of the hottest spots in our blog.
But how we can add something inside blogger header - be it a Adsense unit, a search bar, social sharing buttons, or a widget? By simply adding a section in the blog's header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

Important!
Before anything, we need to make a back-up of our Blogger template so that if we do make any major errors, we can easily restore the original working template to our blog.

To make a back-up, go to Template and on the right side - click on the "Backup/Restore" button.

Clicking on this button, will prompt you to save your existing template as an XML file to your hard drive. You can change the name of the file and choose the location to ensure it is easy to find if you need to use this later.

Resize blogger header

Step 1. Go to Blogger Dashboard, click on Template > Edit HTML

Step 2. Click anywhere inside the code area and open the search box by using the CTRL + F keys:

Step 3. Add this code inside the search box, then hit Enter to find it:

<b:section class='header' id='header' maxwidgets=

Note: If you can't find it, make sure that you have no space at the beginning of it.

Step 4. Replace class='header' with class='header header-left'.

Step 5. Now we need to find - CTRL + F - the following line of code:

<div class='header-cap-bottom cap-bottom'>

And just above this line, we should see two div tags:

</div>
</div>
<div class='header-cap-bottom cap-bottom'>

Step 6. Paste the HTML code below just above these div tags:

<div style='clear:both;'/>

Now, let's go one step forward and add an extra gadget section within our Blogger header!

Add a new gadget/widget element to the Blogger Header

Step 7. Just above <div style='clear:both;'/> (step 6)... add this code:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Step 8. Now find this tag:

    </head>

Step 9. Just above the </head> tag, add this CSS styling:

<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
}
</style>

Note: if your widget is wider than overall area that both elements should occupy, then you might need to add the margin-right property to move it more on the right - see this example:

<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
margin-right: -20px;
}
</style>

Step 10. Press the Save Template button to save the changes.

Step 11. Go to Layout of your blogger blog and you should see two gadgets on the header area.
You don't have to worry if the Add a Gadget element doesn't appear side by side as every blogger template is different. They might be slightly up or down or sometimes they might overlap each other. Just make sure that you drag the newly created widget just below the Header section.

As I mentioned before, the header section could be one of the most valuable places in a blog. In that gadget/widget you can add anything like Adsense ads, search boxes, social sharing buttons, or you could, as well, sell that space for advertisement to boost your income.

http://helplogger.blogspot.in/2012/03/how-to-add-gadgetwidget-inside-your.html

Adding a section (with Add a gadget link) in Blogger layout

A  section is an area in Blogger layout that acts as a widget/gadget container. It is sometimes mistakenly addressed a page element. In Design > Page Elements tab, you can identify a section by the presence of an Add A Gadget link.
To add a widget, simply click the Add A Gadget link in your preferred location and proceed with selecting a widget. But what if your preferred location doesn’t have an Add A Gadget link? In other words there is no widget container there.


Well we can always make one, by adding a section tag in template HTML. Here is the code:

<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->

You are free to change the Id and class names.
In this tutorial we will add a section under the header. This is a perfect place to put horizontal navigation tabs. Here are the steps:

1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Since we are placing the new section under the header, we need to find the header code:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
   </b:section>
   </div>

4. Paste the section code right below the header code, like this:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
   </b:section>
   </div>
   <!-- New widgets container Start -->
   <b:section class='NewContainer' id='NewContainer'/>
   <!-- New widgets container End -->

5. Click Save Template.
6. Go to Design > Page Elements to view the result. You should see a newly added section under the header.
   
7. Now you can add all the widgets you want into the new container.
8. To style the section, you simply add a styling rule in CSS, like this: 

   #NewContainer { 
   /* add styling declarations here */ 
   }

   And place it before ]]></b:skin> line in your template.
   
9. That’s it, enjoy!
   

Getting your Blogger site to have Twitter Summary Cards

Getting your Blogger site to have Twitter Summary Cards

Twitter cards are a newish functionality that make it possible for you to attach media experiences to Tweets that link to your content. With a few added lines of HTML to your Blogger template, users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.

You might have read one of our recent posts regarding creating Rich Pins for Pinterest on your Blogger blog; the process for Twitter cards is very, very similar.



Step 1: search for this line

Run a search for this line of code in your Template
<b:includable id='post' var='post'>

Step 2: add the following

Below the line you found in Step 1, add the following:

<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>

Change @yourname to be your Twitter account handle, and www.yoursite.com to be your site URL.

Step 3: save your template

Congratulations! Test out and submit the new code with the validator and you should be good to go!

Link :  http://www.blogxpertise.com/2014/01/Twitter-summary-card-for-blogger-blog.html

7 Blogger Page Types: Analysis, Code Snippets, Data Matrix

If you're only using the pageType tag to identify the Page Type this guide is for you. The pageType tag only identifies four of the seven Page Types. This guide will show you how to identify all seven Blogger Page Types. I know it sounds confusing, just refer to the glossary. If that still doesn't help leave comments. I understand the terminology in this document could be confusing at first.

This data was collected in part using blogger2ools.

Contents

• Glossary
• Item Page Type
• Static Page Type
• Archive Page Type
• Home Page Type
• Search Page Type
• Label Page Type
• Index Page Type
• Putting It All Together
• Closing Thoughts

Glossary

Page Type

The type of a page. For example, Search Page Type. This term does not always end with Type. For example, terms like Search Page and Search Page Type mean the same thing and are used interchangeably in this document.

pageType tag

Note uppercase T and no space in between page and Type. Globally available layout date tag. The pageType tag returns a value of: item, static_page, archive or index.

Item Page Type

You must have Post Pages enabled. To quote the Blogger Dashboard, Post Pages give each of your posts their own unique web page. Post Pages are called item page types because the value of the pageType tag on Post Pages is "item".



The following code snippet works only for item page types:

<b:if cond='data:blog.pageType == "item"'>
<!--Item Page-->
</b:if>

Static Page Type

Last year Blogger added the ability to publish content as stand-alone pages. Static page types are identified as "static_page" by the pageType tag.



The following code snippet works only for static page types:

<b:if cond='data:blog.pageType == "static_page"'>
<!--Static Page-->
</b:if>

Archive Page Type

Ideally, any link you click from the Blog Archive widget would take you to an archive page type but that's not the way it works. The pageType tag will only return a value of archive for pages whose filename ends in "archive.html". (See also What is an archive filename on Blogger Help.) Most links generated by the Blog Archive widget follow this format. The remainder use query parameters. Any page formatted that way has a pageType value of index.

This affects Blog Archive widgets using the "Hierarchy" style because some of the links it generates are search queries. In general search queries (when the URL is your homepage followed by "search?" or "search/"), return a pageType value of index.

There's a similar problem with the navigation links generated by the Blog widget on archive pages. Instead of linking to other archive pages (pages that end in "archive.html"), they link to search queries. And once again, these search queries are the index page type. Thus, any customizations you have for archive page types are lost by the next page, and your visitors will have an inconsistent experience. This problem affects all three Blog Archive widget styles. Also, the search queries themselves are malformed half the time which leads to posts getting skipped or repeated.

I haven't solved that problem yet but I've been thinking of a workaround. First, only use the "Flat List" and "Dropdown Menu" styles when configuring the Blog Archive Widget. Second, omit navigation links from Archive page types. Third, add another Blog Archive widget (that only appears on archive page types), in place of the navigation links. And finally, modify the widget so it looks like it belongs there.



The following code snippet works only for archive page types:

<b:if cond='data:blog.pageType == "archive"'>
<!--Archive Page-->
</b:if>

Home Page Type

(I usually write homepage as one word but to stay consistent with this document I'm writing it as two words.) The home page is the default URL of your blog. You can find it under Setting > Publishing in the Blogger dashboard. The blog.homepageUrl global tag returns the value of your blog's home page.



The following code snippet works only for home page types:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--Homepage-->
</b:if>

Search Page Type

The search page type displays the results of a search performed using Blogger's original built-in search form. (Not to be confused with the Search Box gadget.)

You should know that the built-in search is extremely limited: it only searches from a pool of the most recent posts, older posts are ignored and labels are ignored. In the future I might transition to the search box gadget but I'm still exploring my options.

The blog.searchQuery global tag returns the value of the search query.



The following code snippet works only for search page types:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<!--Search Page-->
</b:if>
</b:if>

Label Page Type

Label Pages are generated by the labels widget. You may only view one label at a time. There is no way to combine multiple labels for viewing, unfortunately. There is a minor bug with the labels widget which you can read more about on the Labels Widget section at blogger2ools. I've also posted a fix for it.

The blog.searchLabel global tag returns the value of the label name.

The RSS feed for a label is formatted as follows:
(home page URL)feeds/posts/default/-/(label name)



The following code snippet works only for label page types:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<!--Label Page-->
</b:if>
</b:if>

Index Page Type

By order of elimination we are left with the index page type. As I stated back in the Archive Page Type section when a Blogger page is generated using query parameters the pageType tag returns a value of index. So basically anything that isn't one of the six previously mentioned page types we'll consider to be an index page.



The following code snippet works only for index page types:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery == ""'>
<b:if cond='data:blog.searchLabel == ""'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!--Index Page-->
</b:if>
</b:if>
</b:if>
</b:if>

Putting It All Together

The following code snippet comes directly from our own template here at MY STADY. Use this snippet as a guide for when customizing multiple or even all seven Blogger Page Types. If you're SEO-obsessed this is probably what you're looking for. We use this snippet in the header and Blog Widget portion of our template code. For other sections it's not as important to customize seven different views.

<b:if cond='data:blog.pageType == "archive"'>
<!--Archive Page-->
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<!--Search Page-->
</b:if>
<b:if cond='data:blog.searchLabel'>
<!--Label Page-->
</b:if>
<b:if cond='data:blog.searchQuery == ""'>
<b:if cond='data:blog.searchLabel == ""'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--Homepage-->
<b:else/>
<!--Index Page-->
</b:if>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<!--Item Page-->
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<!--Static Page-->
</b:if>

Resolve javascript parsing error in blogspot blogger with CDATA code

Simply use code like this in your javascript code

<script type="text/javascript">
//<![CDATA[ 

your javascript code here

//]]>
</script>

Tip :

Sometimes you will need this :

 /*<![CDATA[*/
 /*]]>*/

and not only this :

 <![CDATA[
 ]]>

Styling blogger pages individually

Finally Blogger has come up with the much awaited static pages feature. Blogger simply refer to them as Pages. You can create up to 10 static pages, perfect for your About Me and Contact pages.
However, a Page will look just like homepage or any other page. Would it be nice if you can change the layout, making them look more like pages and less like posts? Maybe you want the sidebar or footer removed? Well good news, you can. Look at a sample Page here, compare it with the homepage, and notice the difference. The same goes to my SEO Tools, FAQs and Support pages.
Okay let’s start with the tutorial,

I. Applying the conditional styling

1. Go Dashboard > Design > Edit HTML.
2. Back up your template.
3. Find this code in your template HTML:
   • <body> -if you are using Layout templates, or
   • <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> -if you are using Designer template.
4. Copy the code below and paste it right after the code step 3:

   <!-- Static page styling Start-->
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <style>
   .blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
   #main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
   </style>
   </b:if>
   <!-- http://www.bloggersentral.com -->
   <!-- Static page styling End -->

   For Designer template, replace code line 5 with:
   
   

   .main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}

5. What goes into the <style>…</style> tags are CSS rules. It depends on what we are trying to change and differs between templates. In the code above, we
   • Remove blog pager, blog footer, post footer, feed links and sidebar. This is done in code line 4.
   • Widen the post area to fill up the spaces vacated by the sidebars. This is done in code line 5. If you want to do this too, find out what’s your header’s or header-wrapper’s width and apply it here.

II. Identifying and adding your own elements to the code

Your elements’ Ids and classes maybe different from the ones given in the code above. You can find yours by going through your template code. To get an idea what to look for, here’s a sample code snippet, taken from Blogger Sentral’s template:

<div class='side-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Popular Posts' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

As you can see an element, be it a division, a section or a widget is assigned an ID and/or a class. To remove it from the Page, simply add the ID or class to the selector list in code line 4 in step 4. For an ID you need to add “#” prefix and for a class, add “.” as prefix.

Update: There is an easier method of finding Blogger widget and section Id’s.

For example, if you want to remove the “Popular Posts” widget, all you have to do is add #HTML4 to the selector list; To remove the the whole lower left sidebar (which holds the Popular Posts and Labels widgets), add #sidebar2 to the list.

III. Styling pages individually

(added Oct. 2010)

Using the static_page conditional tag as explained above will apply the styling on all static pages. Now what if you want to style only one page. Let’s say for instance you want to change the background color of your About Me page to pale green, while leaving all other pages as they are. Can you do that?
Yes you can, and it’s easier than you might think.

1. Go to Postings > Edit Pages and select the About Me page.
2. Switch to HTML mode.
3. Insert you CSS code on top of the page content, like so:
   

   <style type="text/css">
   .content-inner {background-color: palegreen;}
   </style>
   
   YOUR STATIC PAGE CONTENT HERE

4. Yes, you don’t need any conditional tag. This code only resides inside that one page, therefore it won’t affect other pages.

Enjoy!

Deferent Layouts in Each Page of Blogger Template is Easy Now

This neat little tweak is similar to the  Hide Widget/Gadgets tweak I posted a couple of weeks ago – only with this tweak you can change the layout, the background, or pretty much whatever you want. This is more of a tutorial then just a copy and paste tweak because every template is different and I cannot give you a universal code that will work for everything. Instead I am going to walk you through this tweak and show you how it works. Should you encounter any problems just drop me a line in the comments.
1. Go to Design --> Edit HTML.
2. Search for (CTRL+F opens up a text bar where you can insert the code you are looking for):

</head>

3. Directly before that tag you will want to insert one of the codes below, depending on which pages you want the layouts to be different on. (These codes are called „Conditional“ tags.)
Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Post Pages:

<b:if cond='data:blog.pageType == "item"'>

Static Pages:

<b:if cond='data:blog.pageType == "static_page"'>

Specific URL:

<b:if cond='data:blog.url == "Blog Post URL"'>

Make sure to replace the text in blue with the URL of the post of your choosing.
4. Now you need to add a style tag and the CSS rules you want to change after the line(s) of code you just added.
Example:

<b:if cond='data:blog.pageType == "static_page"'> <style>
body { background:url(Image URL);}
</style>
</b:if>

I colored everything so I can break it down for you more easily. The line in green is the Conditional tags code. It needs to be closed with a </b:if> tag. The line in orange is to designate a CSS rule followed by a closing style tag.  The line in red is the CSS rule its self. You can add multiple CSS rules between the style tags.
Something like the code above would change the background for the older templates. For newer templates you will need to use a different code (you will find it in my next post).
Lets say you are using an older template and you want the layout for the static pages to differ from the rest of your blog.

<b:if cond='data:blog.pageType == "static_page"'> <style> body { background:url:(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)repeat fixed center center;}
#sidebar-wrapper { display: none;}
#main-wrapper { width: 700px;} </style> </b:if>

With the code above you would change the background, the sidebar and all its gadgets would be hidden, the main blog post area would be wider to fill the space for the hidden sidebar. All this would only take place on the static pages, the rest of the blog would appear as normal.
The possibilities for what you can do are endless. I might suggest experimenting with it on a test blog before applying it to your main blog. If you have knowledge of CSS then you can figure it out pretty easily. On the new designer templates it might be a bit more difficult to do, but it all works the same. You just need to figure out the CSS rule to add.
That´s all!
Good luck!

Different Backgrounds for Different Pages

Now that you can easily add multiple pages to your Blogger or Blogspot blog, you might have wondered if you can have a different background for each page, thus giving your pages their own unique look. Good news! You can! And this tutorial will show you how to do it in just one easy step. This tutorial was shared with me by Carolyn M. @ Pat Loves Carolyn. Thanks so much for the cool tip, Carolyn!! :)

{ demo }

See this tutorial in action on my Blogger Test Blog. Click on the Home and Recipes links up in the top navigation bar and see how they have different backgrounds! :)
Ready to try it yourself? First you’ll need pages on your blog. Here’s a super quick tutorial to get you all set up. It also includes tons of page ideas to get you started! :)
Next you’ll need a background. Here are my top 4 favorite free background sites:

Shabby Blogs
The Cutest Blog on the Block
Allie Brown’s Layouts
My Style Backgrounds

Or you can make your own personalized background using my tutorial right here! :)

{ tutorial }

From your Blogger Dashboard, click on Design, then Edit HTML. Look in that box of code and scroll down until you see </head>
(Quick Tip: Click CTRL-F to search for </head> to easily find it in all that code)
Just above that, copy and paste this:
<b:if cond='data:blog.url == &quot;http://YOURBLOG.blogspot.com/p/PAGE.html&quot;'>
<style>
body {
background-image: url(http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>
Two things to change:
1. http://YOURBLOG.blogspot.com/p/PAGE.html
Change this to your page’s link – the link to your new blog page where you want the custom background to appear. This is the address up at the top of the screen in the address bar.
2. http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG
Change this to the link to your background image. If you are using Photobucket to host your background, it’s the Direct Link.
Click SAVE TEMPLATE and that’s it!! You’re done!!

Note: As always, be careful- one tiny little wrong space, quotation mark, or typo in the code can cause the whole thing not to work, so if it’s not working for you, double and triple check your work for typos! :) Make sure your code looks exactly like mine, except with your page and background links! :)
If you got it working on your blog, leave me a link! I’d love to see it! :)

Thanks for looking! :)

Add multiple-Colored Popular Posts Widget to Blogger

Popular post widget- Friends as we know popular post widget is most usable widget of blog we use popular post widget in our blog for show most popular post of our blog. Today we are going to add new classic colorful popular post widget in blog. I’m sure you’ll like this feature.

HOW TO ADD COLORED "POPULAR POSTS" WIDGET IN BLOGGER.

You just need add below given CSS in your blogger template.

Follow Below step for add this widget > 

Log-in to your blogger Account

Select your Blog.

Click Template (See below help Image)

After this Click to Edit HTML option. (See below help Image).

Next Step Now Find below code

]]></b:skin>

Now add  below code before  ]]></b:skin>  tag

} #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#ff4c54;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts3 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; padding:4px; border:1px solid #fff !important; background: #F2F2F2;}#PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-560deg) ; -webkit-transform: scale(1.2) rotate(-560deg) ; -o-transform: scale(1.2) rotate(-560deg) ; -ms-transform: scale(1.2) rotate(-560deg) ; transform: scale(1.2) rotate(-560deg) ; } See Blow Helping Demo Image where to add above code

Now save your template and go to Layout option remove your old popular widget and again add popular post widget. you have done it now check your blog.   Source: http://www.allbloggertips.com/2013/05/add-multiple-colored-popular-posts.html

Widgets to show in perticular pages, labels, posts

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

Step 1. Go to Blogger's Dashboard > Layout and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.

Step 2. Next thing to do is to go to Template and click on Edit HTML

Step 3. Click anywhere inside the code area and press the CTRL + F keys to open the search box

Step 4. Find the HTML of your widget by typing the widget's name in the search box - hit Enter.

Let's say that the title for one of my widgets is "Recent Posts". After searching for the widget's name, I will find a similar code in my template:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>  

This code represents the widget/gadget that I have added in the Page Elements location (Layout).

Step 5. After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:

To show the widget only in Homepage:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show Blogger widget only in post pages 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To hide Blogger widget in post pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType!= "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show the widget in a specific page
 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: Replace URL of the page with the address of the page in which you want the widget to appear

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

To show widgets only in Archive Pages

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

Note:  Pay attention each time you're adding a new address which should end up with .com, otherwise it may not work.

Step 6. After you have added the conditional tags, Save Template and view your blog.

That's it!