Popular Posts Widget for Christmas

The Christmas countdown has begun and while homes are decorated with colorful lights and the sweet smell of pine trees, there’s no reason why we wouldn’t decorate our Blogspot blog with Christmas bells next to the Popular Posts widget for Blogger!

So, today I was playing around a bit with CSS and I was thinking that it would be cool to add some fresh styles to the Popular Posts widget in such a way to look just ready for the forthcoming Christmas holiday.

popular posts widget, blogger gadgets

To see a demo for the Popular Posts widget for Christmas, please visit the demo blog:

How to Add Popular Posts Widget with Christmas Bells in Blogger

Step 1. Log in to your Blogger Dashboard, then go to ‘Template’ and click the ‘Edit HTML’ button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys, then search for this tag:


Step 3. Just above the </head> tag, add the following CSS code:

#PopularPosts1 .item-thumbnail:before{
display: block;
content: url(‘http://4.bp.blogspot.com/-OqAKWHh9kak/UrieOnsdyxI/AAAAAAAAFpg/jX_ya4oT8q8/s1600/bells.png’);
margin-left: -15px;
margin-top: -5px;
z-index: 2;
position: absolute;
#PopularPosts1 .item-thumbnail img{
padding: 2px;
border: 6px solid #FED74C;
height: 72px;
width: 92px;
position: relative;
background: #F11C25;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
transition: opacity 1s ease;
#PopularPosts1 ul li:nth-child(odd){
  -ms-transform:rotate(20deg); /* IE 9 */
  -moz-transform:rotate(20deg); /* Firefox */
  -webkit-transform:rotate(20deg); /* Safari and Chrome */
  -o-transform:rotate(20deg); /* Opera */
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
#PopularPosts1 ul li:nth-child(even){
  -ms-transform:rotate(-40deg); /* IE 9 */
  -moz-transform:rotate(-40deg); /* Firefox */
  -webkit-transform:rotate(-40deg); /* Safari and Chrome */
  -o-transform:rotate(-40deg); /* Opera */
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
#PopularPosts1 ul li:nth-child(odd):hover{
  -ms-transform:rotate(0deg); /* IE 9 */
  -moz-transform:rotate(0deg); /* Firefox */
  -webkit-transform:rotate(0deg); /* Safari and Chrome */
  -o-transform:rotate(0deg); /* Opera */
#PopularPosts1 ul li:nth-child(even):hover{
  -ms-transform:rotate(0deg); /* IE 9 */
  -moz-transform:rotate(0deg); /* Firefox */
  -webkit-transform:rotate(0deg); /* Safari and Chrome */
  -o-transform:rotate(0deg); /* Opera */
#PopularPosts1 ul li{
display: inline-block;
float: left;}
#PopularPosts1 .item-thumbnail{
width: 70px;
#PopularPosts1 li{
margin-right: 15px;
#PopularPosts1 .item-snippet, .item-title{
display: none;
} </style>

Step 4. Click the ‘Save Template’ button to save the changes and you’re done. Enjoy!

Also, please check out this tutorial on how to add falling snowflakes in the background of a Blogger blog.

Related Posts

Rounded Corners and Shadows for Images using CSS

Here are some unique border styles that you can apply to blogger images by using the border-radius property and defining either all four corners simultaneously or applying…

Add a forum on your Blogger blog with Nabble

Forum is a platform where visitors can interact with each other and discuss different hot topics. There you can create various topics for getting comments or suggestions…

Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says “Older Posts”, “Newer Posts” and “Home” and help us to move through…

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show…

Share Blog Posts in Social Media using AddThis

AddThis is the most complete social sharing service allowing you to share your posts in more than 270 different social networks. If you want to use the…

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

This drop down menu made with CSS only is a horizontal menu with sub-tabs and a rounded search bar on the right side. A menu like this…

Leave a Reply

Your email address will not be published.