Add Animated Jquery Sliding Panel with Content Widget for Blogger

June 20, 2011   /   Posted by in Blogger Jquery, Blogger Widgets 78 Comments
Add Animated Jquery Sliding Panel with Content Widget for Blogger

Hello Friends! Animated Jquery Sliding Panel with Content Widget for Blogger. this is a Plugin from Jquery and it was Developed by Jon Phillips and Plugin Developed by jQeasy. i am giving to Use on Blogger, Actually this widget Asked by one of Blogger, my Blog Reader and Follower. I done very hard work for making Widget Form for you, and it takes almost 1 1/2 day to analyze and Widget Form Creation. but it is very simple to use on your Blog. the main feature is we can Show any content in less space, more efficient and attractive animation effect when you click.

Live Demo :-

Click here! to See Live Demo
this is my second test blog i created to show a widget demo

How to Add Jquery Slide Panel with Content

there are three steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

  1. Go to Blogger Dashboard -> Design tab -> Edit Html
  2. Search for </head> tag
  3. Add below line of code Before </head> tag
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Jquery Slide Panel Plugin

You Must add this plugin.

  1. Search for </head> tag
  2. Add below line of code Before </head> tag
    <script src="http://widgets.way2blogging.org/blogger-widgets/jquery.slidePanel.min.js" type="text/javascript"></script>

Step 3: Adding Jquery Slide Panel Widget Code

Here i am Giving Widget Code generator Form and i Include all possible Options with advanced CSS Styling. You can add multiple pannels.

Customize the Trigger CSS & Panel Content CSS Fields as you need.

Settings :

  1. First Click this Button

    Generate Widget

  2. for Trigger Name and Panel Content please See the Image Below.

  3. Finally Generate Widget Code and Put it Before </body> tag
  4. and Save your Template

If you have any Difficulty then Leave a Comment

I hope you enjoyed this widget.

If you like the widget then feel free to share and leave a Comment.

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Write for Way2Blogging

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

78 Comments on “Add Animated Jquery Sliding Panel with Content Widget for BloggerAdd Comment

  1. shanky July 28, 2012 7:06 pm #

    HARISH SIR..!!
    http://www.way2blogging.org/contact I WANT DIS FORUM IN DIS JQUARY SCRIPT…
    IS IT POSSIBLE…
    haha I know u r a magician :P
    PLZ..

    • Harish July 31, 2012 6:01 pm #

      nope. i am using a WordPress plugin for contact forms. you can use any third-party contact forms.

  2. Debbie Navarro August 10, 2012 5:10 pm #

    Thank you Harish!

  3. Shanky August 16, 2012 9:50 am #

    Sir..
    i put that code in html widget … but now it is apearing ok…but not opening…
    and if i put that code on tag…the templete..doesnt load…and got error..
    Now what should em gonna do..
    ..
    I have put a kontactr Form Code in Contant …
    Plzzz Solve my problem :(

  4. Shanky August 16, 2012 1:10 pm #

    Hey ,..Bro Thanx For This…Widget…I solve all dose problems ..i mentioned in uppar comment…But Now i am facing the major problem that is….my slide show on website .. Is stoped workin … I want both of Things on ma blog…1 slide show and slide panel …plz Help :)

  5. Shanky August 16, 2012 6:25 pm #

    Bro …Mujhe pics Slider and This content slider ki bhot Zarurt h..
    em goin to esteblish ma business on a small scale..
    i need both things work togethr On This
    plz check.. || www.demodemowe.blogspot.in ||
    That will be a great help…
    Agar dose both working togethr is not possible…
    then plz tell me any another way …to put dose kind of stuff togethr…
    in these both …1 chalta h to 1 band ho jata h.. jquery plugin htane or lagane se…

    • Harish August 17, 2012 11:41 am #

      Please Try once again, there is a jQuery conflict with other plugins. i fixed in the code.
      please generate and add new code.

  6. Shanky August 17, 2012 5:19 pm #

    THANXX ….THANXXXXX A TON////!!!!!!!!!!!!
    I WILL CALL U GENIUS FOR NOW :)

  7. Shanky August 17, 2012 6:11 pm #

    Thanxx For a grat help …but bro in generator there is a option missin… Put unique numbers…:)

    • Harish August 17, 2012 6:20 pm #

      No, not required, at the time of posting this articles, there is a user option to add a unique number, so if you add this widget one or more times, it won’t conflicts.
      After, I updated the generator, to add the unique number automatically. But i didn’t updated the article. :P

  8. Shanky August 22, 2012 1:32 pm #

    HaHa..k bro…tell me 1 more thing can we put adsense ad in this slider ;)
    if yes then how :O

    • Harish August 23, 2012 1:32 am #

      nope. it’s against Adsense TOS. don’t try to play with Adsense.

      • jesus September 9, 2012 3:06 pm #

        will discover the poetics of adsense? eg http://www.plantillas-blogger-blogspot.com/ use it on my blog

  9. shaily September 14, 2012 5:54 pm #

    This widget is not working on my this website but it’s working on my other blog. Please look to the website and tell me what is the problem

    • Harish September 14, 2012 8:43 pm #

      may be you already have a jquery plugin in your blog.

  10. Baber September 21, 2012 12:29 am #

    Cant Save Template Preview says “Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: The content of elements must consist of well-formed character data or markup.

    Error 500″ wat can i do

    • Harish September 21, 2012 7:02 pm #

      add as html widget in sidebar

  11. M.ijaz November 5, 2012 4:28 pm #

    I already add this code on my blog but not working

Leave a Reply

 

© 2013 Way2blogging. Designed by +Harish, Powered by WordPress