How to Add a Module on the Homepage of a Blog in Blogger

Single page website development is the trend of the era and you will be searching something like this to enhance the homepage of your blog.

This CODE helps you adding the module either in Hardcode or a customizable widget area on the layout section of your blogger dashboard.

This also will tell you - "How to Add Widget in the layout of your dashboard?"

To put any module or a snippet of web page module on the web page insert your coding between

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Here
</b:if>

Now in the place of "Here"  put your module and save your template.


You can use a client logo slider in the homepage at the bottom of the posts, the coding of which is below. the coding will look like the image below :

<!-- slider -->
<div class='slider-container'>
<div class='slider-container-c'>
  <h2>Our Leading Clients</h2>
  <p>Awesome people who trust us</p>
<ul id='slider'>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg'/></a></li>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg'/></a></li>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg'/></a></li>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg'/></a></li>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg'/></a></li>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg'/></a></li>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/7.jpg'/></a></li>
<li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/8.jpg'/></a></li>
</ul>
</div>
</div><!-- /slider -->

Above coding in the place of "Here" in the first code snippet is not enough to get the slider work for you. You need to put Jquery and CSS for this slider.

Below is the CSS code along with Jquery thereof.

             
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#slider&#39;).bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>

And the CSS is Here

* Logo Slider */
/*
jQuery Logo Slider Ticker
by http://webdesignandsuch.com
build with code from http://bxslider.com
*/
.bx-wrapper img {
border: 1px solid #ECECEC;
}



#slider {
list-style: none;
padding: 0px;
}



#slider img {
width: 200px;
height: 125px;
margin: 0px;
display: inline-block;
}



#slider li {
width: 210px;
}



.slider-container-c {
width: 980px;
margin: auto;
}



div.slider-container {
text-align: center;
background-image: url(http://www.acquacreativestudio.com/sites/emblem/img/pattern.jpg);
padding-top: 10px;
padding-bottom: 70px;
}



div.bx-wrapper {
width: 980px!important;
}



div.bx-window {
width: 980px!important;
}



div.slider-container-c h2 {
text-transform: uppercase;
font-size: 25px;
margin-bottom: 0px;
}



div.slider-container-c p {
font-size: 14px;
margin-top: 5px;
margin-bottom: 40px;
}

 Remember CSS and Jquery is subjected to be used before </head> and CSS between <style></style>


In case of any problem, comment below and let me know. I will try to solve that for you.