You cannot fetch popular feeds using JSON in blogger but instead of that we can fetch related posts, recent posts and labeled posts using JSON feeds.
We cannot create popular posts widget in blogger using JavaScript because it is not possible.
However, there are some chances for modifying the default styles for popular posts widget according to our requirements, keeping that in mind I have created different styles for popular posts widget for blogger.
If your theme already has popular posts widget then it will also have predefined styles for that widget.
You have to remove the default styles for popular posts widget in blogger template.
Steps for customization of popular posts widget:
You have to follow the following steps to customize popular posts widget in blogger.- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for .popular-posts
- Remove every line of css code defined for the class element with class popular-posts.
- Now, copy anyone code according to your requirements the preview of the code is also shown.
- Search For </head> and paste the copied code above it.
- Save Theme/Template
To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
Style 1:
Demo:
<style>
.popular-posts ul li{overflow:hidden;float:none;clear:both;margin-bottom:1.5rem;}
.popular-posts ul li:last-of-type{margin-bottom:0;}
.popular-posts ul li a:hover{background-image:linear-gradient(to right,#20baff,#0091d3);}
.popular-posts ul li a:hover{-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;}
.popular-posts ul li a{color:#fff;font-weight:700;}
.popular-posts ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;counter-reset:posts;}
.popular-posts ul li{background-color:#083149;color:#b1b1b1;border-radius:1rem;padding:1.5rem 1.5rem 1.5rem 3.75rem;width:100%;line-height:2;counter-increment:posts;position:relative;overflow:visible;transition:.2s;}
.popular-posts ul li a{display:block;}
.popular-posts ul li::before{background-color:#fff;position:absolute;content:counter(posts);border-radius:50%;display:block;border:.1875rem solid #03121b;text-align:center;width:3.75rem;height:3.75rem;color:#000;line-height:3.375rem;font-weight:700;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:-.75rem;text-shadow:.0625rem .0625rem .0625rem rgba(0,0,0,.5);font-size:1.5rem;}
.popular-posts ul li:not(:first-child){margin-top:-2rem;}
.popular-posts ul li:hover{-webkit-transform:translate(0,-2rem);transform:translate(0,-2rem);}
</style>Style 2:
Demo:
<style>.popular-posts a,.popular-posts *{text-decoration:none;font-family:roboto;color:#fff}
.popular-posts ul li,.popular-posts ul li:before{transition:all .4s}.popular-posts ul{margin:2em auto}.popular-posts ul li{position:relative;display:block;padding:20px 20px 20px 45px;box-sizing:border-box;color:#fff;background:#000;text-decoration:none}.popular-posts ul li:before{content:"";position:absolute;left:0;bottom:0;top:0;width:20px;background:#7F8C9A}.popular-posts ul li:nth-child(even):before{background:#34495E}.popular-posts ul li + .popular-posts ul li{border-top:2px solid #ededed}.popular-posts ul li:hover,.popular-posts ul li:focus{opacity:1;padding-left:55px}.popular-posts ul li:hover:before,.popular-posts ul li:focus:before{width:30px}
</style>Style 3:
Demo:
<style>.popular-posts a,.popular-posts *{text-decoration:none;font-family:roboto;color:#fff}.popular-posts ul li{padding:.4em .4em;list-style-type:none;color:#fafafa;border:1px solid #ecf0f1}.popular-posts ul li:hover:before{color:white;background-color:#ffb329}.popular-posts ul li:before{content:"\2713 ";font-size:1.2em;margin-right:10px;padding:.2em .45em .2em .45em;position:relative;color:white;background-color:#859a31;border-radius:50%}.popular-posts ul li a{color:#859a31;text-decoration:none;-moz-transition:all,500ms;-o-transition:all,500ms;-webkit-transition:all,500ms;transition:all,500ms}.popular-posts ul li a:hover{border-bottom:.3rem solid}
</style>Style 4:
Demo:
<style>.popular-posts a,.popular-posts *{text-decoration:none;font-family:roboto;color:#fff}.popular-posts ul{display:inline-block;margin-right:4em;list-style:none;padding:0;counter-reset:checkout_progress;margin:auto}.popular-posts ul li{position:relative;z-index:2;list-style:none!important}.popular-posts ul li:not(:first-of-type){margin-top:0.5em}.popular-posts ul li a{display:table-cell;vertical-align:middle;text-indent:0.5em}.popular-posts ul li a:first-child{font-weight:bold;color:black}.popular-posts ul li:first-child:before{background:green;border-color:green;color:white}.popular-posts ul li{color:gray}.popular-posts ul li:before{position:relative;z-index:2;display:table-cell;vertical-align:middle;text-align:center;padding:.1em .4em;background:white;border-radius:50%;color:black;border:0.2em solid #666;content:counter(checkout_progress);counter-increment:checkout_progress}.popular-posts ul li:not(:last-of-type):after{position:absolute;z-index:1;content:"";top:1.5em;left:-7px;width:1.26em;height:1em;border-right:0.2em solid #666}
</style>Style 5:
Demo:
<style>.popular-posts a,.popular-posts *{text-decoration:none;font-family:roboto;color:#fff}.popular-posts ul{border-left:4px solid #000;margin:10px auto;position:relative;padding:50px}.popular-posts ul li{padding-bottom:10px;position:relative;margin-top:5px}.popular-posts ul li a{margin-left:-30px;width:100%;background-color:black;color:#fff;text-align:center;border-radius:6px;padding:5px}.popular-posts ul li a::before{content:"";position:absolute;top:50%;left:-9.8%;margin-top:-11px;border-width:5px;border-style:solid;border-color:transparent black transparent transparent}.popular-posts ul li:last-of-type{padding-bottom:0;margin-bottom:0;border:none}.popular-posts ul li:before,.popular-posts ul li:after{position:absolute;display:block;top:0}.popular-posts ul li:after{box-shadow:0 0 0 4px #000;left:-57.85px;background:#fff;border-radius:50%;height:11px;width:11px;content:"";top:5px}
</style>The customization of popular posts widget in blogger blog is done and here you don't have to modify any of the settings in the CSS style but you can modify the colors if you want.