BS3 Responsive Blogger template

/in , , , /by

Live Preview
Download

Today we are here with another cool blogger template. Like our previous template this one is also powered by twitter bootstrap(BS3 is powered by latest version of Bootstrap, ie bootstrap 3.03). This is just a minimal and SEO friendly blogger template with responsive design.
Some cool features are minimal design, easy to customize(Bootstrap 3) and perfect responsive design.

Features of BS3 Blogger template

Responsive Design

Yes, BS3 is a fully responsive blogger template. We are using Bootstrap 3 responsive features to give consistent performance in most of devices. If you need to keep same design in all devices make sure to disable default mobile layout in blogger otherwise will show default mobile template in smart phones and other mobile phones.

Customization

I am a great fan of Bootstrap, and using bootstrap for most of my web application development, websites and blogger templates. This blogger template also powered by bootstrap. Bootstrap will add some extra css files, but still it gives site a nice and cool look compared to other blogger templates.

Minimal Blog design

BS3 is having minimal design, we did that to keep it simple. Used black and white colors in most of places.
 

Editing navigation Links 

<div class='navbar navbar-default navbar-static-top main-top-nav row' role='banner'>
      <div class='navbar-header'>
        <button class='navbar-toggle' data-target='.bs-navbar-collapse2' data-toggle='collapse' type='button'>
          <span class='sr-only'>
            Toggle navigation
          </span>
          <span class='icon-bar'/>
          <span class='icon-bar'/>
          <span class='icon-bar'/>
        </button>
        
      </div>
      <nav class='collapse navbar-collapse bs-navbar-collapse2' role='navigation'>
        <ul class='nav navbar-nav'>
  <li class='open'>
          <a href='/'>
              home
            </a>
          </li>
          <li>
            <a href='#'>
              Getting started
            </a>
          </li>
          <li>
            <a href='#'>
              CSS
            </a>
          </li>
          <li>
            <a href='#'>
              Components
            </a>
          </li>
          <li>
            <a href='#'>
              JavaScript
            </a>
          </li>
          <li>
            <a href='#'>
              Customize
            </a>
          </li>
        </ul>
      </nav>
    </div>

Replace href ‘#’ with links and text with your own links and titles. Secondary navigation also works in similar way.

Search bar code

<form method="get" class="search-form" action="/search" role="search">
<div class="form-group">
<input type="search" name="q" placeholder="Search this website…" class="form-control" />
</div>
</form>

Feedburner email subscriptions 

<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">
<fieldset>
    <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-black btn-block" /> <input name="uri" type="hidden" value="weblogtemplates" /> <input name="loc" type="hidden" value="en_US" />
</div>
</fieldset>
</form>
</div>

Replace weblogtemplates with your own feedburner email id.
What is next?
Right now I am working on couple of blogger templates. Featured post widgets using labels, better related posts are some features of upcoming templates. Subscribe for email updates to get notified when we launch those templates.
Note

You may find some difficulties while looking at  Layout in blogger panel. It is just due to responsive nature of this blogger template.

Top ‘Add a widget’ section above ‘Blog Posts’ is for logo just near to logo. After blog posts, each sections from top to bottom stands for Right sidebar, Footer widget section 1, Footer widget section 2 and Section 3.

You might also like