4 Simple, Best Popular Posts Widget For Blogger

​

How To Add Popular Post Widget To Blogger Template 

Login to your blogger account, click Template >>Edit HTML. 

Move you mouse arrow over to the template and click on any key. 

Use the ctrl+f key to open a search box. 

Adding the Javascrip code. 

Search for the </body> tag.

Copy the code below and paste it before </body> tag. 

//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Must Do: check if the highlited text is inside the code is already in your template(some template do have it as default), if you find it, skip it and copy the rest. 

Adding The Css Part Of The Code 

Search for the </head> tag. 

Copy any css code according to any style of your choice and paste it before or above the </head> tag. 

1.      Style One.   Box Within a Box 

<style type=’text/css’>.sidebar .PopularPosts ul {margin: 0;padding: 0;}.sidebar .PopularPosts ul li {list-style: none !important;padding: 0 !important;margin-bottom: 10px;}.sidebar .PopularPosts .item-thumbnail {height: 190px;margin: 0;overflow: hidden;width: 100%;}.sidebar .PopularPosts .item-title {position: relative;}.sidebar .PopularPosts img {height: 100%;width: 100%;object-fit: cover;}.sidebar .PopularPosts .item-title a {color: #FFFFFF;font: 15px 'Oswald', sans-serif;text-transform: uppercase;font-size: 20px;padding: 10px;position: absolute;right: 0;left: 0px;margin: 0px auto;text-align: center;text-decoration: none;top: 40px;width: 60%;height: 26px;overflow: hidden;z-index: 2;}.sidebar .PopularPosts .item-snippet {background: rgba(0, 0, 0, 0.35);border-top: 6px solid rgba(0, 0, 0, 0.1);border-bottom: 6px solid rgba(0, 0, 0, 0.1);color: #FFFFFF;left: 0px;right: 0px;margin: 0px auto;padding: 65px 10px 10px;position: absolute;font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;text-align: center;top: 35px;width: 60%;z-index: 1;}.sidebar .PopularPosts .item-content {position: relative;}</style>

2.     Style two.   Colourful Boxes.

<style type=’text/css’>.sidebar .PopularPosts ul {padding: 0;margin: 0;}.sidebar .PopularPosts .item-thumbnail a {clip: auto;display: block;height: auto;overflow: hidden;}.sidebar .PopularPosts .item-thumbnail {width: 130px;height: 130px;border-right: 5px solid #fff;margin: 0px 10px 0px 0px !important;position: relative;}.sidebar .PopularPosts .item-thumbnail img {position: relative;height: 100%;width: 100%;object-fit: cover;}.sidebar .PopularPosts ul li {float: left;margin-bottom: 5px;max-height: 130px;min-width: 250px;overflow: hidden;}.sidebar .PopularPosts ul li:first-child {background: #D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background: #F2DEDE;}.sidebar .PopularPosts ul li:first-child + li+ li {background: #DFF0D8;}.sidebar .PopularPosts ul li:first-child + li+ li + li {background: #FFEEBC;}.sidebar .PopularPosts ul li:first-child + li+ li + li + li{background: #E0E0E0;}.sidebar .PopularPosts .item-title {font: 13px 'Oswald', sans-serif;text-transform: uppercase;padding: 10px 5px 10px;}.sidebar .PopularPosts .item-title a {color: #000;text-decoration: none;}.sidebar .PopularPosts .item-snippet {font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right: 5px;}.sidebar .PopularPosts .widget-content ulli {padding: 0px 5px 0px 0px!important;}</style>

3.      Style three    Numbered Posts.

<style type=’text/css’>.sidebar .PopularPosts ul {counter-reset: popularcount;margin: 0;padding: 0;}.sidebar .PopularPosts ul li {float: left;max-height: 130px;min-width: 250px;position: relative;}.sidebar .PopularPosts .item-thumbnail::after {color: rgba(255,255,255, 0.63);content: counter(popularcount, decimal);counter-increment: popularcount;font: 70px 'Oswald', sans-serif;list-style-type: none;position: absolute;left: 5px;top: -5px;z-index: 4;}.sidebar .PopularPosts .item-thumbnail::before {background: rgba(0, 0, 0, 0.3);bottom: 0px;content: &quot;&quot;;height: 100px;width: 100px;left: 0px;right: 0px;margin: 0px auto;position: absolute;z-index: 3;}.sidebar .PopularPosts .item-thumbnail a {clip: auto;display: block;height: auto;overflow: hidden;}.sidebar .PopularPosts .item-thumbnail {width: 100px;height: 100px;margin: 0px 10px 0px 0px !important;position: relative;}.sidebar .PopularPosts .item-thumbnail:hover:before {display: none;}.sidebar .PopularPosts .item-thumbnail img {position: relative;padding-right: 0px !important;height: 100%;width: 100%;object-fit: cover;}.sidebar .PopularPosts .item-title {font: 13px 'Oswald', sans-serif;text-transform: uppercase;padding: 0px 5px 10px;}.sidebar .PopularPosts .item-title a {color: #000;text-decoration: none;}.sidebar .PopularPosts .item-snippet {font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ulli {padding: 0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content {padding: 5px 0px;border-bottom: 1px dotted #dedede;overflow: hidden;height: 100px;position: relative;}</style>

4.      Style four     Grid Layout 

<style type=’text/css’>.sidebar .PopularPosts ul {padding: 0;}.sidebar .PopularPosts ul li:first-child{width: 100%;max-height: 100%;opacity: 0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right: 2%;}.sidebar .PopularPosts ul li {box-sizing: border-box;position: relative;padding: 0px !important;width: 49%;max-height: 120px;opacity: 0.4;overflow:hidden;float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover {opacity: 1;}.sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;}.sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height: 100%;object-fit: cover;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {visibility: visible;opacity: 1;}.sidebar .PopularPosts .item-title a {color: #fff;background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration: none;position: absolute;text-align: center;font: 13px 'Oswald', sans-serif;left: 0;right: 0;bottom: 0%;padding: 100px 10px 10px;opacity: 0;visibility: hidden;}.sidebar .PopularPosts .item-snippet {display: none;}</style>

Read below to Customize popular post widget.

 

Go to your blog layout, locate the popular post widget and click on edit, set it up as seen on the pics below. 

Don’t forget to

share our Post

from WordPress http://ift.tt/2e4OXR6