• Home
Tech News, Magazine & Review WordPress Theme 2017
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
No Result
View All Result
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
No Result
View All Result
Techno
No Result
View All Result

Jquery Sliding Panel Amongst Expanding/Collapsing Content For Blogger – Helplogger

Admin by Admin
August 19, 2021
Home blogger posts
Share on FacebookShare on Twitter
Many times when nosotros mean value virtually creating a blog , nosotros tend to seat many gadgets , although many are non necessary , or mayhap solely a few of them. In social club to add together the gadgets that nosotros desire , nosotros take to cause got plenty space. A solution would live to exercise an expanding/collapsing bill of fare that is hidden in addition to expands when the user clicks on it.

Originally , this plugin called Sliding Login Panel was created hence that users could register on the site , but equally nosotros know , inwards Blogger nosotros don’t cause got the option to add together user registration , but that doesn’t hateful nosotros can’t cause got wages of this plugin in addition to exercise it to add together other elements , such equally a bill of fare , search box , social icons , feed subscription etc.

You tin honor a demo of this panel in this blog – simply click on the Open menu link on the top.

Adding the jQuery Expand/Collapse Slider Panel to Blogger

This sliding bill of fare is made amongst jQuery , hence the start affair is to add together the script past times pasting it simply below the tag:

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

blogger template

Step 2. Click anywhere within the code expanse in addition to search past times pressing the CTRL + F keys for the tag

Step 3. Below the tag , add together this script:

Step 4. Now search (CTRL + F) the tag in addition to add together the CSS styles simply higher upwardly it:

Note:

  • in illustration you lot take to a greater extent than infinite for your widgets , the pinnacle of the entire container tin live changed past times modifying the 230px value from height: 230px;
  • To alter the background color , alter this color value: #272727

Step 5. And live on , nosotros volition identify the HTML construction of it. Right afterward the tag , add together this code:

Welcome to my blog!

Advertisement. Scroll to continue reading.

 

Meet the Author

Advertisement. Scroll to continue reading.

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

Advertisement. Scroll to continue reading.

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 past times email. Just come inwards your e-mail below if you lot desire to subscribe!




  • Hello guest!
  • |
  • Open menu
    Close menu

Note: if you lot can’t honor the tag , in addition to hence drive to honor this one:

Here nosotros cause got added the content inwards the sliding panel which volition live hidden in addition to volition exhibit on mouse click. In light-green are the names of each department hence it is easier to recognize them.

Note:

  • In the start department , you lot tin alter the welcome message , “Meet the author” championship in addition to add together your description past times replacing the text inwards bold. To add together your ain film , supplant this URL:
  • http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png

  • In the minute department you lot cause got the categories – at that topographic point add together the URLs of your links past times replacing the addresses inwards bluish in addition to supplant Category 1 , ii , 3… amongst the titles that you lot desire to seem for the links.
  • In the 3rd department is the e-mail subscription – simply supplant the text inwards bluish amongst the advert of your blog’s feed. Please Federal Reserve annotation that you lot must cause got this e-mail subscription option enabled inwards your Feedburner account.
  • As for the social icons below , alter the URLs inwards bluish amongst your Facebook in addition to Twitte in addition to add together the URL of your blog’s RSS feed address.

Basically , these are the primary sections that tin live customized , but nosotros tin withdraw some of them in addition to glue something else instead.

Step 6. Save the template in addition to that’s it! Note that this bill of fare plant amongst jQuery , hence if you lot are already using Scriptaculous , Prototype or Mootools , in addition to hence it volition non work.

Hope you’ll taste this elegant bill of fare amongst sliding lawsuit , which volition await means improve if nosotros remove the Blogger navbar.

SHARE TWEET GOOGLE+ PIN IT
Admin

Admin

Next Post

How To Customize Or Edit The Linkwithin Related Post Widget - Helplogger

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • BRAIN ILLUMINATION – The Monkey Mind VS the Mind of Light
  • SMS Mobile Text Marketing: Is Your Business Ready For The Mobile Marketplace?
  • What Can Visual Composer: Page Builder for WordPress Do for Your Website?
  • LotRO Macros
  • Tips To Make PSD To HTML Conversion Simpler

Recent Comments

  1. خرید لایک ارزان قیمت on Filter Out Your Visits To Your Weblog From Google Analytics Traffic Statistics – Helplogger
  • About
  • Advertise
  • Privacy & Policy
  • Contact
No Result
View All Result
  • Home

© 2022 TechnoNews