After getting inspired of Flat UI framework which is developed using the Bootstrap. I thought of implementing the same elegant concept into blogger template. This blogger template is made responsive and customized to support most of the components of Flat UI and Bootstrap. You can find the widget codes with Flat UI in this post.
Custom codes are available for Search widget, Contact Form widget and Subscribe to Email widget to make it look like the Flat UI. Widget code for Navigation Menu with Drop down Menu and Search Box is also provided.
Navigation Menu
You can add Responsive Navigation Menu by adding the below codes in the Widget Area.
<nav class="navbar navbar-inverse navbar-embossed" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
<span class="sr-only">Toggle navigation</span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav navbar-left">
<li><a href="/index.html">Home</a></li>
<li><a href="/p/components.html">Components</a></li>
<li><a href="http://www.techirsh.com">Widgets</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Catagory<b class="caret"></b></a>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a href="/search/label/Android">Android</a></li>
<li><a href="/search/label/Apple">Apple</a></li>
<li><a href="/Samsung">Samsung</a></li>
<li class="divider"></li>
<li><a href="/search">Show All</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Authors<span class="navbar-new">3</span></a>
<ul class="dropdown-menu">
<li><a href="#">Author One</a></li>
<li><a href="#">Author Two</a></li>
<li><a href="#">Author Three</a></li>
</ul>
</li>
<li><a href="#fakelink">About Us</a></li>
</ul>
<form class="navbar-form navbar-right" action="/search" role="search">
<div class="form-group">
<div class="input-group">
<input class="form-control" id="navbarInput-01" type="search" placeholder="Search" name="q"/>
<span class="input-group-btn">
<button type="submit" class="btn"><span class="fui-search"></span></button>
</span>
</div>
</div>
</form>
</div></nav>
Contact Form
Since blogger supports contact form officially we dont have to depend on any third party contact form providers. To make the look and feel of default contact form of blogger to Flat UI style i have customized the contact form that works anywhere in the widget of even in the blog page/post
<form name="contact-form">
<div class="form-group">
<input type="text" class="form-control login-field" value="" placeholder="Name" id="ContactForm1_contact-form-name" name="name"/>
<span class="input-icon fui-user"></span>
</div>
<div class="form-group">
<input type="text" class="form-control login-field" value="" placeholder="Email" id="ContactForm1_contact-form-email" name="email"/>
<span class="input-icon fui-mail"></span>
</div>
<div class="form-group">
<textarea type="text" class="form-control login-field" value="" placeholder="Message" id="ContactForm1_contact-form-email-message" name="email-message"/></textarea>
<span class="input-icon fui-chat"></span>
</div>
<input class="btn btn-primary btn-lg btn-block" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</form>
Search Box
You can add search box to the blog using the below code
<form id="searchthis" action="/search" style="display:inline;" method="get">
<div class="form-group">
<div class="input-group">
<input autocomplete="on" class="form-control" name="q" title="search" placeholder="Search" id="search-query-3" />
<span class="input-group-btn">
<button type="submit" class="btn"><span class="fui-search"></span></button>
</span>
</div>
</div>
</form>
Email Subscription Form
You can add Email Subscription Form to blogger using the below code. Make sure you change the text techirsh highlighted in red with your feedburner id.
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=techirsh", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">
<div class="form-group">
<input type="text" class="form-control login-field" value="" name="email" placeholder="Email address..." name="email-message"/>
<span class="input-icon fui-mail"></span>
</div>
<div class="form-group">
<input class="btn btn-primary btn-lg btn-block" type="submit" value="Subscribe" />
<input name="uri" type="hidden" value="techirsh" />
<input name="loc" type="hidden" value="en_US" />
</div></form>
No comments:
Post a Comment