BS3 - Responsive Blogger template cá nhân, công nghệ

BS3 là một template dành cho Blogger với thiết kế responsive, giao diện đơn giản nhưng rất chuyên nghiệp với đầy đủ các tính năng cần thiết cho một blog dành cho cá nhân hay công nghệ. Template được thiết kế bởi Bootstrap. Để thuận tiện cho các blogger, sau đây mình sẽ cung cấp các đoạn code trong template để các bạn có thể dễ dàng chỉnh sửa.
- Dropdown Menu:
<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>
...
- Search Box:
<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 Subscription:
<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>
Không có nhận xét nào: