Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Wednesday, February 20, 2013

Awesome And Simple CSS Manual Slider For Blog And Website

This Article Was Live On: Wednesday, February 20, 2013 And Till Now Have12 comments.
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 Article Using...




Don't Forget To Read This Also...



12 comments :

  1. Replies
    1. You Are Welcome Here, Be With Us To Get More...

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

    ReplyDelete
    Replies
    1. Yes, It's A Simple DIV, You Can Add Any Dat That You Can Add In Any DIv, Add Link In Simple Style Like <a href...

      Delete
  3. 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….

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us And Thanks For Liking Us...

      Delete
  4. 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.

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us And Be-With Us...
      Also Thanks For Liking Our Article...

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

    ReplyDelete
    Replies
    1. Thanks For Liking Our Blog And Appreciating Our Work...

      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.