create a simple footer in blogger using bootstrp3.0

Hi friends,In the previous post we shared about navbar using bootstrap in this post I am sharing create a footer using bootstrap panel.Not only with panel ,in future posts we will update more.Keep in mind you should have links on bootstrap minified css ,js,jquery .

bootstrap footer

If not just follow the below procedure,

  • Now 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) ‘/>
  • before </body> add the following code,

<!—Container to adjust width-->

<div class='container'>

<div class=’row’>

<!—Footer1-->

<div class='col-md-4'>
<div class='panel panel-primary'>
  <div class='panel-heading'>
<h3 class='panel-title'>Connect Us</h3>
  </div>
  <div class='panel-body'>
    <b:section class='NewContainer' id='Newfooter1'  preferred='yes'/>
Basic panel example
  </div>
  </div>
  </div>

<!—Footer2-->


<div class='col-md-4'>
<div class='panel panel-primary'>
  <div class='panel-heading'>
<h3 class='panel-title'>Connect Us</h3>
  </div>
  <div class='panel-body'>
    <b:section class='NewContainer' id='Newfooter2'  preferred='yes'/>
Basic panel example
  </div>
  </div>
  </div>

<!—Footer3-->


<div class='col-md-4'>
<div class='panel panel-primary'>
  <div class='panel-heading'>
<h3 class='panel-title'>Connect Us</h3>
  </div>
  <div class='panel-body'>
    <b:section class='NewContainer' id='Newfooter3'  preferred='yes'/>
Basic panel example
  </div>
  </div>
  </div>
 

</div>

</div>

  • You can see a sample in http://biz.jobcareerneeds.com/
  • Replace Connect US(Footer Title) and Basic panel example(Footer Content, see layout section in BLOGGER  now you will have like below image)

footer

  • So you can add labels,social share widgets,archives according to your needs.If you need background colour for these footers.add the following code above ]]></b:skin>,

#lower {
background:#212121;}

  •  add <div id='lower'> above code <div class='container'> ,and add </div> at the last of above code.
  • Not only with colors also add patterns which make awesome background.Have a look at this blog http://booteblog7.blogspot.in/
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