design blogger label using bootstrap3.0

design blogger label using bootstrap3.0

Add Comment , , Edit

Hi friends,in this post we see design labels using bootstrap3.0 buttons .

image

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 the label widget in HTML Section.Just add the bold code in correct place like below table.
  • For easy understand, in label part you can find two parts same like below

    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>    

  • You just add class='btn btn-warning' just after < a (there is more buttons,here we use warning buttons )
  • We use in two places because one for list type and another for cloud type.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
      <b:includable id='main'>
        <b:if cond='data:title'>
          <h2>
            <data:title/>
          </h2>
        </b:if>
        <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
          <b:if cond='data:display == &quot;list&quot;'>
            <ul>
              <b:loop values='data:labels' var='label'>
                <li>
                  <b:if cond='data:blog.url == data:label.url'>
                    <span expr:dir='data:blog.languageDirection'>
                      <data:label.name/>
                    </span>
                    <b:else/>
                    <a class='btn btn-warning' expr:dir='data:blog.languageDirection' expr:href='data:label.url'>             <!-- 1-->
                      <data:label.name/>
                    </a>
                  </b:if>
                  <b:if cond='data:showFreqNumbers'>
                    <span dir='ltr'>
                      (
                      <data:label.count/>
                      )
                    </span>
                  </b:if>
                </li>
              </b:loop>
            </ul>
            <b:else/>
            <b:loop values='data:labels' var='label'>
              <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                <b:if cond='data:blog.url == data:label.url'>
                  <span expr:dir='data:blog.languageDirection'>
                    <data:label.name/>
                  </span>
                  <b:else/>
                 <a class=’btn btn-warning’ expr:dir='data:blog.languageDirection' expr:href='data:label.url'>  <!—2—>                                                 <data:label.name/>
                  </a>
                </b:if>
                <b:if cond='data:showFreqNumbers'>
                  <span class='label-count' dir='ltr'>
                    (
                    <data:label.count/>
                    )
                  </span>
                </b:if>
              </span>
            </b:loop>
          </b:if>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
    </b:widget>

.See sample images below,

List type:

list

Cloud type:

cloud

  • Sometimes text may not appear due to same text colour .So change that colour as your wish by going here <b:skin>…</b: skin>.In between these find and change text and link colour of label.
  • That’s all friends you have designed your blogger label.
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