Skip to main content

Popular Post Widget for Christmas

By Anonymous
The Christmas countdown has begun and while homes are decorated with colourful 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 Post widget!
So today I was playing around a bit with CSS and I was thinking that tit 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.

How to Add the Popular Posts Widget with Ringing Christmas Bells to Blogger

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 press the search 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/AVvXsEh5a0DmMRHUNfvhR2SIMG_QGJGHdZwL_lqk3DsRE9ny1fWmTKeydzHFPrulxt4RE55eCAwFUpFBijFX3Xg2kYq7apXKQepA9RVkK2pWKnUKVx36TZNZP9umDCucVIqXr9jWMrPszeNj1LXR/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 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.





Comments

Post a Comment

Popular posts from this blog

How to Secure Your Wireless (Wi-Fi) Home Network

By
Wireless Networking (Wi-Fi) has made it so easy for anyone to use Internet on your computer, mobile phones, tablets and other wireless devices anywhere in the house without the clutter of cables. With traditional wired networks, it is extremely difficult for someone to steal your bandwidth but the big problem with wireless signals is that others can access the Internet using your broadband connection even while they are in a neighboring building or sitting in a car that’s parked outside your apartment. This practice, also known as piggybacking, is bad for three reasons: It will increase your monthly Internet bill especially when you have to pay per byte of data transfer. It will decrease your Internet access speed since you are now sharing the same internet connection with other users. It can create a security hazard* as others may hack your computers and access your personal files through your own wireless network. [*] What do the bad guys use  – There ha...
Post a Comment
Read more

Twitter Guide: How To Do Everything With Twitter

By
The first tweet was published almost 8 years ago and Twitter has come a long way since then. There’s a whole ecosystem of apps and services available now that allow us to use Twitter in more ways than ever before. This guide curates the best tools that will help you get the most out of Twitter. 1.  Nuzzel  – This works as an intelligent filter for Twitter and helps you discover the most popular news stories shared across your Twitter network. All signal, no noise. 2.  Flipboard  – Connect your Twitter account to Flipboard and it will create a beautiful magazine for all your Twitter feeds that you can flip through on the web (example), mobile and Windows 10 devices. 3.  LifeOnTwitter  – Get interesting statistics and facts about your Twitter account (example). 4.  TallTweets  – It lets you send tweets of any length by slicing your long tweet into multiple 140-character tweets (sample) and sending them ...
Post a Comment
Read more

Make International Phone Calls from your Mobile even without the Internet

By Anonymous
While apps like Skype or Viber let you make cheap (or even free) international phone calls, you need to connected to WiFi for these apps to work. Meet an alternate that offers similar features but needs no Internet. H o w do you make international calls from your mobile phone? Mobile carriers often charge exorbitant rates for international phone calls but you can Internet based services like Skype or Google Hangouts and call any landline or cell phone number in the world for a low per minute fee. All you need is a mobile phone connected to a Wi-Fi hotspot and some credit balance in your account for making the phone call. You can use these VoIP apps when travelling overseas as well and make significant savings for both domestic and international calls. Now consider a scenario where you have a mobile phone but there’s no Wi-Fi around and the 3G/4G services are either slow or unavailable. Would you still be able to place calls through any of these apps? The answer is obviously in ...
Post a Comment
Read more