LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Sliders / HTML-CSS-PHP-JavaScript / JavaScript Codes / Website / Website Sliders » Stylish JavaScript Testimonials Slider For Blog And Website

Stylish JavaScript Testimonials Slider For Blog And Website

Stylish JavaScript Testimonials Slider For Blog And Website

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.


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:
Simple JavaScript Text + Image Slider For Blog And Website

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:
Show Form Fields Hint On Focus With Stylish CSS

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

You Like It, Please Share This Recipe With Your Friends Using...

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

  1. Abdul Rehman Agha says:

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

  2. Anonymous says:

    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:

      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…

  3. Cathy says:

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

  4. Cikgu Shida says:

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

  5. david raphael says:

    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.

Leave a Reply to Cikgu Shida Cancel reply

Your email address will not be published. Required fields are marked *