Sunday, May 22, 2016

Dearpins Blogger Template Code and Docs

This is documentation for Dearpins 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
      summary_noimg = 340;
      summary_img = 240;
      postthumbnail = "w250-h160-c";
      imgr = new Array();
      imgr[0] = "https://1.bp.blogspot.com/-nhrIA7_1ei0/UkHKoMI2UTI/AAAAAAAAA28/a9-8_0KXPTI/s1600/no-thumb.jpeg";
      numposts = 9;
      showRandomImg = true;
      //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.
summary_noimg - Summary text length when there is no image in post.
summary_img - Summary text length when there is image in post.
postthumbnail - Adjust Home page post Thumbnail size
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="well">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=weblogtemplates", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">
    <div class="form-group">
<input id="follow-by-email-address" name="email" placeholder="Email address..." type="text" class="form-control" />
</div>
<div class="form-group">
<input id="follow-by-email-submit" type="submit" value="Submit" class="btn btn-danger btn-email" /> <input name="uri" type="hidden" value="weblogtemplates" /> <input name="loc" type="hidden" value="en_US" />
</div>
</form>
</div>

Tuesday, January 12, 2016

Zipson Blogger Template Docs, Code Snippets

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] = "http://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 = "http://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.

Monday, May 4, 2015

MaterialBT Material Design Blogger Template - Doc and Code Snippets

This is documentation for MaterialBT Blogger Template from weblogtemplates. MaterialBT is a business blogger template with some cool features.

Saturday, February 28, 2015

Vcol Blogger Template Doc and Code Snippets

This is documentation for vcol business blogger template from weblogtemplates. Vcol is a business blogger template with some cool features.

Sunday, January 25, 2015

Clean Blogger - Footer Social Media Links

Social media links in footer. 
<ul class='list-inline text-center'>
                        <li>
                            <a href='https://twitter.com/weblogtemplates'>
                                <span class='fa-stack fa-lg'>
                                    <i class='fa fa-circle fa-stack-2x'/>
                                    <i class='fa fa-twitter fa-stack-1x fa-inverse'/>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href='https://www.facebook.com/weblogtemplates'>
                                <span class='fa-stack fa-lg'>
                                    <i class='fa fa-circle fa-stack-2x'/>
                                    <i class='fa fa-facebook fa-stack-1x fa-inverse'/>
                                </span>
                            </a>
                        </li>
      <li>
                            <a href='http://www.pinterest.com/weblogtemplates/'>
                                <span class='fa-stack fa-lg'>
                                    <i class='fa fa-circle fa-stack-2x'/>
                                    <i class='fa fa-pinterest fa-stack-1x fa-inverse'/>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href='https://plus.google.com/+weblogtemplatesnet'>
                                <span class='fa-stack fa-lg'>
                                    <i class='fa fa-circle fa-stack-2x'/>
                                    <i class='fa fa-google-plus fa-stack-1x fa-inverse'/>
                                </span>
                            </a>
                        </li>
                    </ul>

Clean Blogger - Main Nav Bar

Clean Blogger Template nav bar code. Find this code in your template and add proper links replacing existing links.
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
          <ul class='nav navbar-nav navbar-right'>
            <li>
              <a href='#'>
                Work
              </a>
            </li>
            <li>
              <a href='#'>
                About
              </a>
            </li>
            <li>
              <a href='#'>
                Blog
              </a>
            </li>
            <li>
              <a href='#'>
                Contact
              </a>
            </li>
          </ul>
        </div>

Saturday, December 13, 2014

How to Create Google API keys to Access Blogger Blogs using API

Do you need to use your blogger blog posts outside blogger? Google APIS are one of the easiest way to get access to your blogger blogs(posts,comments and mane more) and use it in other applications like Android APPS, iPhone apps or even in other web applications.
Today we are here with a tutorial which will help you to generate API keys from Google API console along with enabling blogger v3 APIS.