Showing blogger label in a drop down makes your blog look beautiful and easy to navigate.
Labels widget displays your post labels. Each label is linked to a
page containing posts which fall under that label. Usually as your posts
increases, so will your labels. If you don’t limit them, sooner or
later your labels widget will take over your sidebar :)
In this post we are going to teach you how to regain and control of your sidebar, shrink the widget by converting it into a dropdown menu. Your labels widget size will be reduced to just one line and only expand into a full list when you click it. Can I hear you saying Waoh!!!!!!!!. Sit down and grab your cup of coffee to enjoy this tutorial to the fullest.
1. Go to Dashboard > Design > Edit HTML.
2. Back up your template
3. Make sure you DO NOT tick the Expand Widget Templates checkbox.
4. Press CLTR key + F key.
5. In the box paste this code and press ENTER key
7. Erase it all and Replace that line with this code:
2. To change the phrase “Click To Choose a Category” then find this line Click To Choose a Category and replace it with your preferred phrase.
3. If you do not want to show post count at the end of each label then delete this line (<data:label.count/>) .
Can you see it so simple adding blogger label in drop down, Common it is your turn to give it trial and lets see your deduction in the comment box below and never forget to use the share button too.
In this post we are going to teach you how to regain and control of your sidebar, shrink the widget by converting it into a dropdown menu. Your labels widget size will be reduced to just one line and only expand into a full list when you click it. Can I hear you saying Waoh!!!!!!!!. Sit down and grab your cup of coffee to enjoy this tutorial to the fullest.
HOW TO CREATE DROPDOWN MENU ON BLOGGER
STEP 1
1. Sign in to your blogger dashboard and locate layout.
2. Click on layout and find Add Gadget.
3. Click on Add gadget and scroll till you find Labels.
4. Add label and drag it to where you want it to display and click on Save.
STEP 2
2. Back up your template
3. Make sure you DO NOT tick the Expand Widget Templates checkbox.
4. Press CLTR key + F key.
5. In the box paste this code and press ENTER key
<b:widget id='Label1' locked='false' <b:widget id='Label1' locked='false'
title='Labels' type='Label'/>7. Erase it all and Replace that line with this code:
<b:widget id='Label1' locked='false'
title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%'
onchange='location=this.options[this.selectedIndex].value;'>
<option>Click To Choose a Category</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget> HOW TO COSTOMISE THE GADGET
1. If you want change the width of the drop down menu then change this value width:100% to any percentage, or pixel (px).2. To change the phrase “Click To Choose a Category” then find this line Click To Choose a Category and replace it with your preferred phrase.
3. If you do not want to show post count at the end of each label then delete this line (<data:label.count/>) .
Can you see it so simple adding blogger label in drop down, Common it is your turn to give it trial and lets see your deduction in the comment box below and never forget to use the share button too.
0 comments: