jQuery Sliding Panel with Expanding/Collapsing Content forBlogger alphause

next Helplogger Home Blog DesignWidgets SEO Menus Po ... jQuery Sliding Panel with Expanding/Collapsing Content for Blogger 4 comments 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 calledSliding Login Panelwas 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 theOpen menulink on the top. Adding the jQuery Expand/Collapse Slider Panel to BloggerThis sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below thetag: Step 1.From your Blogger dashboard > go toTemplate> click on theEdit HTMLbutton: Step 2.Click anywhere inside the code area and search by pressin the CTRL + F keys for thetag Step 3.Below thetag, add this script: Step 4.Now search (CTRL + F) thetag 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 the230pxvalue fromheight: 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 thetag, 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 thetag, 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: http://1.bp.blogspot.com /-J8r3gQVzSSE/Uv5nM4vluSI /AAAAAAAAGJk/Np7Vu3uVxwU /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. Like 2 Random Posts Add Multi-Colored Popular Posts to Blogger11/03/2012 - 29 Comments Turn off the lights with jQuery27/10/2013 - 2 Comments Add Random Posts Widget to Blogger11/03/2012 - 50 Comments Related Posts: Add floating social media sharing b... Add A CSS Animated Share Button on ... How To Add Social Media Icons to Bl... How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... 4 comments: Indri Lidiawati 2/16/2014 Thanks for your sharing nice tips my friend, I'll trying to apply this jquery tricks for my new blog that now still under construction :) btw this is my first visit on this great blog :) Reply Hamza Bhatti 2/20/2014 Not Working :/ Reply infiroid 2/21/2014 hey it works ...thanks man...but can you suggest me the one which present in your site (the left bar) how to create it Reply Amit Nagar 2/25/2014 Hi, Thanks for this nice post, i was looking for this for long.. One thing, can we have second level in categories?? Or if you can help me with vertical menu bar on left side of blog..... My blog url: www.mbapages.in Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,775 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Joseph V M Hi, I've added pagination to my blog... dara king good Mel Ancheta You did it finally, thanks admin (: sorry for my late reply... Sandra Harriette It never ceases to amaze just how much we can do with Blogger.... Gabor Sziladi One question i still have...how can i keep distance between my... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger next