no-style

close

5 Stylish Popular Posts Widgets for Blogger

5 Stylish Popular Posts Widgets for Blogger
Popular posts widget on blogger lists mostly viewed posts on our blogger website. Popular post widget comes with default settings when we install any blogger theme or template.

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.

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for .popular-posts
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Remove every line of css code defined for the class element with class popular-posts.
  7. Now, copy anyone code according to your requirements the preview of the code is also shown.
  8. Style 1:

    Demo:
    5 Stylish Popular Posts Widgets for Blogger
    Code:
    <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:
    5 Stylish Popular Posts Widgets for Blogger
    Code:
    <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:
    5 Stylish Popular Posts Widgets for Blogger
    Code:
    <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:
    5 Stylish Popular Posts Widgets for Blogger
    Code:
    <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:
    5 Stylish Popular Posts Widgets for Blogger
    Code:
    <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>
  9. Search For </head> and paste the copied code above it.
  10. Save Theme/Template

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.

Wrapping up:

These were popular posts widget styles for blogger which I have shared with you. If you have any other style you can comment below and I will try to add it in the styles list above.

5 Comments

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

no-style

no-style

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}