This is documentation for Zipson Blogger Template from weblogtemplates.

Changing color codes in template

Just use template designer->Advanced section from customize section of blogger template section. You can also change the header banner using template designer.
It is also easy to adjust width of template.
Template->Customize->Adjust Widths section

Setting Config

In your blogger template admin panel navigate to template section and click edit html button. And search for codes as shown below
var rmorepost = "Continue Reading...";
summary_noimg = 340; //text content length in home page if there is no image in post
summary_img = 240; //text content length in home page if there is image in post
imgr = new Array();
imgr[0] = "https://1.bp.blogspot.com/-nhrIA7_1ei0/UkHKoMI2UTI/AAAAAAAAA28/a9-8_0KXPTI/s1600/no-thumb.jpeg";
numposts = 10; //change this to maximum value
//related posts settings
var defaultnoimage = "https://1.bp.blogspot.com/-nhrIA7_1ei0/UkHKoMI2UTI/AAAAAAAAA28/a9-8_0KXPTI/s1600/no-thumb.jpeg";
var maxresults = 3;
var relatedpoststitle = " Related Posts";
var norelatedpoststitle = " No related posts" 
         
Change these variables with your requirements.
rmorepost - Continue Reading text
summary_noimg - Summary text length when there is no image in post.
summary_img - Summary text length when there is image in post.
imgr[0] - Magazine widgets no thumb default image.
numposts - Default number of posts for sidebar recent posts. Not important.

Related posts settings

defaultnoimage - Related posts no thumb default image.
maxresults - Number of posts to show in relates posts area
relatedpoststitle - Related post heading text when there is more than one related post.
norelatedpoststitle - Related post heading text when there is no related posts.

Recent posts with small thumbnail

Code for html widget. Replace Featured with your own label.
<div class="small-recent-posts">
<script>
widgetrc(
 'Featured','3','singlecolumnsmallthumb'
);
</script>
</div>
        

This code if need to showcase recent posts.

<div class="small-recent-posts">
<script>
widgetrc(
 '','3','singlecolumnsmallthumb'
);
</script>
</div>
        

Email subscribe widget

Widget code, that you can add to heml blogger widget.
<div class="email-subscribe">
<!-- begin email Signup form -->
<div id="mc_embed_signup">
<form action="//weblogtemplates.us11.list-manage.com/subscribe/post?u=91444a0491590ace129c2bade&id=74d9763d1f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your email address" required="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_91444a0491590ace129c2bade_74d9763d1f" tabindex="-1" value="" /></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" /></div>
</div>
</form>
</div>
<!-- end email Signup form-->
</div>
        
Code between <!-- begin email Signup form --> and <!-- end email Signup form--> . And it supports most of email marketing services.

Social Media Widget

<div class="social">
<a href="#" title="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" title="vimeo"><i class="fa fa-vimeo-square"></i></a>
<a href="#" title="flickr"><i class="fa fa-flickr"></i></a>
<a href="#" title="dribbble"><i class="fa fa-dribbble"></i></a>
<a href="#" title="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" title="google plus"><i class="fa fa-google-plus"></i></a>
</div>
        
Replace # with social media urls.