How To Add Auto Image Slider In Blogger Homepage

 

Live Demo

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Add the below given code and Save it.

<style> #slider{ width: 900px; height: 290px; border: 5px solid white; box-shadow: 0px 0px 5px #bbb; overflow: hidden; margin: 0 auto; padding: 0px; } figure{ /*width: 3615px;*/ width: 1850px; height: 290px; margin: 0px; padding: 0px; position: relative; animation: pdslider 20s linear infinite; } @keyframes pdslider{ 0%{left: 0; top: 0;} 23%{left: 0; top: 0;} 25%{left: -905px; top: 0;} 48%{left: -905px; top: 0;} 50%{left: -905px; top: -295px;} 73%{left: -905px; top: -295px;} 75%{left: 0; top: -295px;} 98%{left: 0; top: -295px;} 100%{left: 0; top: 0;} } .bglayer{ width: 370px; height: 120px; background: rgba(65,167,222,0.3); padding: 15px; position:relative; animation: bglayer 20s linear infinite; z-index: 1000; border-radius: 10px; } @keyframes bglayer{ 0%{left: 20px; top: 0; visibility:hidden;} 2%{left: 20px; top: -220px; visibility:visible;} 23%{left: 20px; top: -220px; visibility:visible;} 25%{left: 20px; top: -500px; visibility:hidden;} 27%{left: 20px; top: -220px; visibility:visible;} 48%{left: 20px; top: -220px; visibility:visible;} 50%{left: -500px; top: -500; visibility:hidden;} 52%{left: 20px; top: -220px; visibility:visible;} 73%{left: 20px; top: -220px; visibility:visible;} 75%{left: 500px; top: -500px; visibility:hidden;} 77%{left: 20px; top: -220px; visibility:visible;} 98%{left: 20px; top: -220px; visibility:visible;} 100%{left: 20px; top: 0; visibility:hidden;} } .bglayer h1{ color: #FF0; position:relative; text-shadow:0px -5px 5px #CCCCCC; z-index: 1000; } .bglayer h1.one{ animation: header1 20s linear infinite; position: absolute; top: 0; left: 0; } .bglayer h1.two{ animation: header2 20s linear infinite; position: absolute; top: 0; left: 0; } .bglayer h1.three{ animation: header3 20s linear infinite; position: absolute; top: 0; left: 0; } .bglayer h1.four{ animation: header4 20s linear infinite; position: absolute; top: 0; left: 0; } @keyframes header1{ 0%{left: 20px; top: 0; opacity:0;} 2%{left: 20px; top: -500px; opacity:1;} 4%{left: 20px; top: 0px;; opacity:1;} 23%{left: 20px; top: 0px; opacity:1;} 24%{opacity:0;} 100%{left: 20px; top: 0; opacity:0;} } @keyframes header2{ 0%{left: 20px; top: 0; opacity:0;} 25%{left: -20px; top: 500px; opacity:0;} 27%{left: -200px; top: 0px; opacity:0;} 29%{left: 20px; top: 0px; opacity:1;} 48%{left: 20px; top: 0px; opacity:1;} 49%{opacity:0;} 100%{left: 20px; top: 0; opacity:0;} } @keyframes header3{ 0%{left: 20px; top: 0; opacity:0;} 50%{left: 500px; top: 500px; opacity:0;} 52%{left: 20px; top: 200px; opacity:1;} 54%{left: 20px; top: 0px; opacity:1;} 73%{left: 20px; top: 0px; opacity:1;} 74%{opacity:0;} 100%{left: 20px; top: 0; opacity:0;} } @keyframes header4{ 0%{left: 20px; top: 0; opacity:0;} 75%{left: 500px; top: -500; opacity:0;} 77%{left: 1000px; top: 0px; opacity:1;} 79%{left: 20px; top: 0px; opacity:1;} 98%{left: 20px; top: 0px; opacity:1;} 99%{opacity: 0;} 100%{left: 20px; top: 0; opacity:0;} } .bglayer p{ color: #FFF; position:relative; margin: 0; padding: 0; text-shadow:0px -5px 5px #CCCCCC; font-weight:bold; font-size: 16px; font-family: Arial, Helvetica, sans-serif; z-index: 1000; } .bglayer p.one{ animation: paragraph1 20s linear infinite; position: absolute; top: 0; left: 0; } .bglayer p.two{ animation: paragraph2 20s linear infinite; position: absolute; top: 0; left: 0; } .bglayer p.three{ animation: paragraph3 20s linear infinite; position: absolute; top: 0; left: 0; } .bglayer p.four{ animation: paragraph4 20s linear infinite; position: absolute; top: 0; left: 0; } @keyframes paragraph1{ 0%{left: 20px; top: 0; opacity:0;} 2%{left: 20px; top: -500px; opacity:0;} 4%{left: 1000px; top: 70px; opacity:0;} 6%{left: 20px; top: 70px;; opacity:1;} 23%{left: 20px; top: 70px; opacity:1;} 24%{opacity:0;} 100%{left: 20px; top: 0; opacity:0;} } @keyframes paragraph2{ 0%{left: 20px; top: 0; opacity:0;} 25%{left: -20px; top: 500px; opacity:0;} 27%{left: 20px; top: -5000px; opacity:0;} 29%{left: 20px; top: -500px; opacity:0;} 31%{left: 20px; top: 70px; opacity:1;} 48%{left: 20px; top: 70px; opacity:1;} 49%{opacity:0;} 100%{left: 20px; top: 0; opacity:0;} } @keyframes paragraph3{ 0%{left: 20px; top: 0; opacity:0;} 50%{left: 500px; top: 500px; opacity:0;} 52%{left: 20px; top: 200px; opacity:0;} 54%{left: -1000px; top: 70px; opacity:0;} 56%{left: 20px; top: 70px; opacity:1;} 73%{left: 20px; top: 70px; opacity:1;} 74%{opacity:0;} 100%{left: 20px; top: 0; opacity:0;} } @keyframes paragraph4{ 0%{left: 20px; top: 0; opacity:0;} 75%{left: 500px; top: -500; opacity:0;} 77%{left: 1000px; top: 0px; opacity:0;} 79%{left: 1000px; top: 500px; opacity:0;} 81%{left: 20px; top: 70px; opacity:1;} 98%{left: 20px; top: 70px; opacity:1;} 99%{opacity: 0;} 100%{left: 20px; top: 70px; opacity:0;} } </style> <div id="slider"> <figure> <img src="Add Your Image Link" /> <img src="Add Your Image Link" /> <img src="Add Your Image Link" /> <img src="Add Your Image Link" /> </figure> <div class="bglayer"> <h1 class="one"> Add Your Header </h1> <h1 class="two"> Add Your Header </h1> <h1 class="three"> Add Your Header </h1> <h1 class="four"> Add Your Header </h1> <p class="one"> Add Your Description </p> <p class="two"> Add Your Description </p> <p class="three"> Add Your Description </p> <p class="four"> Add Your Description </p> </div> </div>

 

Now save the template so that changes can take place.

Settings

Search this tag and set your own.

img src=" = Add Your Image Link

h1 class="one"> = Add Your Header

p class="one"> = Add Your Description

Once you are done with the settings edit the code and Save the template again. Thats it, a cool sidebar slider can now be seen in your blogger blog.