design blogger sidebar using bootstrap3.0

design blogger sidebar using bootstrap3.0

Add Comment , , Edit

Hi friends,using bootstrap3.0 you can also design sidebar with help of panel . You can also design sidebar using other components using bootstrap.Here, how to use panels.Keep in mind you should have links of bootstrap,

bootstrap sidebar

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)] ‘/>

  • In the next step you have to find your label wiget id
  • Goto Layout section ,choose your sidebar widget which you want to design and click edit.
  • It popup and see the url and at the end you find like this widgetid=’……..’ like below.

find widget id

  • Now goto Template>>Edit html .Click format template.And click ctrl+f and paste that widget id
  • Now you can find that widget in HTML Section.Just add the code like below table.
  • Please remove <!—1 -->,<!—2 -->,<!--- 3 –> it is for understanding purpose only.
  • In <!—1 –> we are adding panel class like below to design sidebar widgte covering full.
  • In <!—2 –> we are designing sidebar title.
  • In <!—3 –> we are designing sidebar content body.

<b:widget id='HTML4' locked='false' title='Glow' type='HTML'>
<b:includable id='main'>                                                                                            <div class='panel panel-primary'>  <!-- 1 -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<div class='panel-heading'>  <!-- 2 -->
<h2 class='title'>
<data:title/>
</h2>
</div>    <!—2 –>                                                                                                   </b:if>                                                                                                                        <div class='panel-body'> <!-- 3 -->
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>                                                                           </div><!—1 –>                                                                                                   </div><!--- 3 -->
</b:includable>
</b:widget>

For every widget

  • add  <!—1 –> below <b:includable id='main'> 
  • add <!—2 –> above <h2 class='title'>
  • add <!—3 –> above <div class='panel-body'> and don’t forget to place </div> in correct places.Otherwise it will not work.See a sample image below.
panel
  • See a live sample here http://booteblog7.blogspot.in/
    That’s all friends.
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

Subscribe to: Post Comments ( Atom )

Pages