2013 February 20 Archive - EXEIdeas

Hello, Guy’s…!!! After Many Heavy Sliders, I Am Here To Share A New CSS Slider That Is Even Not CSS-3, It Also Did Not Contain JavaScript Or jQuery That Will Make Your Page Heavy To Load And You Visitor Get Diverge. It Is An Awesome And Simple HTML-CSS Manual Slider With Text, Image, Video, Frame etc For Blog And Website To Spice Them Up With Saving Loading Time.In This Slider, The Image Will Not Slide But Will Be Change Frequently As It Did Not Have J-Query File That Will Make It Heaby, It Is Based Upon #div Code Of HTML, All Images Of Slider Will Be Loaded On First Web-{age Load But One Will Be Only Shown, When You Click On The Other Link (Navigation), The Other Image DIV Will Be Place On The First Image DIV From This The Previous Will Be Hidden Behind Second One.It Has Short And Easy Understandable Code That Every Newbie Can Also Read This. It Actually Contain DIVs That Means You Can Add Anything To It And It Will Be Fine And Nice. Without Any More Preface Move Forward To The Code Going Through The Awesome Features List And Don’t Forget To View The Live DEMo Before Using It On Your Blog/Site. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #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.) Awesome, Simple And Stylish DIV Changer (Slider).2.) No jQuery Or JavaScript Codes.3.) Pure HTML And CSS Code Not Even CSS-3.4.) Cross Browser Available, Works Over IE6+ Browsers With All Version Of Chrome, Firefox, Safari Or Opera And etc.5.) You Can Add Images Or Text Or Even Both Too.6.) Short Code To Quick Load.7.) Based On DIV Can Contain AnyThing Like Frame, Video, Image, Text Or Else.8.) No Extra Effect.9.) No Loading Time Between DIV Changing.10.) Fully Customizable With Unlimited Slides.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. * {margin: 0;padding: 0;}#content-slider {width: 650px;overflow: hidden;height: 300px;margin: 30px 0 0 0;border: solid 1px #666;}#content-slider-inside {list-style: none;height: 320px;overflow: scroll;overflow-y: hidden;}#content-slider-inside li {width: 650px;background: #ccc;height: 300px;color: #666;font-size: 200px;font-family: "Times New Roman", Times, serif;font-style: italic;text-align: center;line-height: 300px;}#navigation {list-style: none;margin: 20px 0 0 0;float: right;}#navigation li {float: left;width: 30px;height: 30px;text-align: center;margin: 0;border: solid 1px #ccc;line-height: 30px;font-family: Arial, Helvetica, sans-serif;margin: 0 0 0 5px;}#navigation li a, #navigation li a:link, #navigation li a:visited {text-decoration: none;display: block;height: 30px;color: #666;}#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {background: #666;color: #fff;}#navigation li a:hover, #navigation li a:focus, #navigation li a:active {background: #666;color: #fff;} 1 2 3 4 5 Customization:1.) Just Change Black Bold And Underline Your With Your Desired One Like Fr54ame, Video, Image, Text etc.2.) Change Black Bold Number Also If You Want To Change It3.) You Can Add Unlimited No Of Slides.4.) Save And Done.