Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Friday, June 14, 2013

Stylish JavaScript Testimonials Slider For Blog And Website

This Article Was Live On: Friday, June 14, 2013 And Till Now Have8 comments.
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.

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 http://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.
7) If You Want More Customization, Feel Free To Ask Otherwise Save And Enjoy.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



8 comments :

  1. Hmm, this is a very nice idea. I'll definitely give this a try on one of my blogs. :)

    ReplyDelete
  2. 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

    ReplyDelete
    Replies
    1. 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...

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

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us And Use Our Code.

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

    ReplyDelete
    Replies
    1. Thanks For Liking, It Will Not Increase Loading Time Because It Didn't Contain And External Code Link...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.