Testimonial Slider Text Widget with JQuery Cycle Plugin

Views

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. Options control how and when the slides are transitioned. In this Testimonial Widget the Jquery effect will be FADE .You can customize the look and feel of the widget if you desire.We can achieve that Just by following this few easy steps below.

CLICK HERE FOR LIVE DEMO

APPLYING THE JQUERY CYCLE PLUG-IN IN YOUR WEBSITE/BLOG

• Go to your Blogger Dashboard
• Template
• Edit HTML
• Proceed
• Click "Expand Widget Template"
• Press CTRL+F for search shortcut>
• And find this code

</head>

• And Just BEFORE/ABOVE That paste this Jquery Cycle Plugin

<!-- include jQuery library -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'/>

<!-- include Cycle plugin -->
<script src='http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
   $(&#39;#testimonials&#39;)
   
    .cycle({
        fx: &#39;fade&#39;,
       
     });
});
</script>

NOTE: DONT INCLUDE THE SHADED BLUE SCRIPT IF YOU ALREADY HAVE A JQUERY PLUGIN INSTALLED IN YOUR TEMPLATE

• Next, Find this piece of code

]]></b:skin>

• And just ABOVE/BEFORE that, Add this CSS code for your widget

}
#testimonials { width:330px; background:#E7E9E6 url(images/bg-testimonials.png) left top repeat-x; border:1px solid #D8D9D6; margin:10px 0; }
#testimonials p{ margin: 0 !important;padding: 5px!important; }
#testimonials p cite { font-style: normal; display: block; text-transform: uppercase; font-weight: bold; font-style:italic; color: #555; padding-left:5px; margin-top:10px;
}

NOTE: DONT FORGET TO CLICK PREVIEW TO CHECK FOR ANY ERROR

THE LAST PART.. ADDING THE TESTIMONIAL WIDGET ON YOUR BLOG

• Go to your Blogger Layout
• Add a Gadget
• And insert this Widget Code

<div id="testimonials">
 
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "                 <cite>&ndash;Debbie - NY</cite></p>
 
               <p>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."                 <cite>&ndash;Johnny - LA</cite></p>
 
                <p>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                <cite>&ndash;Ray - MA</cite></p>
 
</div><!--end testimonials-->

CUSTOMIZATION OF YOUR TESTIMONIAL WIDGET

• Change The Names with your own
• Change The Place with a website or anything you like
• And change the Sample Paragraph with your testimonial content
• Change #E7E9E6 for your widget Background
• Change 330px for your widget width size
• Change #D8D9D6 for your widget border

Credits

The original idea comes from parorrey.com , Thanks Ali for this wonderful script

YOU CAN SAVE YOUR TEMPLATE NOW

And see it working perfectly on your blog

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.

UPDATE: The Plugin no longer works for blogger.