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

The Best Google Font Combinations That Look Good Together

By
Whether you are creating a website, writing your resume or designing a presentation, the fonts or typeface you choose can make a notable difference. The Google Fonts directory offers a myriad of choices but how do you pick the correct font for your digital projects? Should you go for Serif fonts or Sans Serif or a combination of serifs and sans serifs? Typography is an art and, with thousands of fonts available, it is obviously difficult for non-designers to find that perfect font combination. Need help? Here are some useful font pairing websites where type masters have already done the hard work and all you can do is follow their recommendations to pick the most elegant and gorgeous Google fonts combination for your web and print projects. 1.  Beautiful Web Type  ( hellohappy.org ) – Chad Mazzola has created a beautiful showcase of high-quality typefaces from the Google Fonts website. You’ll discover some creative usage of fonts here though they haven’t updated ...
1 comment
Read more

A Wireless USB Stick that Expands your Phone’s Storage (And a Giveaway)

By
W hat do you do when your mobile phone has limited storage and there’s no option to add an external SD card? How do you carry all your videos and documents where there’s not an iota of space left on the device? Yes, you do have cloud-based services like Dropbox or Google Drive that add virtually unlimited storage to your phone but you’ve to be connected to the Internet to access your files. This week I’ve been testing a wireless USB stick from Sandisk that adds storage to your phones and tablets much like a regular USB drive. To get started, you plug the USB device into your laptop or desktop computer and let it charge for about an hour or two. You can also transfer the files to the stick from the computer through Windows Explorer or Finder on Mac. Once the device is charged, you tap the little power button on the stick to turn it on. Now install the Sandisk Connect app on your mobile phone, go to WiFi settings on your phone and connect to the Wi-Fi hotspot created by the...
Post a Comment
Read more

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