jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about creating a blog , we usually have many tools, although many of them are unnecessary, or maybe only a few. We need to have enough space to add the necessary equipment. One solution is to use an expandable/collapsible menu that hides and expands when the user clicks on it.

Originally, this plugin called sliding login panel was created to allow users to login to the website, but we know that in Blogger we don't have the option to add user login, but that doesn't mean we can't take advantage. From this plugin and use it to add other elements like menu, search box, social media icon, feed subscription, etc.

You can find a demo of this panel in this blog . Click the Open Menu link above.

Add a jQuery expand/collapse slider bar to blogger

This slider is built using jQuery, so first add the script by pasting it below. label:

Step 1. In Blogger Dashboard > Go to Templates > Click Edit HTML Button:

Step 2: Click anywhere in the code area and search by pressing CTRL + F label

Step 3. Below tag, add this script:

Step 4. Now search (CTRL + F). Mark and add CSS styles at the top:

note:

• If you need more space for your widgets, the entire height of the container can be changed by changing the height value to 230px: 230px;
• To change the background color, change the following color value: #272727

Step 5. And finally, we set its HTML structure. immediately after tag, add the following code:

Welcome to my blog!

Acquaintance with the author

Ut eleifend torttor aliquet, fringilla nunc non, consectetur magna. Powerful suspension

Looking for something?

category

• 1 category


• Section 2


• 3 category


• 4 category


• 5 category


• 6th category


• Section 7

• 1 category


• Section 2


• 3 category


• 4 category


• 5 category


• 6th category


• Section 7

Subscribe to this blog!

Receive the latest issues by email. Enter your email address below to subscribe!

• 
  
• Hello guest!


• |


• 
  Open the menu
  Close the menu
  


• 
  

Note: If you can't find it Check and then try to find:

Here we have added a sliding panel that will be hidden and displayed on mouse click. For ease of recognition, the name of each section is marked in green.

note:

• In the first section, you can change the welcome message titled "About the Author" and add your description in bold. To add your photo, replace the following URL:

http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png

• The second section contains your categories: add your link URLs there, replacing the addresses in blue and 1, 2, 3... with the headings you want to appear for category links.
• The third category is email subscriptions; Replace the blue text with your blog channel name. Please note that your Feedburner account must have this email subscription option enabled.
• For the social media icons below, change the blue Facebook and Twitter URLs and add your blog's RSS feed URL

These are basically the main customizable sections, but we can move some around and insert others.

Step 6. Save the template and you're done! Note that this menu works with jQuery, so if you're already using Scriptaculous, Prototype, or Mootools, it won't work.

We hope you enjoy this elegant sliding menu, and it will look better if we remove the blogger navigation bar .