How To Put Your Blogger Labels And Archive Within A Scroll Box




| 7 comments

On a blog I am currently doing design work on I we had a problem with the size or length of both the blog archive and labels gadgets.The blog has being going for a number of years posting daily so the archive is huge and the author has about 100 labels.This of course means that the Labels gadget and blog archive gadgets are very long thus taking up a lot of space.

Now you could display the archive and Labels as a drop down but the owner of the blog wanted to leave them as lists, they felt the readers used the lists to navigate the blog.The solution I came up with was to place the archive list gadget and Labels gadget within a scroll box and I was (as was the blog owner) very happy with the results.In this post I am going to show you exactly how I did it, and it only takes a line of code.

If your not familiar with the Blog archive/Labels gadgets you can add them to your blog by going to the layout page, clicking add a gadget then scroll to find each.

I don't have a live demo for this one but you can see the difference in the screenshots below :

Labels In A Scroll Box Before After :


Archive In A Scroll Box Before After :


Tutorial

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
(Sometimes the Apply To Blog button can not be clicked.If so click just after the code you added and press space then apply.)

Code For Labels :
#Label1 .widget-content{height:200px; width:auto;overflow:auto;}

Code For Archive :
#BlogArchive1 .widget-content{height:200px; width:auto;overflow:auto;}



OK that's it two neat Blogger tricks, Drop your comments and questions below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

7 comments:

  1. Good job Paul! I am searching for putting Blogger labels in my blog. Really thanks for sharing this tutorial.
    Stay Blessed :)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. LOVE this one!
    I've been blogging for over 5 years - so this is very handy. thanks!

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us