Popular Posts Widget For Christmas

The Christmas countdown has begun together with land homes are decorated amongst colorful lights together with the sugariness odor of pino trees, there's no argue why nosotros wouldn't decorate our Blogspot spider web log amongst Christmas bells adjacent to the Popular Posts widget for Blogger!

So, today I was playing or thence a fleck amongst CSS together with I was thinking that it would live on cool to add together some fresh styles to the Popular Posts widget inward such a agency to await simply produce for the forthcoming Christmas holiday.

To come across a present for the Popular Posts widget for Christmas, delight watch the present blog:

Demo blog

How to Add Popular Posts Widget amongst Christmas Bells inward Blogger

Step 1. Log inward to your Blogger Dashboard, together with thence become to 'Template' together with click the 'Edit HTML' button:

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

</head>

Step 3. Just higher upwards 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/AVvXsEheae-rqhIWm_diCNP9Dqv7UyT1I4WRsJxoKot9mOLcTlHUcQQqnEvcjPBQco70bQVWUeRGeUiiwkR-9pUHys4uMKWaKlfC3s7LNUSRDR1eNTUzYUi-IUKCBrrx7XPg0o4sM5ZV9CIDKNu5/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 venture #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 clitoris to salvage the changes together with you're done. Enjoy!

Also, delight banking concern agree out this tutorial on how to add together falling snowflakes inward the background of a Blogger blog.

Share this post