<?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;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About ￬</a>
<ul class="hidden">
<li><a href="#">Who I am</a></li>
<li><a href="#">What I Do</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio ￬</a>
<ul class="hidden">
<li><a href="#">Web</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Designing</a></li>
<li><a href="#">Development</a></li>
</ul>
</body>
</html>
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
if ( function_exists('register_sidebar') ) {register_sidebar(array('name' => 'Custom Sidebar','id' => 'custom-sidebar','description' => 'Sidebar below Header image','before_widget' => '<li id="%1$s">','after_widget' => '</li>','before_title' => '<h2>','after_title' => '</h2>',));}
<div id="custom-sidebar"><ul><?phpif ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom-sidebar') ) :endif; ?></ul><div style="clear:both"></div></div>
div#custom-sidebar ul {line-height: 20px;}div#custom-sidebar li.widget {width: 300px;margin:0 0 15px 20px;float:left;}div#custom-sidebar li.widget h2 {margin-bottom: 15px;}
