A Technology Blog that covers latest Information, How To's, Tutorials, Tips & Tricks about Computer Software, Blogging and useful Websites.

Love Tips | YouTube Channel

Sunday, 27 May 2012

How to Add DropDown List Box For Labels In Blog?

How to Add DropDown List Box For Labels In Blog?
DropDown list Box  is helpful for minimize the spacing in the blog.
The blogger always need space for  the adsense ads at the left or right sidebar but that space is maintain by list of archive or label.

This DropDown list Box help you to reduce the space from  sidebar where you want show your adsense ads.

Now In this article we will learn how to add DropDown list Box in Blog.



Follow the given steps for How to add  DropDown List Box in Blog :-

1.Goto Layout > Add a gadget 
    
   Now select Labels gadget from gadget list.

  

















3.Now Goto > Design/Template > Edit Html.

   Tick the Expand Widget Template 

4.Find(ctrl +F) your Labels widgetId 

   You will get the following code :-
   ----------------------------------------------
<b:widget id='Label2' 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 expr:dir='data:blog.languageDirection' expr:href='data:label.url'><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 expr:dir='data:blog.languageDirection' expr:href='data:label.url'><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>  ----------------------------------------------

5. Now replace the highlighted code with following code :-
-----------------------------------------------
Topics : <select class='postform' id='cat' name='cat' onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose Categories</option>
<b:loop values='data:labels' var='label'>
   <option expr:value='data:label.url'><data:label.name/>
      (<data:label.count/>)
   </option>
</b:loop>
</select> 
-----------------------------------------------

5. Save the template. you have done.

Post a Comment

 
Powered by Blogger.
Copyright 2012-2015 www.jesoba.com All Right Reserved
All content is copyrighted to www.jesoba.com and should not be reproduced / copied on other websites \ blogs or anywhere else without permission from Jesoba.com. Read our privacy policy and about us page. Theme Design by Dadang Herdiana