Popular Post Widget Christmas Style For Blogger

Posted by Unknown Senin, 13 Januari 2014 0 komentar
Popular Post Widget Christmas Style For Blogger
The Christmas countdown has begun and while homes are decorated with colorful lights and the sweet smell of pine trees and the stores are playing Jingle Bells, there's no reason why we wouldn't decorate your Blogger blog with some ringing christmas bells right next to the Blogger Popular Posts widget!

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





Step 1. Log in to your Blogger Dashboard, 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:
</head>
Step 3. Just above the </head> tag, add the following:
<style>
#PopularPosts1 .item-thumbnail:before{
display: block;
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw0bFe7JoTcOHki-Jhti_XiCun01SFlSQuiUCX28aDTrFjlOpJeXoeDqFHmKBNX2yXw7vJ5s5HMxoT-Rv0Q09WThJvw4U-orUJgVv0DB0YfNyJZs_6grKtLHSatcKkmVIWLvE5bRRF4K1D/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 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>
<script src="http://helplogger.googlecode.com/svn/trunk/sounds.js"/>
Step 4. Now search for the following line (you'll find it twice but you should stop at the second one):
Note: if you don't want any ringing sound on mouseover, skip this step.
<a expr:href='data:post.href' target='_blank'>
And replace it with this:
<a onmouseover='mouseoversound.playclip()' expr:href='data:post.href' target='_blank'>
Step 5. Click on the Save Template button to save the changes.

And you're done! Enjoy :)


TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Popular Post Widget Christmas Style For Blogger
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://androidbackupapps.blogspot.com/2014/01/popular-post-widget-christmas-style-for.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Trik SEO Terbaru support Online Shop Baju Wanita - Original design by Bamz | Copyright of android backup apps.