A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

This time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.

Read More

How to create Labels as Drop-Down list in Blogger

Within the Blogspot, or Blogger, you can add descriptive Labels to your posts. These labels help categorize and archive your posts based on the text you use to describe them. If you use a large variety of labels, they can quickly clutter your sidebar. Clean up your blog by creating a drop-down menu for your labels.

Step 1: Log in to your Blogger account. You will be redirected to the Blogger Dashboard.

Step 2: Click the down-arrow to the left of the "View blog" button. Select the "Template" option from the drop-down menu.

Step 3: Click the "Edit HTML" button on the left side of the screen and then agree to the warning by clicking "Proceed."

Step 4: Press "Ctrl-F" or "Command-F" to open a search box. Enter "Label1" into the box and press the "Enter" key. This line of code should appear as a result:

       <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Step 5: Copy and Replace the code above with the following code:

<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 class='widget-content'> <select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> <option>Select label...</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>

Step 6: Click the "Save Template" button to finalize your changes. Return to your Dashboard and click "View blog" to view your new drop-down label menu in your widget.

Note:
Remember to back your template/HTML codes before doing anything , this will help you incase anything went wrong with your coding.

>>Hope it will help you!.. >>

Read More

Convert Blog Labels Widget as Drop-down menu

A labels widget displays your posts’ labels and each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels.
Your labels widget will be reduced to just one line! And it only expands into a full list when you click it.

Before applying this hack, you must already have a Labels widget installed. If you don’t have one, go to Layout (old UI: Design > Page Elements) and add it.
Now let’s make the dropdown:

Go to Template > Edit HTML > Proceed (old UI: Dashboard > Design > Edit HTML).
Back up your template.

Make sure you DO NOT check the  Expand Widget Templates checkbox.

Look for the following lines in your HTML code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Then Copy and Replace that line with this code:
<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 class='widget-content'> 
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
<option>Click to choose a label</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>

Change the width of the dropdown menu bay changing 100% to any percentage, or pixel (px).
You can change “Click to choose a label” phrase in line 8 to your preferred phrase.
Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line.
Preview before saving.

Done and Enjoy it!

Read More

Displaying Blogger Labels In A Drop Down Menu Into Gadget/Widget

A 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 will not limit them, later your labels widget will take over your sidebar.

Control your sidebar, and shrink the widget by converting it into a drop-down (or is it a pulldown) menu. Your labels widget size will be reduced to just one line! And only expand into a full list when you click it.

Before applying this hack, you must already have a Label widget installed.
If you don’t have one, go to Design > Page Elements and add it.
Now let’s make the dropdown:

How To Create Dropdown Menu For Labels Widget

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. Look for the following lines in your HTML code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

5. Then 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>

6. If you want change the width of the drop down menu then change this value width:100 %to any percentage, or pixel (px).

7. 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.

8. If you do not want to show post count at the end of each label then delete this line (<data:label.count/>) .

Read More

Drop Down Labels Menu Gadget For Blogger

Lets add a Drop down labels gadget to your blog , you might want to back up your template before you start.

Step 1. In Your Blogger Dashboard Click > 'Design' > 'Add A Gadget' 

Step 2. From the pop up menu scroll to find 'Labels' and click the 'Add' icon.
Important - The gadget will have the title 'Labels' change this to zzzzz and save the gadget.

Step 3. Now advance to your 'Edit Html' page - Do not tick the 'Expand Widget Templates' box.

Step 4. Find the following in your blogs Html : News Columns
(Click Ctrl and F for a search bar to help find the code)

Step 5. When you locate News Columns it will be in a section of code like this :

<b:widget id='Label1' locked='false' title=' News Columns ' type='Label'/>

Step 6. Replace that full line of code with the following code :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Note - The text in red is what will be seen on drop down menu and can be changed to Tags, Category's etc..

Step 7. Save Your Template - The labels gadget is now in drop down form.You will want to change the name of the gadget from News Columns  to do this just return to your Design page > Edit Gadget and change to Labels or Category's etc..

That it you have a very useful drop down list of your blogger labels for readers to easily navigate.Remember only this labels gadget will be in drop down format and if you remove it you will have to start from step 1 again. Don't forget to leave your comments below.

Read More