Colorful & Animated Recent Posts Widget for Blogger
close
Colorful & Animated Recent Posts Widget for Blogger

Colorful & Animated Recent Posts Widget for Blogger

colorful and animated recent posts widget for blogger

I have been posting blogger widgets since I have created this website and I have shared many blogger widgets in many different and beautiful styles if you haven't checked them yet please do it right now.



As usual this time I am having another recent post blogger widget for you and this is colorful and animated recent posts blogger widget.

The color scheme of this widget is not the same instead it has different colors.

It shows the posts in square form and shows the only titles with animation when you mouseover or hoverover that post.

If you talk about the responsiveness of this colorful and animated recent posts widget for blogger then I am going to give it A+ grade because this widget is responsive to all devices you can check its responsiveness on the demo page.

If you want to see the demo or preview of this colorful and animated recent post widget for blogger you can simply go to the demo page by clicking the demo button below and you will be redirected to the demo page after clicking the button provided below where you can see the demo or preview of this widget and you can also check its responsiveness.
View Demo

If you wanna talk about the best place to add this widget into your blogger blog or if you want to take my opinion about the placement of this widget then I will recommend you to place this widget in the header section of your blogger blog or in the footer section of your blogger blog. You can also place it in the sidebar because this widget is responsive and will adjust its setting by matching the parent element.

So if you want to add this colorful and animated recent post widget into your blogger blog then you have to follow these guidelines provided below as usual.

So follow the guidelines as they are listed and don't miss any step if you skip any step then you will not be able to make this widget work properly in your blogger blog.

