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.
Using template designer we can easily customize each and every part of this template. Just use template designer->Advanced section from customize section of blogger template section.

It is also easy to adjust width of template.

Template->Customize->Adjust Widths section
This is the multiple drop down menu code for MaterialBT blogger template. Just follow the hierarchy to change multiple drop down links in your blog.
<nav class="teal lighten-1">
<div class="nav-wrapper">
<a class="waves-effect waves-light brand-logo logo-main"><i class="medium mdi-action-home"></i></a>
<ul class="right side-nav" id="slide-out">
<li><a class="waves-effect waves-light" href="#!">About</a></li>
<li><a class="waves-effect waves-light" href="#!">Contact</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="waves-effect waves-light collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body" style="">
<ul>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect waves-light" href="#!">About</a></li>
<li><a class="waves-effect waves-light" href="#!">Contact</a></li>
<li><a class="waves-effect waves-light dropdown-button" data-activates="dropdown1" href="#!">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a><ul class="dropdown-content" id="dropdown1">
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul></li>

</ul>
<a class="button-collapse" data-activates="slide-out" href="#"><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
Complete Documentation of Material Design Elements

Email Subscribe widget code

<div class="email-subscribe" id="email-subscribe">
<h4 class="title">Get this stuff<br /> <span>in your MAIL</span></h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=weblogtemplates', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1">
<input class="email-field" type="text" value="" placeholder="Enter your email here" name="email" />
<input type="hidden" value="weblogtemplates" name="uri" /><input type="hidden" name="loc" value="en_US" />
<input class="submit" name="submit" type="submit" value="Sign Up Now" />
</form>
<div class="clear"></div>
</div>
Replace weblogtemplates with yours blogs feedburner handle.

Change read more text

var rmorepost = "Read more";
Find this code and replace text.

Related post settings codes

//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" 
maxresults stands for number of results and defaultnoimage for default image if there is no image in post.

4 comments :

4 comments :

  1. Plz help how to increase the no of posts on front page
    i want to increase no of posts on front page
    its displays only 5 posts
    i want to increase
    plz help
    http://www.world4hack.net/

    ReplyDelete
    Replies
    1. a mi me pasa exactamente lo mismo , pls si te enteras de como hacerlo envíame un mail a rubsalma@gmail.com

      Delete
    2. a mi me pasa exactamente lo mismo , pls si te enteras de como hacerlo envíame un mail a rubsalma@gmail.com

      Delete
  2. How do I change color of the top navigation?
    Though I use "Navigation" of template designer, the color remains green.

    ReplyDelete