Add Animated Jquery Sliding Panel with Content Widget for Blogger

Add Animated Jquery Sliding Panel with Content Widget for Blogger

Posted by Nitin Maheta

Tweet

Digg It! Stumble Delicious Technorati Tweet It! Facebook

H

ello 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.

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)

• Go to Blogger Dashboard -> Design tab -> Edit Html 
• Search for </head> tag
• Add below line of code Before </head> tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Jquery Slide Panel Plugin
You Must add this plugin.

• Search for </head> tag
• Add below line of code Before </head> tag

<script src="http://gj37765.googlecode.com/files/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.
For Color Code please use our HTML Color Code Generator Tool.

Settings :
"Put any Unique Number" means, if you add multiple Sliding panels the each slide panels have special CSS and Jquery Callings. so you put any Unique number, for Ex:- 3, 7, 6, 8, 12, 26, 56 ...
for Trigger Name and Panel Content please See the Image Below.

 

Finally Generate Widget Code and Put it Before </body> tag

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. :)