Awesome Looking Cards For Blogger

How to add this to blogger :

1. Go to blogger.
2. Paste the code of the widget in the place where you wanted, Like inside your post or in the widget place etc.
3. Edit the things in Red colour.
4. Easy step just copies paste.

For Demo Visit CodesEasy.com

Widget Codes :

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:400,700);
.blog-card {
  transition: height 0.3s ease;
  -webkit-transition: height 0.3s ease;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
  margin: 0 auto 0.6%;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  line-height: 1.45em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.blog-card:hover .details {
  left: 0;
}
.blog-card:hover.alt .details {
  right: 0;
}
.blog-card.alt .details {
  right: -100%;
  left: inherit;
}
.blog-card .photo {
  height: 200px;
  position: relative;
}
.blog-card .details {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  color: #fff;
  font-family: "Open Sans";
  list-style: none;
  margin: 0;
  padding: 10px 15px;
  height: 200px;
  position: absolute;
  top: 0;
  left: -100%;
}
.blog-card .details > li {
  padding: 3px 0;
}
.blog-card .details li:before, .blog-card .details .tags ul:before {
  font-family: FontAwesome;
  margin-right: 10px;
  vertical-align: middle;
}
.blog-card .details .author:before {
  content: "\f007";
}
.blog-card .details .date:before {
  content: "\f133";
}
.blog-card .details .tags ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-card .details .tags ul:before {
  content: "\f02b";
}
.blog-card .details .tags li {
  display: inline-block;
  margin-right: 3px;
}
.blog-card .details a {
  color: inherit;
  border-bottom: 1px dotted;
}
.blog-card .details a:hover {
  color: #75D13B;
}
.blog-card .description {
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}
.blog-card .description h1 {
  font-family: "Roboto";
  line-height: 1em;
  margin: 0 0 10px 0;
}
.blog-card .description h2 {
  color: #9b9b9b;
  font-family: "Open Sans";
  line-height: 1.2em;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 400;
  margin: 1.2% 0;
}
.blog-card .description p {
  position: relative;
  margin: 0;
  padding-top: 20px;
}
.blog-card .description p:after {
  content: "";
  background: #75D13B;
  height: 6px;
  width: 40px;
  position: absolute;
  top: 6px;
  left: 0;
}
.blog-card .description a {
  color: #75D13B;
  margin-bottom: 10px;
  float: right;
}
.blog-card .description a:after {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  content: "\f061";
  font-family: FontAwesome;
  margin-left: -10px;
  opacity: 0;
  vertical-align: middle;
}
.blog-card .description a:hover:after {
  margin-left: 5px;
  opacity: 1;
}
@media screen and (min-width: 600px) {
  .blog-card {
    height: 200px;
    max-width: 600px;
  }
  .blog-card:hover .photo {
    -webkit-transform: rotate(5deg) scale(1.3);
            transform: rotate(5deg) scale(1.3);
  }
  .blog-card:hover.alt .photo {
    -webkit-transform: rotate(-5deg) scale(1.3);
            transform: rotate(-5deg) scale(1.3);
  }
  .blog-card.alt .details {
    padding-left: 30px;
  }
  .blog-card.alt .description {
    float: right;
  }
  .blog-card.alt .description:before {
    -webkit-transform: skewX(5deg);
            transform: skewX(5deg);
    right: -15px;
    left: inherit;
  }
  .blog-card.alt .photo {
    float: right;
  }
  .blog-card .photo {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    float: left;
    height: 100%;
    width: 40%;
  }
  .blog-card .details {
    width: 40%;
  }
  .blog-card .description {
    float: left;
    width: 60%;
    z-index: 0;
  }
  .blog-card .description:before {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    content: "";
    background: #fff;
    width: 100%;
    z-index: -1;
    position: absolute;
    left: -15px;
    top: 0;
    bottom: 0;
  }
}
.blog-card .photo.photo1 {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GI9ZIltC8LvqUaaq3jC9LBVNDyGwLgSmM3nzh1lBlQZyofHIQPPqmWOVtHobqnqyl-LUjt0E913i42Iikz1mDGhTNVfHtR5UcJoN1W0KHOd2NExF2gb7_pqbWyFhFEhpQAKfozVeDSA/s640/implement-webview.png") center no-repeat;
  background-size: cover;
}
</style>
<div class="blog-card">
    <div class="photo photo1"></div>
    <ul class="details">
        <li class="author"><a href="https://plus.google.com/108892420465125814141">Vishnu</a></li>
        <li class="date">October 16, 2017</li>
        <li class="tags">
            <ul>
                <li><a href="https://www.codeseasy.com/search/label/Professional-WebView-Application">Professional-WebView-Application</a></li>
                <li><a href="https://www.codeseasy.com/search/label/Android-Studio">Android-Studio</a></li>
            </ul>
        </li>
    </ul>
    <div class="description">
        <h1><span style="font-size: 30px;">WebView</span></h1>
        <h2>Webview and navigation drawer activity</h2>
        <p class="summary">Easy way to Implement WebView To Navigation Drawer Activity.Convert website to app. Load website in your application.<br/></p>
        <a href="https://www.codeseasy.com/2017/10/implement-webview.html">Read More</a>
    </div>
</div>

That's all simple ways to have an amazing looking card on your Blog.