Monday, October 17, 2016

Blogger - Add scroll Box for Archive and Labels

With blogging, we can get many labels and a large archive, so to keep things neat and tidy, we can put our Blogger labels and archive in a scroll box.

This is quite handy and will take up less space. I personally have my labels in a drop-down menu.

Here is my example: To see it live, scroll down to my right sidebar and look
for categories.

Here's a snapshot of  my Blogger archives in a scroll box.
To see it live, scroll down to my right sidebar, toward the bottom.

which means: 
CSS stands for Cascading Style Sheets; Styles define how to display HTML elements; 
Always back up your blog before doing any coding.

Tutorial for adding your archives in a scroll box:
Go to your Blogger dashboard
Click Template
Click Customize
Click Advanced
Click the scroll bar, until you see Add CSS, it's a white box.

 Copy  this code and paste it in the white box.
Click enter on your keyboard and then click apply to blog.

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

If you want your numerous labels in a scroll box, you do the same, with the exception of the code.
 Copy this code for Blogger's labels
Code for Labels 
 #Label1 .widget-content{height:200px; width:auto;overflow:auto;}

Paste it in the box, just like the archives.  Click enter and then click apply to blog. 

Here's another example of labels without a scroll box. Before:

 After a scroll box:

See the difference? Now you will be more organized and have more room.
If you are interested in a drop down menu for your labels, that is more difficult, but can be done by editing your HTML. I can always write a tutorial for that if you are comfortable editing your HTML code.

Easy, peasy....enjoy! Paul Crowe has a great site for Blogger's resources.

Credit to


Post a Comment