Steps to follow:

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for </body>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now copy the source code provided below and paste it above </body>
  7. <style>
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i);
    @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
    .gravityfeatured {
      background: #f3f5f6;
      color: #000;
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      line-height: 1.8;
      word-wrap: break-word;
      font-weight: 400;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased
      display: flex;
      margin: 8% auto 20px auto;
      width: 100%;
      overflow: hidden;
      max-width: 970px;
      box-shadow: 0 30px 10px -20px rgba(0, 0, 0, 0.2)
    }
    
    .gravfeatureditem {
      background: rgba(0, 0, 0, 0.02);
      display: block;
      position: relative;
      float: left;
      overflow: hidden;
      height: 220px;
      width: 25%
    }
    
    .gravfeatureditem .gracontent {
      background: #3498db;
      display: block;
      position: absolute;
      z-index: 6;
      bottom: 0;
      left: 0;
      right: 0;
      transform: translate(0, 0);
      opacity: 1;
      visibility: visible;
      transition: all .3s
    }
    
    .gravfeatureditem:hover .gracontent {
      opacity: 0;
      visibility: hidden;
      transform: translate(0, 60px)
    }
    
    .gravfeatureditem .gracontent h3 {
      font-size: 14px;
      color: #fff;
      padding: 15px;
      margin: 0;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis
    }
    
    .gravfeatureditem .feat-img {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: 50%
    }
    
    .gravfeatureditem a {
      display: block;
      color: rgba(255, 255, 255, 1);
      position: relative;
      vertical-align: bottom;
      z-index: 5;
      height: 100%;
      transition: all .3s
    }
    
    .gravfeatureditem a:before {
      content: '';
      background: #3498db;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 3;
      top: 0;
      opacity: 0;
      transition: background 0.3s linear, opacity 0.3s linear
    }
    
    .gravfeatureditem.first a:before,
    .gravfeatureditem.first .gracontent {
      background: #56a8df
    }
    
    .gravfeatureditem.second a:before,
    .gravfeatureditem.second .gracontent {
      background: #e49148
    }
    
    .gravfeatureditem.third a:before,
    .gravfeatureditem.third .gracontent {
      background: #5bccb6
    }
    
    .gravfeatureditem.fourth a:before,
    .gravfeatureditem.fourth .gracontent {
      background: #f5b44c
    }
    
    .gravfeatureditem a:hover:before {
      opacity: 0.9;
    }
    
    .gravfeatureditem a:after {
      content: 'textsms';
      font-family: Material Icons;
      position: absolute;
      z-index: 3;
      font-size: 3rem;
      top: 32%;
      left: 0;
      right: 0;
      bottom: 0;
      color: #fff;
      text-align: center;
      transform: translate(0, -60px);
      animation: jellygrav .6s linear;
      opacity: 0;
      visibility: hidden;
      transition: all .3s
    }
    
    .gravfeatureditem:hover a:after {
      opacity: 1;
      visibility: visible;
      transform: translate(0, 0)
    }
    
    @media screen and (max-width:826px) {
      .gravfeatureditem {
        width: 50%
      }
      .gravfeatureditem.third,
      .gravfeatureditem.fourth {
        display: none
      }
    }
    
    @media screen and (max-width:641px) {
      .gravfeatureditem {
        width: 100%
      }
      .gravfeatureditem.second,
      .gravfeatureditem.third,
      .gravfeatureditem.fourth {
        display: none
      }
    }
    </style>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script>
    // Recent Post
    var domain = 'https://www.softwebtuts.com'; // Replace this URL with your website URL or leave it blank to auto detect it.
    function getPostUrl(a) {
      for (var b = 0; b < a.link.length; b++)
        if ("alternate" == a.link[b].rel) {
          var c = a.link[b].href;
          return c
        }
    }
    
    function getPostPublishDate(a) {
      var b = a.published.$t,
        c = b.split("-")[2].substring(0, 2),
        d = b.split("-")[1],
        e = b.split("-")[0],
        f = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Octobor", "November", "December"],
        g = f[d - 1],
        h = g + " " + c + ", " + e;
      return b ? h : ""
    }
    
    function getPostCategory(a) {
      var b = a.category;
      b && (b = a.category[0].term);
      var c = '<div class="category-wrapper"><a class="category" href="'+domain+'/search/label/' + b + '?max-results=10">' + b + "</a></div>";
      return b ? c : ""
    }
    
    function Slider(a) {
      for (var c = (new Array, ""), d = a.feed.entry.length, e = 0; e < d; e++) {
        var f = a.feed.entry[e],
          g = f.title.$t,
          h = getPostUrl(f),
          l = (f.author[0].name.$t, getPostPublishDate(f), getPostCategory(f), f.category[0].term),
          m = a.feed.entry[e].content.$t,
          n = $("<div>").html(m);
        if (m.indexOf("//www.youtube.com/embed/") > -1) var o = a.feed.entry[e].media$thumbnail.url,
          p = o;
        else if (m.indexOf("<img") > -1) var q = n.find("img:first").attr("src"),
          p = q;
        else var p = no_image;
        0 == e && (c = c + '<div class="gravfeatureditem first"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>'), 1 == e && (c = c + '<div class="gravfeatureditem second"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>'), 2 == e && (c = c + '<div class="gravfeatureditem third"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>'), 3 == e && (c = c + '<div class="gravfeatureditem fourth"><div class="gracontent"><h3>' + g + '</h3></div><a href="' + h + '"><div class="feat-img" style="background-image:url(' + p + ');"></div></a></div>')
      }
      slider.html('<div class="gravityfeatured">' + c + "</div>"), $(".gravityfeatured").find(".feat-img").each(function() {
        $(this).attr("style", function(a, b) {
          return b.replace("/default.jpg", "/mqdefault.jpg")
        }).attr("style", function(a, b) {
          return b.replace("s72-c", "s1600")
        }).attr("style", function(a, b) {
          return b.replace("s320", "s1600")
        }).attr("style", function(a, b) {
          return b.replace("s400", "s1600")
        }).attr("style", function(a, b) {
          return b.replace("s640", "s1600")
        })
      })
    }
    var slider = $("#gravityfeatured .widget-content"),
      sliderContent = slider.text().trim();
    "no" !== sliderContent.toLowerCase().trim() && '"no"' !== sliderContent.toLowerCase() && "" !== sliderContent ? "[recent]" !== sliderContent ? $.ajax({
      url: domain+"/feeds/posts/default/-/" + sliderContent + "?alt=json-in-script&max-results=4",
      type: "get",
      dataType: "jsonp",
      success: function(a) {
        Slider(a)
      }
    }) : $.ajax({
      url: domain+"/feeds/posts/default?alt=json-in-script&max-results=4",
      type: "get",
      dataType: "jsonp",
      success: function(a) {
        Slider(a)
      }
    }) : $("#slider").remove();
    </script>
  8. Save Theme/Template


Now you have successfully added the source code of this widget into your blogger blog. Now if you want to show ut in your blogger blog follow these steps.

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add Gadget
  4. Select the place to add this widget and in that section click add gadget button.
  5. Select HTML/JavaScript widget from the widgets list
  6. Now copy the source code provided below and paste it as the widget content.
  7. <div class='gravityfeaturedz' id='gravityfeatured'>
      <div class='widget-content'>
        [recent]
      </div>
    </div>
  8. Save Widget

So after following up all the steps or guidelines to add this widget into your blogger blog now if you refresh the page of your website you will see that this widget will be working properly but it will fetch posts from my website.

So here time comes to make customizations in this blogger widgets source code.

So these are some configuration settings listed below that you can configure accordingly in this widget.

You can see the configuration setting variable with the description in front of it.

For your ease and make it easy to understand I have listed up all the configuration settings in table. So that you can read and understand them clearly.

ConfigurationDescription
domain = 'https://www.softwebtuts.com'Here change this URL with your website URL or leave it blank to auto detect it.

Winding Up:

So I am going to wind up this article and in the conclusion or in the ending of this article I want you to tell me in the comment section that if you like this colorful and animated recent posts widget for blogger or not.

But according to my opinion I think that you will like this colorful and animated recent posts widget for blogger.

So before leaving this site I recommend you to subscribe to the newsletters of this blog so that you will never miss an update of all upcoming articles on this website.

Disqus Codes

No comments

Notifications

Disqus Logo