2012 June 08 Archive - EXEIdeas – Let's Your Mind Rock

As we have seen many of awesome and stylish sliders that are really coll while working but they have a lengthy code with heavy JQuery that often disturb your template and also increase your blog and website loading time so high so that visitor ger anger and leave your site or blog. Here I am not telling you to banned the use of slider but it is now important to show your hot post or article to your visitor with saving your space. Here I am telling you to use simple coded and easy sliders that can be customizable according to your template or are not heavy to increases your loading time. I see that many slider contain HTML, CSS, JavaScript And HTMl. As you know that the heaviest language code is JQuery so here is my slider in which Only JavaScript is available with short CSS as you want. It Did Not contain even HTML so you can imaging that how simple is this but first have a look on slider screenshot before proceeding. It didn’t contain as function as other heavy slider contains but it is unique.The original code is provided by Dynamic Drive i just updated this with some extra code and your slider is ready to rock. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:185px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO Features:1.) You Can Add Unlimited Slides.2.) There Are Text And Image In Every Slide.3.) Easy To Install And Quick To Load.4.)No JQuery Or HTML, Only CSS And JavaScript.5.) Full Easy Customizable CSS And JavaScript.6.) Smooth Fade Out Effect.7.) ReadMore Button In Slides.8.) Slide Title Space Available.9.) (500px X 250px) Dimension Is Default, You Can Also Change It.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) 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 .3.) Save It, Now You Are Done. exesliderheading {font-size: 20px; font-style: oblique;}.exepic {float:left;margin:0 20px 0 0;padding:5px;}.exelink {float:right;} /************************************************ Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code* Upgraded By Muhammad Hassan © EXEIdeas International. Visit https://www.exeideas.com/ for full source code***********************************************/var delay = 2500; //set delay between message change (in miliseconds)var maxsteps=30; // number of steps to take to change from start color to endcolorvar stepdelay=50; // time in miliseconds of a single step//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effectvar startcolor= new Array(255,255,255); // start color (red, green, blue)var endcolor=new Array(0,0,0); // end color (red, green, blue)var fcontent=new Array();begintag=' ’; //set opening tag, such as font declarationsfcontent[0]=' Slider 1 Heading: Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Read More… ’fcontent[1]=' Slider 2 Heading: Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Read More… ’fcontent[2]=' Slider 3 Heading: Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Read More… ’fcontent[3]=' Slider 4 Heading: Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Read More… ’fcontent[4]=' Slider 5 Heading: Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Read More… ’closetag=' ’;var fwidth=’500px’; //set scroller widthvar fheight=’250px’; //set scroller heightvar fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.///No need to edit below this line/////////////////var ie4=document.all&&!document.getElementById;var DOM2=document.getElementById;var faderdelay=0;var index=0;/*Rafael Raposo edited function*///function to change contentfunction changecontent(){if (index>=fcontent.length)index=0if (DOM2){document.getElementById(“fscroller”).style.color=”rgb(“+startcolor[0]+”, “+startcolor[1]+”, “+startcolor[2]+”)”document.getElementById(“fscroller”).innerHTML=begintag+fcontent[index]+closetagif (fadelinks)linkcolorchange(1);colorfade(1, 15);}else if (ie4)document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;index++}// colorfade() partially by Marcio Galli for Netscape Communications. ////////////// Modified by Dynamicdrive.comfunction linkcolorchange(step){var obj=document.getElementById(“fscroller”).getElementsByTagName(“A”);if (obj.length>0){for (i=0;i<obj.length;i++)obj[i].style.color=getstepcolor(step);}}/*Rafael Raposo edited function*/var fadecounter;function colorfade(step) {if(step<=maxsteps) { document.getElementById(“fscroller”).style.color=getstepcolor(step);if (fadelinks)linkcolorchange(step);step++;fadecounter=setTimeout(“colorfade(“+step+”)”,stepdelay);}else{clearTimeout(fadecounter);document.getElementById(“fscroller”).style.color=”rgb(“+endcolor[0]+”, “+endcolor[1]+”, “+endcolor[2]+”)”;setTimeout(“changecontent()”, delay);} }/*Rafael Raposo’s new function*/function getstepcolor(step) {var diffvar newcolor=new Array(3);for(var i=0;i 0) {newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);} else {newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);}}return (“rgb(” + newcolor[0] + “, ” + newcolor[1] + “, ” + newcolor[2] + “)”);}if (ie4||DOM2)document.write(‘ ’);if (window.addEventListener)window.addEventListener(“load”, changecontent, false)else if (window.attachEvent)window.attachEvent(“onload”, changecontent)else if (document.getElementById)window.onload=changecontent Customization:1.) Change Blue Text With Your URLs.2.) Change Pink Color With Your Slide Title.3.) Change Red Color With Your Desire Text.4.) If You Want To Change Size, Dimension, Pixel, Fonts, Image Pixel, Text Dimension And Position Or Anything, Feel Free To Ask.5.) Save And Done.