Almost every blog use popular post widget. That’s why I have designed this popular post widget for blogger. I have given 6 different image hover effects. You can use whatever you want. We know that, a lot of people are using Blogger for creating their professional or business website. If you are also running your blog on blogger and trying to improve your site’s outlook, then this is the right place.
Today I am going to tell you, how you can customize your blogger popular post widget? But before that, I would love to say something about why we need Popular Post widget. Popular Post widget can help you to improve your website page views
By using a Popular Post widget, you can show your visitors the top trending posts of your site. If they find this interesting, they will naturally click on that, and your website will get some extra page views which will decrease the bounce rate of your site. So we can say that popular post widget will improve user experience too. Now let’s come to the point:
Popular Post Widget For Blogger:
Before customizing the popular post widget, first of all, you should know how to add popular post widget in blogger? To do that, go to your blogger dashboard > select your blog and go to the layout section as shown below:
Usually, people show popular post widget In their blog’s sidebar. If you also want to do that then go to the sidebar section and click on Add a gadget. New pop up box will be opened in front of you. From the list select popular posts and click on the blue plus sign as shown below:
Now configure the popular post widget as shown below. I mean, uncheck the snippet box and select how many post you wish to show in your popular post widget from the drop-down. Click on the orange Save button.
Save it. You have successfully added the popular post widget in your Blogger blog. Refresh your blog and you will be able to see the Popular Post widget is working on your blog. Now this is the time to customize it so let’s go for it:
Check Your Template: Check in between <head>……</head> section that your template is jquery enabled or not? If you find this kind of code:
Code :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
In between the head section of your template, that means your website is jQuery enabled. Otherwise, copy the above code and paste it in between the head section of your template like this:
Install the script to resize images: To get an optimum result, you should install the script. This script will resize images. You can just simply copy the script placed below and paste it just above the ending body (</body>) tag.
Code :
<script src='https://googledrive.com/host/0B9LXkbvPizPrcFQ2dWxrVDg4ZTA' type='text/javascript'/>
CSS Code For Popular Post Widget : Grab the css code > and go to your blogger dashboard > template > edit HTML. Now search for the ending CSS tag “]]></b:skin>” in your blogger template. Place your copied CSS code just above the tag “]]></b:skin>“.
Code :
/* Custom Popular Posts Widget By http://www.blogornate.com */
.sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;} .sidebar .popular-posts ul {counter-reset: popcount;padding: 0;margin: 0;} .sidebar .PopularPosts ul li img {padding: 0;float: left;height: 130px;width: 100%;display: block; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .sidebar .PopularPosts ul li img:hover {
/*PASTE ONE OF YOUR CHOSEN HOVER EFFECT CODE HERE*/
} .sidebar .popular-posts ul li {font-family: "Oswald",sans-serif;font-weight: bold;height: 150px;overflow: hidden;list-style: none !important; float: left;padding: 0px !important;margin: 2px;position: relative;border: 0;width: 100%;} .sidebar .PopularPosts .item-title {position: absolute;left: 0;bottom:0;right: 0;padding-bottom: 0;z-index: 999;} .sidebar .popular-posts ul li:hover .item-title a {text-decoration: none;color: rgba(255, 255, 255, 1);} .sidebar .PopularPosts .item-title a {display: block;background: rgba(32, 32, 32, 0.77);color: #FFFFFF; text-transform: capitalize;font-size: 12px;font-weight: normal;padding: 10px 0px 5px 10px;}
I have given a screenshot for making you better understand. So see the screenshot below and I hope you can do it very easily.
Now copy one of the image hover effect code from below and replace it with the highlighted line “/*PASTE ONE OF YOUR CHOSEN HOVER EFFECT CODE HERE*/.“ Then, Click on the Save Template button and you are done.
1. Popular Post Widget With Zoom In:
This is a stunning and very bright zoom in effect on the images of your popular post widget. That means when your popular post images will get a mouse hover, the picture will zoom in smoothly. The widget width is defined hundred percent so it will adjust automatically to your sidebar’s width.
Code :
-webkit-transform: scale(1.3); transform: scale(1.3); overflow: hidden;
2. Popular Post Widget With Zoom Out:
This will give you a very clear zoom out effect on mouse hover. That means when you will put your cursor on the popular post widget image, the image will zoom out.
Code :
-webkit-transform: scale(1); transform: scale(1); overflow: hidden;
3. Popular Post Widget With Sepia:
Code :
-webkit-filter: sepia(0); filter: sepia(0); overflow: hidden;
4. Popular Post Widget With Opacity:
Code :
opacity: .5; overflow: hidden;
5. Popular Post Widget With Gray Scale:
Code :
-webkit-filter: grayscale(0); filter: grayscale(0); overflow: hidden;
6. Popular Post Widget With Flash:
Code :
opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s; } @-webkit-keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; }
You can choose one of the CSS code in between 1 to 6. Select the effect you like most for your lovely website and beautiful Popular Post widget. If you have made the selection, we may now move on the implementation. If you need some more designs, take a look on 10+ latest popular post widgets for blogger with thumbnails!
I have told you almost the step-by-step way, how to add a popular post widget in your blogger blog and how to customize the Popular Post widget. I have suggested you popular post widget for blogger with 6 different image hover effect. So if the post was helpful for you, then please share it with your friends.