DEKHO - Header Ads

Home > Unlabelled > Expending Flex Cards Blogger Widgets

Expending Flex Cards Blogger Widgets

October 21, 2022

 You may have seen many different blogger widgets on this website and I mostly create blogger widgets in beautiful styles because today in the modern world UI is one of the things that most of the people want to be beautiful.


Before this article, I was sharing blogger widgets that have only one functionality. Some of them are only for recent posts some with popular posts some with related posts and some with a labelled posts functionality.

Most of you people like the UI design of blogger widgets which I share on this website but mostly if you want different functionalities then the functionality they have.

For example, you want it a recent posts widget with the same design or UI but in different functionality.

From today onwards I will try to create blogger widgets having different functionalities in the same UI design.

Ok, leave everything and let's talk about today's UI design of blogger widgets.

Today's article contains the list of widgets that you can implement in your website and these are:
  • Recent posts blogger widget
  • Labelled posts blogger widget
  • Related posts blogger widget

Preview of expanding cards blogger widgets:

To see the preview of the UI design of this blogger widgets is shown here in the GIF format you can also see the live preview by clicking on the demo button provided below.
View Demo
The best place to add this widget is in the footer or header section of your blogger blog not in the sidebar.
Now let's see the steps to follow to implement or add these blogger widgets into your blogger blog.

General steps to add blogger widgets in blogger:

After selecting the best place to add this widget into your blogger blog you have to follow these steps. Select the exact place where you want to add this widget and add the code provided below to that location.
You can add this code by going to theme editor or by simply creating a new widget and adding this code to that widget.

Code For Recent Posts Widget:

