Testimonial Widget for Blogger/Wordpress

No matter your Blogger or Wordpress site is for Blogging, selling product, download stuffs using Testimonial widget is necessary. Testimonial widget represents your sites and product’s quality and it increase your visitors trust on your content directly. Here I developed a simple minimalistic Testimonial widget for you, it made with little amount of HTML, CSS, CSS3, Google font. It’s easy to add, configure, lightweight, fast loading. Let’s see how it looks like and how to configure it. Read on-

Testimonial widget for Blogger/Wordpress

Preview-

Live Demo- (Click here)

Codes for copy-

<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'/>
<style>/*crawlist.net CSS starts*/
.ks-tasti {height:293px; width:280px; padding:5px 8px;    -webkit-border-radius: 3px;
     -moz-border-radius: 3px; border-radius:5px; border:#ccc 1px solid; background:#f8f8f8;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
          box-shadow: 0px 1px 5px rgba(0,0,0,.25);}

.ks-tasti p {font-family: 'Lora', serif; font-size:15px; border:#ccc 1px solid;     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;border-radius:3px; background:#fff;text-align:left; padding:4px 4px; line-height:1.4;}
.ks-tasti h5:hover {background:#f5f5f5;}

.ks-tasti h4 {border:#ccc 1px solid;    -webkit-border-radius: 3px;
     -moz-border-radius: 3px; border-radius:3px;font-family: 'Raleway', sans-serif; padding:5px 5px; font-weight:bold; font-size:20px; background:#fff;text-align:center; margin-top:4px; margin-bottom:3px; color:#0CC;}

.ks-tasti h5 { border:1px #ccc solid;     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;border-radius:3px; font-family:'Raleway', sans-serif; background:#fff; text-align:right; color:#333; padding:3px 3px;margin-top:-3px;font-style:italic;}
.ks-tasti a {color:#999;}
/*crawlist.net CSS ends*/
</style>
<!--crawlist.net testimonial starts-->
<div class="ks-tasti">
<h4>-- Testimonial --</h4>
<p> Place your content </p>
<h5>By, Name, Company/site</h5>
</div><!--crawlist.net testimonial ends-->

How to add this widget in Blogger

• First Log in to your blogger account, select your blog, 

• Go to ‘Layout’ Tab, from sidebar select ‘Add a gadget’, 

• From pop up menu select ‘Html/JavaScript’. 

• In Html/JavaScript’s content box copy and paste following code and configure

How to add this widget in Wordpress

• From dashboard hover mouse on 'Appearance' tab, 

• From 'Appearance' menu select 'widgets', 

• Then drag and drop 'Text' content box in widget area, 

• Copy following codes and paste into 'text' box

• For new dashboard click on 'Text' add it to sidebar and paste following codes, configure and hit save

How to configure

• To configure the testimonial sentences, Add your testimonial sentences into <p> and </p> tag. Example in <p>Place your content</p> replace ‘Place your content’ with your testimonial.

• To configure By, replace By Name, Company/site into <h5> and </h5> tag

• Then save Template.

So, what your feedback and problem. About this widget don’t forget to mention. Advance Testimonial widget will be release soon. Stay subscribed. Chill…