Popular Posts Widget For Christmas

The Christmas countdown has begun together with piece homes are decorated amongst colorful lights together with the sweetness aroma of pino trees, there's no argue why nosotros wouldn't decorate our Blogspot weblog amongst Christmas bells adjacent to the Popular Posts widget for Blogger!

So, today I was playing simply about a flake amongst CSS together with I was thinking that it would hold upwards cool to add together some fresh styles to the Popular Posts widget inwards such a means to await simply produce for the forthcoming Christmas holiday.

To encounter a demonstrate for the Popular Posts widget for Christmas, delight view the demonstrate blog:

Demo blog

How to Add Popular Posts Widget amongst Christmas Bells inwards Blogger

Step 1. Log inwards to your Blogger Dashboard, hence teach to 'Template' together with click the 'Edit HTML' button:

Step 2. Click anywhere within the code expanse together with press the CTRL + F keys, hence search for this tag:

</head>

Step 3. Just inwards a higher identify the </head> tag, add together the next CSS code:

<style>
#PopularPosts1 .item-thumbnail:before{
display: block;
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87TzuJe7sA0dOMNeUfJISGWVVOThMjTQCEBbvJIZJtRzXAj9KXyyLpEflB3l8I_-rMTXejCs4wTdcvdcFhe6OR99WXsJvOXm6-4mCPJI_lEgXaZ5j5qBgmNXePRblzfUTJzPbgB-BvAlE/s1600/bells.png');
margin-left: -15px;
margin-top: -5px;
z-index: 2;
position: absolute;
}
#PopularPosts1 .item-thumbnail img{
float:left;
margin:5px;
padding: 2px;
border: 6px company #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 ix */
  -moz-transform:rotate(20deg); /* Firefox */
  -webkit-transform:rotate(20deg); /* Safari together with 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 ix */
  -moz-transform:rotate(-40deg); /* Firefox */
  -webkit-transform:rotate(-40deg); /* Safari together with 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 ix */
  -moz-transform:rotate(0deg); /* Firefox */
  -webkit-transform:rotate(0deg); /* Safari together with Chrome */
  -o-transform:rotate(0deg); /* Opera */
}
#PopularPosts1 ul li:nth-child(even):hover{
  -ms-transform:rotate(0deg); /* IE ix */
  -moz-transform:rotate(0deg); /* Firefox */
  -webkit-transform:rotate(0deg); /* Safari together with 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' push clit to relieve the changes together with you're done. Enjoy!

Also, delight cheque out this tutorial on how to add together falling snowflakes inwards the background of a Blogger blog.