LATEST >>

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

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Sliders / Website / Website Sliders » Awesome And Simple CSS Manual Slider For Blog And Website

Awesome And Simple CSS Manual Slider For Blog And Website

Awesome And Simple CSS Manual Slider For Blog And Website

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.

CSS-Manual-Slider-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.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.

<style>
* {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;}
</style>
<div style="width: 650px; margin: 0 auto 0 auto;">
<div id="content-slider">
<ul id="content-slider-inside">
<li id="one"><img src="http://www.njsexecutive.com/wp-content/uploads/2010/10/Mercedes-S-Class-650-x-300.png" alt="Slider One" height="300" width="650"/></li>
<li id="two"><img src="http://entertainmentzz.com/wp-content/uploads/2012/11/2013-honda-accord-phev-155--650x300.jpg" alt="Slider Two" height="300" width="650"/></li>
<li id="three"><img src="http://www.gamechy.com/wp-content/uploads/gamepics/image/thumbs/650x300-gran-turismo-4.jpg" alt="Slider Three" height="300" width="650"/></li>
<li id="four"><img src="http://periodismodelmotor.com/wp-content/uploads/cache/650x300-ferrari-458-italia-.jpg" alt="Slider Four" height="300" width="650"/></li>
<li id="five"><img src="http://periodismodelmotor.com/wp-content/uploads/cache/650x300-Peugeot-4008.jpg" alt="Slider Five" height="300" width="650"/></li>
</ul>
</div>
<ul id="navigation">
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>
</div>

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 It
3.) You Can Add Unlimited No Of Slides.
4.) Save And Done.

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

12 Responses to “Awesome And Simple CSS Manual Slider For Blog And Website”

  1. okenesia.com social bookmark says:

    put to my web

  2. Nice slider man,,keep it up..

    Regards:
    bloggerheroe.com

  3. please can you tell me how to add links to this slideshow and make it auto……….please help..

  4. Hi,
    Nice information you have shared. Thanks for sharing this information and it really gave a nice knowledge to me …. Keep blogging will follow you….

  5. Your Blog’s Information is really useful, After read your blog I know this.I like this.

    Keep up the great work, I’ve bookmarked for future reference.

  6. Nice info, i like youre blog, so nice, and have good trafic alexa, great job

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>