To implement recent posts widget you have to copy and paste this code:
<div class="expanding-flex-cards"></div>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css'/>
<style>
.expanding-flex-cards .options {
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   overflow: hidden;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-align: stretch;
   align-items: stretch;
   overflow: hidden;
   min-width: 600px;
   max-width: 1200;
   width: calc(100%);
   height: 400px;
}
@media screen and (max-width: 718px) {
   .expanding-flex-cards .options {
      min-width: 520px;
   }
   .expanding-flex-cards .options .option:nth-child(5) {
      display: none;
   }
}
@media screen and (max-width: 638px) {
   .expanding-flex-cards .options {
      min-width: 440px;
   }
   .expanding-flex-cards .options .option:nth-child(4) {
      display: none;
   }
}
@media screen and (max-width: 558px) {
   .expanding-flex-cards .options {
      min-width: 360px;
   }
   .expanding-flex-cards .options .option:nth-child(3) {
      display: none;
   }
}
@media screen and (max-width: 478px) {
   .expanding-flex-cards .options {
      min-width: 280px;
   }
   .expanding-flex-cards .options .option:nth-child(2) {
      display: none;
   }
}
.expanding-flex-cards .options .option {
   position: relative;
   overflow: hidden;
   min-width: 60px;
   margin: 10px;
   background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
   background-size: cover;
   background-position: center;
   cursor: pointer;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option:nth-child(1) {
   --defaultBackground: #ed5565;
}
.expanding-flex-cards .options .option:nth-child(2) {
   --defaultBackground: #fc6e51;
}
.expanding-flex-cards .options .option:nth-child(3) {
   --defaultBackground: #ffce54;
}
.expanding-flex-cards .options .option:nth-child(4) {
   --defaultBackground: #2ecc71;
}
.expanding-flex-cards .options .option:nth-child(5) {
   --defaultBackground: #5d9cec;
}
.expanding-flex-cards .options .option:nth-child(6) {
   --defaultBackground: #ac92ec;
}
.expanding-flex-cards .options .option.active {
   -webkit-box-flex: 10000;
   flex-grow: 10000;
   -webkit-transform: scale(1);
   transform: scale(1);
   max-width: 100%;
   margin: 0px;
   border-radius: 40px;
   background-size: cover;
}
.expanding-flex-cards .options .option.active .shadow {
   box-shadow: inset 30px -120px 120px -120px rgba(0, 0, 0, 1),
      inset 30px -120px 120px -120px rgba(0, 0, 0, 1);
}
.expanding-flex-cards .options .option.active .label {
   bottom: 20px;
   left: 20px;
}
.expanding-flex-cards .options .option.active .label .info > div {
   left: 0px;
   opacity: 1;
}
.expanding-flex-cards .options .option:not(.active) {
   -webkit-box-flex: 1;
   flex-grow: 1;
   border-radius: 30px;
}
.expanding-flex-cards .options .option:not(.active) .shadow {
   bottom: -40px;
   box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
.expanding-flex-cards .options .option:not(.active) .label {
   bottom: 10px;
   left: 10px;
}
.expanding-flex-cards .options .option:not(.active) .label .info > div {
   left: 20px;
   opacity: 0;
}
.expanding-flex-cards .options .option .shadow {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   height: 500px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label {
   display: -webkit-box;
   display: flex;
   position: absolute;
   right: 0px;
   height: 40px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label .icon {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   min-width: 40px;
   max-width: 40px;
   height: 40px;
   border-radius: 100%;
   background-color: white;
   color: var(--defaultBackground);
}
.expanding-flex-cards .options .option .label .info {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   flex-direction: column;
   -webkit-box-pack: center;
   justify-content: center;
   margin-left: 10px;
   color: white;
   white-space: pre;
   text-transform: capitalize;
}
.expanding-flex-cards .options .option .label .info > div {
   position: relative;
   -webkit-transition: 0.5s ease-in-out, opacity 0.5s ease-out;
   transition: 0.5s ease-in-out, opacity 0.5s ease-out;
}
.expanding-flex-cards .options .option .label .info .main {
   font-weight: bold;
   font-size: 1.2rem;
}
.expanding-flex-cards .options .option .label .info .sub {
   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.widget-loader {
   height: 0;
   width: 0;
   padding: 15px;
   border: 6px solid #000;
   margin: 10px auto;
   border-right-color: #fff;
   border-radius: 22px;
   -webkit-animation: rotate 1s infinite linear;
   position: absolute;
   left: 50%;
   top: 50%;
}
@keyframes rotate {
   0% {
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -ms-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
</style>
<script>
var softwebtuts = $(".expanding-flex-cards");
var description_length = 360; /*Number of words to show as description*/
var MONTH_FORMAT = [
   "January",
   "February",
   "March",
   "April",
   "May",
   "June",
   "July",
   "August",
   "September",
   "October",
   "November",
   "December"
]; // months formats to translation or change to another format
var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBzA6N7i1lVw08tD-WgokaH6QePzKFR4YLCAksefLRiNenlPfa3tzdi88gFCYjmN_xW_0T2YWZUTYp35UvIbGLyDTDstLX0QsysCsd1gi1r21Xdwr6q873Rx3n5_df5Yd1Qh4IqO6Fes/s1600-r/nth.png"; /* No Image Placeholder */
var website = "https://softwebtuts.blogspot.com"; /*Website URL*/
var max_results = "4"; /* Number of Results to Show */
$.ajax({
   url:website +"/feeds/posts/default?alt=json-in-script&max-results="+max_results,
   type: "get",
   dataType: "jsonp",
   beforeSend: function () {
      softwebtuts.after('<div class="widget-loader"/>');
   },
   success: function (data) {
      $(".widget-loader").remove();
      var url = "";
      var output = '<div class="options">';
      for (var i = 0; i < data.feed.entry.length; i++) {
         for (var j = 0; j < data.feed.entry[i].link.length; j++) {
            if (data.feed.entry[i].link[j].rel == "alternate") {
               url = data.feed.entry[i].link[j].href;
               break;
            }
         }
         for (var k = 0; k < data.feed.entry[i].link.length; k++) {
            var avatar = data.feed.entry[i].link[k].href;
            break;
         }
         var title = data.feed.entry[i].title.$t;
         var author = data.feed.entry[i].author[0].name.$t;
         var gd = data.feed.entry[i].published.$t,
            year = gd.substring(0, 4),
            month = gd.substring(5, 7),
            day = gd.substring(8, 10),
            date = MONTH_FORMAT[parseInt(month, 10)] + " " + day + ", " + year;
         var tag = data.feed.entry[i].category[0].term;
         var content = data.feed.entry[i].content.$t;
         var description =content.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, description_length) + "...";
         var $content = $("<div>").html(content);
         if (
            content.indexOf("http://www.youtube.com/embed/") > -1 ||
            content.indexOf("https://www.youtube.com/embed/") > -1
         ) {
            var src2 = data.feed.entry[i].media$thumbnail.url;
            var src2_size = src2.replace("/default.jpg", "/mqdefault.jpg");
            var image = src2_size;
         } else if ("" != data.feed.entry[i].media$thumbnail.url) {
            var image = data.feed.entry[i].media$thumbnail.url.replace("/s72-c/", "/s1600/");
         } else {
            image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkIfzapAUvO5fPihhlLAP78r7SH9CIsInGonKMQivB5IW7Owd-w86_i-Ij8ExBL7tl7qIrbAOHemVTouNNIUVZjovRhqlNMzghGDHDXAk68rzwJdZxDxbvI3C3Mcjk0ZqvOeIjUZW9YMUi/s1/default.png";
         }
         output += '<div class="option" style="--optionBackground:url(' +image +');"><div class="shadow"></div><div class="label"><i class="icon fa fa-star"></i><div class="info"><div class="main">' +tag +'</div><div class="sub">' +title +"</div></div></div></div>";
      }
      output += "</div>";
      softwebtuts.html(output);
      $(".option:first-child").addClass("active");
      $(".option").click(function () {
         $(".option").removeClass("active");
         $(this).addClass("active");
      });
   }
});
</script>

Code For Labelled Posts Widget:

To implement labelled posts widget you have to copy and paste this code:
<div class="expanding-flex-cards"></div>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css'/>
<style>
.expanding-flex-cards .options {
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   overflow: hidden;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-align: stretch;
   align-items: stretch;
   overflow: hidden;
   min-width: 600px;
   max-width: 1200;
   width: calc(100%);
   height: 400px;
}
@media screen and (max-width: 718px) {
   .expanding-flex-cards .options {
      min-width: 520px;
   }
   .expanding-flex-cards .options .option:nth-child(5) {
      display: none;
   }
}
@media screen and (max-width: 638px) {
   .expanding-flex-cards .options {
      min-width: 440px;
   }
   .expanding-flex-cards .options .option:nth-child(4) {
      display: none;
   }
}
@media screen and (max-width: 558px) {
   .expanding-flex-cards .options {
      min-width: 360px;
   }
   .expanding-flex-cards .options .option:nth-child(3) {
      display: none;
   }
}
@media screen and (max-width: 478px) {
   .expanding-flex-cards .options {
      min-width: 280px;
   }
   .expanding-flex-cards .options .option:nth-child(2) {
      display: none;
   }
}
.expanding-flex-cards .options .option {
   position: relative;
   overflow: hidden;
   min-width: 60px;
   margin: 10px;
   background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
   background-size: cover;
   background-position: center;
   cursor: pointer;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option:nth-child(1) {
   --defaultBackground: #ed5565;
}
.expanding-flex-cards .options .option:nth-child(2) {
   --defaultBackground: #fc6e51;
}
.expanding-flex-cards .options .option:nth-child(3) {
   --defaultBackground: #ffce54;
}
.expanding-flex-cards .options .option:nth-child(4) {
   --defaultBackground: #2ecc71;
}
.expanding-flex-cards .options .option:nth-child(5) {
   --defaultBackground: #5d9cec;
}
.expanding-flex-cards .options .option:nth-child(6) {
   --defaultBackground: #ac92ec;
}
.expanding-flex-cards .options .option.active {
   -webkit-box-flex: 10000;
   flex-grow: 10000;
   -webkit-transform: scale(1);
   transform: scale(1);
   max-width: 100%;
   margin: 0px;
   border-radius: 40px;
   background-size: cover;
}
.expanding-flex-cards .options .option.active .shadow {
   box-shadow: inset 30px -120px 120px -120px rgba(0, 0, 0, 1),
      inset 30px -120px 120px -120px rgba(0, 0, 0, 1);
}
.expanding-flex-cards .options .option.active .label {
   bottom: 20px;
   left: 20px;
}
.expanding-flex-cards .options .option.active .label .info > div {
   left: 0px;
   opacity: 1;
}
.expanding-flex-cards .options .option:not(.active) {
   -webkit-box-flex: 1;
   flex-grow: 1;
   border-radius: 30px;
}
.expanding-flex-cards .options .option:not(.active) .shadow {
   bottom: -40px;
   box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
.expanding-flex-cards .options .option:not(.active) .label {
   bottom: 10px;
   left: 10px;
}
.expanding-flex-cards .options .option:not(.active) .label .info > div {
   left: 20px;
   opacity: 0;
}
.expanding-flex-cards .options .option .shadow {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   height: 500px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label {
   display: -webkit-box;
   display: flex;
   position: absolute;
   right: 0px;
   height: 40px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label .icon {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   min-width: 40px;
   max-width: 40px;
   height: 40px;
   border-radius: 100%;
   background-color: white;
   color: var(--defaultBackground);
}
.expanding-flex-cards .options .option .label .info {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   flex-direction: column;
   -webkit-box-pack: center;
   justify-content: center;
   margin-left: 10px;
   color: white;
   white-space: pre;
   text-transform: capitalize;
}
.expanding-flex-cards .options .option .label .info > div {
   position: relative;
   -webkit-transition: 0.5s ease-in-out, opacity 0.5s ease-out;
   transition: 0.5s ease-in-out, opacity 0.5s ease-out;
}
.expanding-flex-cards .options .option .label .info .main {
   font-weight: bold;
   font-size: 1.2rem;
}
.expanding-flex-cards .options .option .label .info .sub {
   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.widget-loader {
   height: 0;
   width: 0;
   padding: 15px;
   border: 6px solid #000;
   margin: 10px auto;
   border-right-color: #fff;
   border-radius: 22px;
   -webkit-animation: rotate 1s infinite linear;
   position: absolute;
   left: 50%;
   top: 50%;
}
@keyframes rotate {
   0% {
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -ms-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
</style>
<script>
var softwebtuts = $(".expanding-flex-cards");
var description_length = 360; /*Number of words to show as description*/
var MONTH_FORMAT = [
   "January",
   "February",
   "March",
   "April",
   "May",
   "June",
   "July",
   "August",
   "September",
   "October",
   "November",
   "December"
]; // months formats to translation or change to another format
var NO_IMAGE =
   "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBzA6N7i1lVw08tD-WgokaH6QePzKFR4YLCAksefLRiNenlPfa3tzdi88gFCYjmN_xW_0T2YWZUTYp35UvIbGLyDTDstLX0QsysCsd1gi1r21Xdwr6q873Rx3n5_df5Yd1Qh4IqO6Fes/s1600-r/nth.png"; /* No Image Placeholder */
var website = "https://softwebtuts.blogspot.com"; /*Website URL*/
var max_results = "4"; /* Number of Results to Show */
var label = 'seo'; /* Name Of Lable of which To show posts */
$.ajax({
   url: website+"/feeds/posts/default/-/" +label+"?alt=json-in-script&max-results="+max_results,
   type: "get",
   dataType: "jsonp",
   beforeSend: function () {
      softwebtuts.after('<div class="widget-loader"/>');
   },
   success: function (data) {
      $(".widget-loader").remove();
      var url = "";
      var output = '<div class="options">';
      for (var i = 0; i < data.feed.entry.length; i++) {
         for (var j = 0; j < data.feed.entry[i].link.length; j++) {
            if (data.feed.entry[i].link[j].rel == "alternate") {
               url = data.feed.entry[i].link[j].href;
               break;
            }
         }
         for (var k = 0; k < data.feed.entry[i].link.length; k++) {
            var avatar = data.feed.entry[i].link[k].href;
            break;
         }
         var title = data.feed.entry[i].title.$t;
         var author = data.feed.entry[i].author[0].name.$t;
         var gd = data.feed.entry[i].published.$t,
            year = gd.substring(0, 4),
            month = gd.substring(5, 7),
            day = gd.substring(8, 10),
            date = MONTH_FORMAT[parseInt(month, 10)] + " " + day + ", " + year;
         var tag = data.feed.entry[i].category[0].term;
         var content = data.feed.entry[i].content.$t;
         var description =content.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, description_length) + "...";
         var $content = $("<div>").html(content);
         if (
            content.indexOf("http://www.youtube.com/embed/") > -1 ||
            content.indexOf("https://www.youtube.com/embed/") > -1
         ) {
            var src2 = data.feed.entry[i].media$thumbnail.url;
            var src2_size = src2.replace("/default.jpg", "/mqdefault.jpg");
            var image = src2_size;
         } else if ("" != data.feed.entry[i].media$thumbnail.url) {
            var image = data.feed.entry[i].media$thumbnail.url.replace("/s72-c/", "/s1600/");
         } else {
            image ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkIfzapAUvO5fPihhlLAP78r7SH9CIsInGonKMQivB5IW7Owd-w86_i-Ij8ExBL7tl7qIrbAOHemVTouNNIUVZjovRhqlNMzghGDHDXAk68rzwJdZxDxbvI3C3Mcjk0ZqvOeIjUZW9YMUi/s1/default.png";
         }
         output += '<div class="option" style="--optionBackground:url(' +image +');"><div class="shadow"></div><div class="label"><i class="icon fa fa-star"></i><div class="info"><div class="main">' +tag +'</div><div class="sub">' +title +"</div></div></div></div>";
      }
      output += "</div>";
      softwebtuts.html(output);
      $(".option:first-child").addClass("active");
      $(".option").click(function () {
         $(".option").removeClass("active");
         $(this).addClass("active");
      });
   }
});
</script>

Code For Related Posts Widget:

To implement related posts widget you have to follow these steps:
  1. Go To Blogger Theme Editor
  2. Click Edit HTML
  3. Now Search for <data:post.body/> .
    4. To search anything in blogger theme editor press CTRL+F and type the term to search and hit enter.
  4. After the <data:post.body/> paste this code.
    5. <script type='text/javascript'>var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var randomLabel = labelArray[Math.floor(Math.random() * labelArray.length)];
</script>
  5. Now select the location to add this related posts widget and paste this code there.
    6. Note! The code provided below must be after the code provided above.
    <div class="expanding-flex-cards"></div>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css'/>
<style>
.expanding-flex-cards .options {
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   overflow: hidden;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-align: stretch;
   align-items: stretch;
   overflow: hidden;
   min-width: 600px;
   max-width: 1200;
   width: calc(100%);
   height: 400px;
}
@media screen and (max-width: 718px) {
   .expanding-flex-cards .options {
      min-width: 520px;
   }
   .expanding-flex-cards .options .option:nth-child(5) {
      display: none;
   }
}
@media screen and (max-width: 638px) {
   .expanding-flex-cards .options {
      min-width: 440px;
   }
   .expanding-flex-cards .options .option:nth-child(4) {
      display: none;
   }
}
@media screen and (max-width: 558px) {
   .expanding-flex-cards .options {
      min-width: 360px;
   }
   .expanding-flex-cards .options .option:nth-child(3) {
      display: none;
   }
}
@media screen and (max-width: 478px) {
   .expanding-flex-cards .options {
      min-width: 280px;
   }
   .expanding-flex-cards .options .option:nth-child(2) {
      display: none;
   }
}
.expanding-flex-cards .options .option {
   position: relative;
   overflow: hidden;
   min-width: 60px;
   margin: 10px;
   background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
   background-size: cover;
   background-position: center;
   cursor: pointer;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option:nth-child(1) {
   --defaultBackground: #ed5565;
}
.expanding-flex-cards .options .option:nth-child(2) {
   --defaultBackground: #fc6e51;
}
.expanding-flex-cards .options .option:nth-child(3) {
   --defaultBackground: #ffce54;
}
.expanding-flex-cards .options .option:nth-child(4) {
   --defaultBackground: #2ecc71;
}
.expanding-flex-cards .options .option:nth-child(5) {
   --defaultBackground: #5d9cec;
}
.expanding-flex-cards .options .option:nth-child(6) {
   --defaultBackground: #ac92ec;
}
.expanding-flex-cards .options .option.active {
   -webkit-box-flex: 10000;
   flex-grow: 10000;
   -webkit-transform: scale(1);
   transform: scale(1);
   max-width: 100%;
   margin: 0px;
   border-radius: 40px;
   background-size: cover;
}
.expanding-flex-cards .options .option.active .shadow {
   box-shadow: inset 30px -120px 120px -120px rgba(0, 0, 0, 1),
      inset 30px -120px 120px -120px rgba(0, 0, 0, 1);
}
.expanding-flex-cards .options .option.active .label {
   bottom: 20px;
   left: 20px;
}
.expanding-flex-cards .options .option.active .label .info > div {
   left: 0px;
   opacity: 1;
}
.expanding-flex-cards .options .option:not(.active) {
   -webkit-box-flex: 1;
   flex-grow: 1;
   border-radius: 30px;
}
.expanding-flex-cards .options .option:not(.active) .shadow {
   bottom: -40px;
   box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
.expanding-flex-cards .options .option:not(.active) .label {
   bottom: 10px;
   left: 10px;
}
.expanding-flex-cards .options .option:not(.active) .label .info > div {
   left: 20px;
   opacity: 0;
}
.expanding-flex-cards .options .option .shadow {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   height: 500px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label {
   display: -webkit-box;
   display: flex;
   position: absolute;
   right: 0px;
   height: 40px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label .icon {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   min-width: 40px;
   max-width: 40px;
   height: 40px;
   border-radius: 100%;
   background-color: white;
   color: var(--defaultBackground);
}
.expanding-flex-cards .options .option .label .info {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   flex-direction: column;
   -webkit-box-pack: center;
   justify-content: center;
   margin-left: 10px;
   color: white;
   white-space: pre;
   text-transform: capitalize;
}
.expanding-flex-cards .options .option .label .info > div {
   position: relative;
   -webkit-transition: 0.5s ease-in-out, opacity 0.5s ease-out;
   transition: 0.5s ease-in-out, opacity 0.5s ease-out;
}
.expanding-flex-cards .options .option .label .info .main {
   font-weight: bold;
   font-size: 1.2rem;
}
.expanding-flex-cards .options .option .label .info .sub {
   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.widget-loader {
   height: 0;
   width: 0;
   padding: 15px;
   border: 6px solid #000;
   margin: 10px auto;
   border-right-color: #fff;
   border-radius: 22px;
   -webkit-animation: rotate 1s infinite linear;
   position: absolute;
   left: 50%;
   top: 50%;
}
@keyframes rotate {
   0% {
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -ms-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
</style>
<script>
var softwebtuts = $(".expanding-flex-cards");
var description_length = 360; /*Number of words to show as description*/
var MONTH_FORMAT = [
   "January",
   "February",
   "March",
   "April",
   "May",
   "June",
   "July",
   "August",
   "September",
   "October",
   "November",
   "December"
]; // months formats to translation or change to another format
var NO_IMAGE =
   "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBzA6N7i1lVw08tD-WgokaH6QePzKFR4YLCAksefLRiNenlPfa3tzdi88gFCYjmN_xW_0T2YWZUTYp35UvIbGLyDTDstLX0QsysCsd1gi1r21Xdwr6q873Rx3n5_df5Yd1Qh4IqO6Fes/s1600-r/nth.png"; /* No Image Placeholder */
var website = "https://softwebtuts.blogspot.com"; /*Website URL*/
var max_results = "4"; /* Number of Results to Show */
$.ajax({
   url: website+"/feeds/posts/default/-/" + label + "?alt=json-in-script&max-results="+max_results,
   type: "get",
   dataType: "jsonp",
   beforeSend: function () {
      softwebtuts.after('<div class="widget-loader"/>');
   },
   success: function (data) {
      $(".widget-loader").remove();
      var url = "";
      var output = '<div class="options">';
      for (var i = 0; i < data.feed.entry.length; i++) {
         for (var j = 0; j < data.feed.entry[i].link.length; j++) {
            if (data.feed.entry[i].link[j].rel == "alternate") {
               url = data.feed.entry[i].link[j].href;
               break;
            }
         }
         for (var k = 0; k < data.feed.entry[i].link.length; k++) {
            var avatar = data.feed.entry[i].link[k].href;
            break;
         }
         var title = data.feed.entry[i].title.$t;
         var author = data.feed.entry[i].author[0].name.$t;
         var gd = data.feed.entry[i].published.$t,
            year = gd.substring(0, 4),
            month = gd.substring(5, 7),
            day = gd.substring(8, 10),
            date = MONTH_FORMAT[parseInt(month, 10)] + " " + day + ", " + year;
         var tag = data.feed.entry[i].category[0].term;
         var content = data.feed.entry[i].content.$t;
         var description =content.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, description_length) + "...";
         var $content = $("<div>").html(content);
         if (
            content.indexOf("http://www.youtube.com/embed/") > -1 ||
            content.indexOf("https://www.youtube.com/embed/") > -1
         ) {
            var src2 = data.feed.entry[i].media$thumbnail.url;
            var src2_size = src2.replace("/default.jpg", "/mqdefault.jpg");
            var image = src2_size;
         } else if ("" != data.feed.entry[i].media$thumbnail.url) {
            var image = data.feed.entry[i].media$thumbnail.url.replace("/s72-c/", "/s1600/");
         } else {
            image ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkIfzapAUvO5fPihhlLAP78r7SH9CIsInGonKMQivB5IW7Owd-w86_i-Ij8ExBL7tl7qIrbAOHemVTouNNIUVZjovRhqlNMzghGDHDXAk68rzwJdZxDxbvI3C3Mcjk0ZqvOeIjUZW9YMUi/s1/default.png";
         }
         output += '<div class="option" style="--optionBackground:url(' +image +');"><div class="shadow"></div><div class="label"><i class="icon fa fa-star"></i><div class="info"><div class="main">' +tag +'</div><div class="sub">' +title +"</div></div></div></div>";
      }
      output += "</div>";
      softwebtuts.html(output);
      $(".option:first-child").addClass("active");
      $(".option").click(function () {
         $(".option").removeClass("active");
         $(this).addClass("active");
      });
   }
});
</script>
  6. Save Template.

Perameters To Modify in the code:

There are some parameters that you have to define before using these blogger widgets. The list of parameters is as under.
ParameterDescription
https://softwebtuts.blogspot.comReplace this uRL with your website url
description_length = 360360 is the length of characters to show as post description. You don't need to change it because we don't want to show posts description.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBzA6N7i1lVw08tD-WgokaH6QePzKFR4YLCAksefLRiNenlPfa3tzdi88gFCYjmN_xW_0T2YWZUTYp35UvIbGLyDTDstLX0QsysCsd1gi1r21Xdwr6q873Rx3n5_df5Yd1Qh4IqO6Fes/s1600-r/nth.pngIt is the URL of image that will be shown when there is no thumbnail found for posts.

Wrap Up:

That's it for today's article if you like any blogger widget then add it to your website and have fun. I hope you will like these blogger widgets and subscribe to the newsletters of this blog for this kind of more articles.

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.