Blog Shortcodes

										
<section class="latest-blog-area">
<div class="col-md-4 col-sm-6">
<div class="single-blog">
<a href="#"><img src="img/blog/blog-1.jpg" alt="" />
<div class="post-date">
<div class="date-month">
<span class="date">18</span>
<span class="month">May</span>
</div>
</div>
</a>
<div class="blog-bottom">
<div class="blog-comment">
<span><b>By Amin: </b> Salim Rana</span>
<p><i class="zmdi zmdi-comments"></i><b>22</b></p>
<p><i class="zmdi zmdi-favorite"></i><b>10</b></p>
</div>
<div class="news-content">
<h2><a href="#">Lucrative Fashion Trend 2016</a></h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever....</p>
<a href="#">Read More <i class="zmdi zmdi-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="single-blog">
<a href="#"><img src="img/blog/blog-2.jpg" alt="" />
<div class="post-date">
<div class="date-month">
<span class="date">25</span>
<span class="month">June</span>
</div>
</div>
</a>
<div class="blog-bottom">
<div class="blog-comment">
<span><b>By Amin: </b> Kausar Al Mamun</span>
<p><i class="zmdi zmdi-comments"></i><b>35</b></p>
<p><i class="zmdi zmdi-favorite"></i><b>17</b></p>
</div>
<div class="news-content">
<h2><a href="#">Lucrative Fashion Trend 2016</a></h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever....</p>
<a href="#">Read More <i class="zmdi zmdi-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm">
<div class="single-blog">
<a href="#"><img src="img/blog/blog-3.jpg" alt="" />
<div class="post-date">
<div class="date-month">
<span class="date">15</span>
<span class="month">July</span>
</div>
</div>
</a>
<div class="blog-bottom">
<div class="blog-comment">
<span><b>By Amin: </b> Nirob Kahn</span>
<p><i class="zmdi zmdi-comments"></i><b>87</b></p>
<p><i class="zmdi zmdi-favorite"></i><b>25</b></p>
</div>
<div class="news-content">
<h2><a href="#">Lucrative Fashion Trend 2016</a></h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever....</p>
<a href="#">Read More <i class="zmdi zmdi-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</section>
/*Blog Style Two*/
<section class="blog-area">
<div class="col-md-4 col-sm-6">
<div class="blog-single">
<figure class="blog-single effect-chico">
<a href="#">
<img src="img/blog/1.jpg" alt="" />
<span class="blog-date">JAN 19</span>
</a>
<figcaption></figcaption>
</figure>
<div class="blog-content">
<h2><a href="#">The standard Lorem Ipsum passage</a></h2>
<div class="blg-comment">
<span class="author"><i class="zmdi zmdi-account"></i>By: Kausar Al Mamun</span>
<span class="comment-count"><i class="zmdi zmdi-comment-alt"></i>Comment: 15</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="blog-single">
<figure class="blog-single effect-chico">
<a href="#">
<img src="img/blog/2.jpg" alt="" />
<span class="blog-date">JAN 21</span>
</a>
<figcaption></figcaption>
</figure>
<div class="blog-content">
<h2><a href="#">The standard Lorem Ipsum passage</a></h2>
<div class="blg-comment">
<span class="author"><i class="zmdi zmdi-account"></i>By: Md Sajib</span>
<span class="comment-count"><i class="zmdi zmdi-comment-alt"></i>Comment: 12</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
<div class="blog-single">
<figure class="blog-single effect-chico">
<a href="#">
<img src="img/blog/3.jpg" alt="" />
<span class="blog-date">JAN 10</span>
</a>
<figcaption></figcaption>
</figure>
<div class="blog-content">
<h2><a href="#">The standard Lorem Ipsum passage</a></h2>
<div class="blg-comment">
<span class="author"><i class="zmdi zmdi-account"></i>By: Zenaul Islam</span>
<span class="comment-count"><i class="zmdi zmdi-comment-alt"></i>Comment: 25</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</section>
								
										
									

										
.latest-blog-area {
padding: 80px 0;
}
.blog-area {
padding-top: 80px;
}
.single-blog {
color: #666666;
margin-top: 40px;
overflow: hidden;
position: relative;
}
.single-blog img{transition: all 0.5s ease 0s;}
.single-blog:hover img {
transform: scale(1.1);
}
.single-blog > a {
display: block;
overflow: hidden;
position: relative;
}
.post-date {
background: #24ccd7 none repeat scroll 0 0;
bottom: 0;
color: #fff;
font-size: 16px;
font-weight: 700;
height: 60px;
line-height: 20px;
position: absolute;
right: 0;
text-align: center;
width: 70px;
}
.date-month {
padding: 10px;
}
.blog-bottom {
background: #f0f0f0 none repeat scroll 0 0;
padding: 20px;
}
.news-content > h2 {
margin: 0 0 18px;
}
.news-content > h2 a{
font-size: 20px;
font-weight: 700;
color:#444444;
}
.blog-comment {
margin: 0 0 10px;
}
.blog-comment > p {
display: inline-block;
float: right;
margin: 0;
}
.blog-comment > p:last-child {
margin: 0 15px 0 0;
}
.blog-comment p b {
margin-left: 10px;
}
.news-content > p {
color: #444444;
font-weight: 300;
margin: 0 0 32px;
}
.news-content > a {
color: #666666;
font-size:13px;
}
.news-content > a:hover{padding-left:4px;color:#24ccd7;}
/*Blog Style Two*/
.blog-single {
display: block;
margin-top: 35px;
overflow: hidden;
position: relative;
}
.blog-single figure.blog-single{margin-top: 0px;}
.blog-single > a {
display: block;
overflow: hidden;
position: relative;
}
.blog-date {
background: #24ccd7 none repeat scroll 0 0;
border-radius: 0 20px 20px 0;
bottom: 18px;
color: #fff;
font-size: 18px;
font-weight: 500;
left: 0;
padding: 5px 25px;
position: absolute;
z-index:99999;
}
.blg-comment {
color: #666;
}
.blog-content h2 a {
color: #666;
font-size: 18px;
}
.blog-content h2 a:hover{color:#24CCD7;}
.author {
margin-right: 50px;
}
span.author i, span.comment-count i {
margin-right: 10px;
color: #BDBDBD;
}
.blog-content > p {
color: #666;
margin: 20px 0 27px;
}
.blog-content > a {
border: 1px solid #bdbdbd;
color: #666666;
display: block;
font-size: 16px;
padding: 5px;
text-align: center;
width: 110px;
}
.blog-content > a:hover{border: 1px solid #24CCD7;}
figure.effect-chico > a {
background: #111 none repeat scroll 0 0;
}
figure.effect-chico img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
.blog-single:hover figure.effect-chico img {
opacity: 0.4;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-chico figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-chico figcaption::before{
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.blog-single:hover figure.effect-chico figcaption::before{
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}