add bootstrap3.0 accordion to blogger

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

bootstrap accordion

  • 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>,
  • <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) ‘/>

  • Now choose add a gadget where you want add accordion.Choose html/javascript ,add below code
  • <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>

  • 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.

That’s all you have successfully created accordion in blogger.

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment