How to 2 column and 3 column label widget - My Blogger Market

Breaking

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

8/29/2013

How to 2 column and 3 column label widget

blogger label

Label widget is essential for easy navigation. Visitors always prefer this widget where hard to navigate through menu. Earlier label was only list style which occupy more space on your template. But after introducing cloud style by Google, as a result blog user is able to save space in blogger template.

However some blogger prefer to use list style label widget but often then face problem where there are large number of labels present. Because it occupy almost 50% space from your blog sidebar. So for solving this issue I am sharing a trick that will help you to split your blog label into 2 column and 3 column. Suppose your blog has total 10 labels then the code will split into 2 column so it will able to save space.  

Add 2 column label widget into Blogger Template

Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing   Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

/**Trick by www.bloggerspice.com**/
#Label1 li {
float:left;
width:50%;


Step 5 Now hit the save button.

Add 3 column label widget into Blogger Template

Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing   Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

/**Trick by www.bloggerspice.com**/
#Label1 li {
float:left;
width:33%;
}
#Label2 li {
float:left;
width:33%;
}


Step 5 Now hit the save button.

No comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Post Top Ad

Responsive Ads Here