Slive BLogger

You are reading Tutorial from KiMiDev

<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'/>
  <center>
   <h2 class='heading'>Blogger Widgets</h2>
   <b class='tagline'>Expanding Flex Cards Blogger Widget by <a class='mark' href='https://www.kimidev.site' target='_blank'>Softweb Tuts</a></b>
</center>
<div class="expanding-flex-cards"></div>

<style> 
  body {
   font-family: "Roboto", sans-serif;
   padding-top:90px;
}
.heading {
   text-align: center;
   font-size: 3em;
   line-height: 0.1em;
}
.tagline a.mark {
   padding: 2px 5px;
   color: #fff;
   background: #5d9cec;
   text-decoration: none;
   border-radius: 5px;
}
.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;
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/AVvXsEhgxV6lbLCMxfrlp8yZ8UWwnEJiie13XRm31lGumOIugc9DFXSjlH6hGh_yHaIghNgVrGLmrcJ8NjB4vnSknUuXUryGpBBmPy7CgAhfp5bjjmHmMPQBRA7m5u9exK9Cg1oD6hXqyhmNR00/s1600-r/nth.png";
var website = "https://www.kimidev.site";
var max_results = "4";
$.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/AVvXsEjtROvhBT1NfCmgUQKfaPRjk7kS76LT-vNyCDm5T-EU1_ch2J57UVn74SdiD3BW2JoQsiY8jn1XuBYyR3qpShjqMkyCbsXPLK9OsZiPLR7xm8x1WXkA-Xu5lT4hGCfOUNZMJ_T8nlPRNxIm/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>