Hi friends ,in this post I am sharing how to add bootstrap 3.0 accordion to blogger.It’s very simple to add this and need a little work.It’s like archive but for some important links to make visible,different and attractive this type of accordion will be good option.Look below image its created using normal bootstrap colours.If it is customized with colours look very attractive.Another plus in accordion it show and hide content by clicking it
- Look a sample here>>
- First you have to add bootstrap links in blogger.If not follow the below steps.
- Goto your blogger account>>Template>>Edit html and add below <head>,
- Now choose add a gadget where you want add accordion.Choose html/javascript ,add below code
- We have just added block button type as an extra thing to links inorder to make neat structure..
- Just replace link”#” with your required link .Replace Link1and others to display name of the link.
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<link href=’your direct link url (min.css’media='screen' rel='stylesheet'/>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src='http://code.jquery.com/jquery-1.10.1.min.js'/>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.min.js'/>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src=’your direct link url(min.js) ‘/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link1</a></button>
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link11</a></button>
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link12</a></button>
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link13</a></button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link2</a>
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link21</a></button>
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link22</a></button>
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link23</a></button>
</button></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<button type="button" class="btn btn-default btn-lg btn-block"><a href="#">Link3</a>
</button></div>
</div>
</div>
</div>
That’s all you have successfully created accordion in blogger.
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment