<?phpCSS Code - Put this below code in themes "Style.css"
/**
* Template Name: Masonry Blog
*
* Blog Template
*
*/
?>
<?php include_once( 'header.php' ); ?>
<!-- Start the Loop. -->
<div class="masonry">
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('posts_per_page=100'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div class="item">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
<?php the_title(); ?></a>
<?php if ( has_post_thumbnail() ) {
$size=75;
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
<?php the_post_thumbnail( $size ); } ?>
</a>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a>
</div>
<?php endwhile;?>
<?php $wp_query = null; $wp_query = $temp;?>
<!-- stop The Loop. -->
</div><!-- container -->
<?php get_footer(); ?>
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
}
@media only screen and (min-width: 400px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 700px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 1100px) {
.masonry {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
@media only screen and (min-width: 1280px) {
.wrapper {
width: 1260px;
}
}
<html>
<body>
<center><h1>Best Footer Design</h1></center>
<div class="socials">
<div class="container">
<aside class="footer_widget">
<ul class="socialicons">
<li><a target="_blank" href="https://www.facebook.com/756dk"><img alt="Facebook" src="https://tunedballoondemo.files.wordpress.com/2014/02/facebook.png"></a></li>
<li><a target="_blank" href="https://twitter.com/kapoordeepanshu"><img alt="Twitter" src="https://tunedballoondemo.files.wordpress.com/2014/02/twitter.png"></a></li>
<li><a target="_blank" href="https://plus.google.com/+DeepanshuKapoorcybersecurity"><img alt="Google" src="https://tunedballoondemo.files.wordpress.com/2014/02/google.png"></a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UC27t7pR8bt7HQVBEniIj39g"><img alt="YouTube" src="https://tunedballoondemo.files.wordpress.com/2014/02/youtube.png"></a></li>
<li><a target="_blank" href="https://instagram.com/kapoordeepanshu/"><img alt="Instagram" src="https://tunedballoondemo.files.wordpress.com/2014/02/instagram.png"></a></li>
</ul>
</aside> </div>
<!-- end container -->
</div>
</body>
</html>
.socials {
background: none repeat scroll 0 0 #110614;
color: #fff;
margin-top: 50px;
padding: 15px 0 5px;
text-align: center;
}
.container:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
.container {
width: 1280px;
}
.container {
margin: 0 auto;
position: relative;
width: 960px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ul.socialicons {
padding: 8px 0;
text-align: center;
}
ol, ul {
list-style: outside none none;
}
aside.footer_widget ul li {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
padding: 0;
}
.socials ul li {
color: #fff;
display: inline-block;
}
ul.socialicons li {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
padding: 5px 0;
}
aside ul li {
font-size: 1em;
padding: 5px 0;
}
