Stylish JavaScript Testimonials Slider For Blog And Website

This Article Was Live On June 14th, 2013 And So Far Have: 10 Comments...
Last Updated on June 21st, 2014

After My Previous Post J-Query Text Slider Without Navigation.Many People Send Me Request To Share A Testimonial Slider Without JQuery Because It Will Increase There Loading Time, So Here I Am Again With The New And Only JavaScript Code.As many people want Testimonial slider for there website and blog to show there visitor that they have good response from there Great User. For this purpose they want text box but if they have more then one testimonial there is a big problem to them how to manage them all without wasting extra space from there site and blog.So i am here with a new article and a awesome JavaScript so that you can user this on your site or blog, it is easy to install and quick to load with navigation menu so that visitor can see how many testimonial you have.

CLICK HERE TO SEE DEMO

Now it is also called JavaScript Text Ticker You can customize the fill code easily through the given step, You can customize this testimonial box container also with your CSS, In this slider you can also add author name with there caption.Text style, size color, format, font any thing you can easily customize, If you don’t know How To Customize Feel Free To Ask. I Will Help You.
One More Thing That This Is A Copyright Code Of Dynamic Drive (www.dynamicdrive.com) I Jsut Update It And Share It.

Table of Contents

Recommended For You:

What Is "Content Management Systems(CMS)"? A Full Infographic Ans.

Features:

1.) Unlimited Testimonials Quotes.
2.) Only JavaScript And CSS.
3.) Simple Full Customizable Box Container.
4.) Quick To Load And Easy To Install.
5.) With Write Name, Pic, Website And Caption Space.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
<style type="text/css">
#exetestiauthor{
width: 250px;
font-weight: bold;
border: 1px solid black;
background-color: #DFDFFF;
font-size: 20px; 
font-style: oblique;
padding: 3px;
}
.exetestitext{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display:block;
}
.exetestipic {
float:left;
margin:0 5px 0 0;
border-radius: 100px !important;
}
</style>
<script type="text/javascript">
/***********************************************
* ProHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code.
* UpDated By- © EXEIdeas International (www.exeideas.com)
* Visit https://www.exeideas.com/ for full info.
***********************************************/
var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var enableexeauthor=1 //enable scroller exeauthor? Set to 0 to hide
if (document.getElementById){
document.write('<style type="text/css">n')
document.write('.exetestitext{display:none;}n')
document.write('</style>n')
}
var selectedDiv=0
var totalDivs=0
function contractall(){
var inc=0
while (document.getElementById("exetestidiv"+inc)){
document.getElementById("exetestidiv"+inc).style.display="none"
inc++
}
}
function expandone(){
var selectedDivObj=document.getElementById("exetestidiv"+selectedDiv)
contractall()
document.getElementById("exetestiauthor").innerHTML=selectedDivObj.getAttribute("exeauthor")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}
function startscroller(){
while (document.getElementById("exetestidiv"+totalDivs)!=null)
totalDivs++
expandone()
if (!enableexeauthor)
document.getElementById("exetestiauthor").style.display="none"
}
if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)
</script>
<div id="exetestiauthor"></div>
<div id="exetestidiv0" class="exetestitext" exeauthor="Writer Name">
<img class="exetestipic" height="80" width="80" src="Writer Pic URL" />
Your Testimonial Text.<p align="right"><a href="Writer Website URL">Writer Website Name</a></p>
</div>
<div id="exetestidiv1" class="exetestitext" exeauthor="Writer Name">
<img class="exetestipic" height="80" width="80" src=" Writer Pic URL " />
Your Testimonial Text.<p align="right"><a href="Writer Website URL">Writer Website Name</a></p>
</div>
<div id="exetestidiv2" class="exetestitext" exeauthor="Writer Name">
<img class="exetestipic" height="80" width="80" src=" Writer Pic URL " />
Your Testimonial Text.<p align="right"><a href="Writer Website URL">Writer Website Name</a></p>
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->

Customization:

1.) Change “Width” and “Height With Your Desired Pixel.
2.) Change “Your Testimonial Text…” With Your Testimonial Text.
3.) Change “Writer Name” With  Your Testimonial Writer Name .
4.) Change “Writer Website URL” With  Your Testimonial Writer Website URL.
5.) Change “Writer Website Name” With  Your Testimonial Writer Website Name.
6.) Change “Writer Pic URL” With  Your Testimonial Writer Pic URL.

Recommended For You:

What Are The Biggest SEO Mistakes That You Should Avoid?

7) If You Want More Customization, Feel Free To Ask Otherwise Save And Enjoy.

10 Responses to “Stylish JavaScript Testimonials Slider For Blog And Website”

Abdul Rehman Agha says:

June 18, 2012 at 3:03 PM

Hmm, this is a very nice idea. I’ll definitely give this a try on one of my blogs. 🙂

- EXEIdeas says:
  
  June 19, 2012 at 6:18 AM
  
  Thanks…
Anonymous says:

July 29, 2012 at 6:51 PM

Hello Muhammad,
I’m trying to use your code on my computer repair business website and when I stick the code before the body tag what is telling it what specific spot I want the box to show? I tried putting the code in the spot I wanted it but it just showed all three testimonials in the spot I put the code and it did not show the color of the box or rotate the testimonials.
Chris

- EXEIdeas says:
  
  July 30, 2012 at 5:39 AM
  
  You Have To Put This Code In A DIV Where You Want To Show It, Copy The Whole Scrap. If Still Did Not Work, Let Me See Your Page URL…
Cathy says:

February 2, 2013 at 5:34 AM

Thank you, Love this code, it is so easy to use and it is perfect for what I need.

- EXEIdeas says:
  
  February 2, 2013 at 9:51 AM
  
  You Are Welcome To Visit Us And Use Our Code.
Cikgu Shida says:

April 15, 2013 at 5:04 PM

Nice idea, but, i think it can make a blog/web to weigh and slow in loading time

- EXEIdeas says:
  
  April 16, 2013 at 10:22 AM
  
  Thanks For Liking, It Will Not Increase Loading Time Because It Didn’t Contain And External Code Link…
david raphael says:

November 6, 2014 at 4:47 PM

Great little gadget. The only problem I’m having with it is this: All other html/java gadgets beneath this one shift up and down depending on the length of the testimonial. If I could fix the height of it, or something like that, that would be brilliant because I can’t use it as it is. Everything else about it works really well. Thanks.

- EXEIdeas says:
  
  November 7, 2014 at 7:06 AM
  
  Make a div abound it and fix that height. Rest we have to see it live in action for your problem.