jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing menu that is hidden and expands when the user clicks on it.

Originally, this plugin called Sliding Login Panel was created so that users could register on the site, but as we know, in Blogger we don't have the option to add a user registration, however, that doesn't mean that we can't take advantage of this plugin and use it to add other elements, such as a menu, search box, social icons, feed subscription etc.

You can find a demo of this panel in this blog - just click on the Open menu link on the top.

Adding the jQuery Expand/Collapse Slider Panel to Blogger

This sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below the tag:

Step 1. From your Blogger dashboard > go to Template > click on the Edit HTML button:

Step 2. Click anywhere inside the code area and search by pressin the CTRL + F keys for the tag

Step 3. Below the tag, add this script:

Step 4. Now search (CTRL + F) the tag and add the CSS styles just above it:

Note:
- in case you need more space for your widgets, the height of the entire container can be changed by modifying the 230px value from height: 230px;
- To change the background color, change this color value: #272727

Step 5. And finally, we will place the HTML structure of it - right after the tag, add this code:

Welcome to my blog!

 

Meet the Author

Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.

Looking for something?

 

Categories

• Category 1


• Category 2


• Category 3


• Category 4


• Category 5


• Category 6


• Category 7

• Category 1


• Category 2


• Category 3


• Category 4


• Category 5


• Category 6


• Category 7

Subscribe to this blog!

Receive the latest posts by email. Just enter your email below if you want to subscribe!

• 
  
• Hello guest!


• |


• 
  Open menu
  Close menu
  


• 
  

Note: if you can't find the tag, then try to find this one:

Here we have added the content in the sliding panel which will be hidden and will show on mouse click. In green are the names of each section so to make it easier to recognize them.

Note:
- In the first section, you can change the welcome message, "Meet the author" title and add your description by replacing the text in bold. To add your own picture, replace this URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7UCIbnVpgYUMOyhBXryW9AYH_zWuHdtTrvSuWG2mgFFqY8hr2GyQxJwP5FuMsMoMk3P0MK4Fd78Ph58Gp_j7fJenDtbUv3hZqTL6UtiYNwSICpIUPQiTl6MaS-xCOOrI5iEjrUxLHRIys/s1600/profile-pic.png

- In the second section you have the categories - there add the URLs of your links by replacing the addresses in blue and replace Category 1, 2, 3... with the titles that you want to appear for the links.
- In the third section is the email subscription - you must have enabled this option in your Feedburner account - just replace the text in blue with the name of your blog's feed. As for the social icons below, change the URLs in blue with your Facebook and Twitte and add the URL of your blog's RSS feed address.

Basically, those are the main sections that can be customized, though, we can take some parts and paste something else instead.

Step 6. Save the template and that's it! Note that this menu works with jQuery, so if you are already using Scriptaculous, Prototype or Mootools, then it will not work.

I hope you'll enjoy this elegant menu with sliding effect, which will look way better if we remove the Blogger navbar.