Meton Responsive Blogger Template | Download and Customization

Preview | Download

Customization:

I have made the customization easy for you by breaking the template code into sectional parts. Find the following pieces of code in the template after installation and make your customization over there.

Header:

.header-wrapper {
background: #272727;
display: block;
float: left;
width: 100%;
padding: 0;
padding-bottom: 25px;
border-bottom: 15px solid #fff;
}

Header Social Buttons:

.topbar-right {
text-align: right;
padding-right: 15px;
margin-top: 45px;
margin-bottom: 38px;
}

Header News Trending:

.top-bar {
background: none repeat scroll 0% 0% #fff;
color: #ACACAC;
padding: 0;
font-size: 12px;
line-height: 40px;
}

Header Menu Bar:

#menu-bar {
float: left;
width: 100%;
background: #fff;
margin-top: -63px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
ul#menu-main {
padding: 5px;
margin: 0;
}
ol, ul {
padding: 10px 0 20px;
margin: 0 0 0 35px;
text-align: left;
}
ol, ul {
list-style: none;
}

Featured Posts(slideshow section):

.featured-posts-section {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
padding-top: 20px;
}

Top 728x90 Ad:

<!-- google_ad_section_show_on_home_and_blog_start -->
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDSQGt6xlQU-rzhRMnyQViRqCraBT_UgA0-oFIJLOUQMX32TvkUQmvsAt3mXrNUVaKKQLI6tD2rYmpL9cIyc4V1ejXqwA_1QEX7L8uD-IkMqHdYl2c48DTQYLpyHBs7Zh7tbWkjiVv_EQ/s1600/ad-darker.jpg">
</center>

Sidebar:

.sidebar {
width: 32.33%;
overflow: hidden;
float: left;
margin-top: 8px;
}

Bottom 728x90 Ad:

<!-- google_ad_section_show_on_home_and_blog_end -->
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDSQGt6xlQU-rzhRMnyQViRqCraBT_UgA0-oFIJLOUQMX32TvkUQmvsAt3mXrNUVaKKQLI6tD2rYmpL9cIyc4V1ejXqwA_1QEX7L8uD-IkMqHdYl2c48DTQYLpyHBs7Zh7tbWkjiVv_EQ/s1600/ad-darker.jpg">
</center>

‘Load More Articles’ Button:

#load-more a:hover {
-webkit-box-shadow: inset 50pc 0px 0px #D34444;
-moz-box-shadow: inset 50pc 0px 0px #D34444;
box-shadow: inset 50pc 0px 0px #D34444;
}

#load-more a {
background: #e84c4c;
padding: 15px 0;
color: #fff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
overflow: hidden;
font-weight: 700;
display: inline-block;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
}

Footer:

#footer {
background: #202020;
display: block;
overflow: hidden;
width: 100%;
color: #959595;
}

Hope I covered the main elements that can be customized. Feel free to ask if you need any guidance in customizing this template.