Image slider is very popular widget blogger.Its Look your image more beautiful.
Today i will share awesome css slider.just follow my step, here steps are current blows.
[accordion][item icon="eye" title="DEMO"] [/item][/accordion]
Now replace all code blue above with a link destination image, color coded green is an image link, and code / writing in red is the caption.
If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media.
Today i will share awesome css slider.just follow my step, here steps are current blows.
[accordion][item icon="eye" title="DEMO"] [/item][/accordion]
Install Css Image Slider widget blogger:
- Login back to your blogger account Select your blog < Template < Edit HTML
- Save a backup of your blog template code first, now click inside the template code box.
- Now Find the ]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
- Copy and Paste the below code above ]]></b:skin>
- Now Find the <head> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
- Step Copy and Paste the below code above </head>
- Click on Save template to apply the CSS code to your blog.
- After adding the code to your blog’s template, all you need to do next is add the below line of code where ever you want to add the download button while composing a post.
/* image slider by prio-soft */
#sliderFrame { position:relative; width:100%; margin:0 auto 10px; }
#slider { width:100%; height:306px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1LMt8pyJxPMbqMM2AOg0XnG2nAvT1DSPUrsgDpSCYTBLucQ49j8Q4aGrE7b_E0C5LR4wkfrZ95njn35qBavPVotvyWmyZEhoLRx8CbyL4OqMEclmOMS2T4baP2XfMicVKmEjCsvXVumf/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto; box-shadow:0 1px 5px #999999; }
#slider img { position:absolute; border:none; display:none; }
#slider a.imgLink { z-index:2; display:none; position:absolute; top:0; left:0; border:0; padding:0; margin:0; width:100%; height:100%; }
div.mc-caption-bg,div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0; bottom:15px; z-index:3; overflow:hidden; font-size:0;
div.mc-caption-bg { background-color:black; }
div.mc-caption { font:bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; }
div.mc-caption a { color:#FB0; }
div.mc-caption a:hover { color:#DA0; }
div.navBulletsWrapper { background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; }
div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYEwG2hFbH9SUSDe0qqjBE86PoGxNR0FSGzsDquo_uCd7gVUkDQlqTUP_e15LtFCULR8QWOUinDepKB4SvccyJn41zgiTxzOANWIwAHLeE1wGoX4wau33NSK9eJqAnHtNvay5wMSHv7xet/s1600/bullet.png) no-repeat 0 0; float:left; overflow:hidden; vertical-align:middle; cursor:pointer; margin-right:11px; position:relative; }
div.navBulletsWrapper div.active { background-position:0 -11px; }
.intro { bottom:0; color:rgba(0,0,0,0.2); font-size:16px; position:absolute; right:0; text-decoration:none; z-index:99999; }
#slider { transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); }
<script src='https://project.dimpost.com/image-slider/js-image-slider-2.js' type='text/javascript'></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXptWoOq3MCulhnpVONrNmkreFcxCLKArBMY0sy2cqnB9a6rzjU0kI8qtJPnTI4FwZRTw5gcArtw6IIpNI3VfXYlgIPJbihcC_Iyaamg2EYECbkz7-tcc-rlX1u_0pfTfZEevUBSyHjhq8/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipX82Uq01FQbMmgGeXyCqJ-jK78yioH965kwGzoHG4ckUGCDQwKEcwkLU6Xee0DYjxwnWaN4OW5B-y4mZMXcYR1ZKbKhul5EPuLdXo_UHrJbLs8yT1l6nnXLbcB2Yho-gBLkp2wmex3eFf/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJgSrx98Mhv4ZbKJbHlOcP7pcpgrMq6Rou_qA1TrAfHvg86p9z7MsBGiqAEOe4lbZgUwATAlqPHfAYnWkRpt-m6NEhh9IsCozS2JgxuEX_VCeaqnVMVgcUcCiBD-ut_0iqOPKSMYeSEHSC/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGSOMy3uWZj781TZc7-P3JDeaSX0pibzL2p_7J4xSkVChF1zhqGHR171-YDvjEOAaZRUW5YdOswxC4tXfgST-iHX3MqMsHr0ck4XAmlfxdHIJN4I761bJGad-xHhRW8KEisU0V7KguyUmv/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cr1yi9-INDRyZH9Fxf0PKl7czA1fV99zDnXZLIMVzaPqOCzPoDvo2fYSYiteVbUMGj7hXq9ylBLENsBfCuhISmHsYTg4Nna4fsiCP1WjbhcW42QiaJhpwVeB4A9IwfOJwi2ZAaugQF_9/s1600/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="https://prio-soft.blogspot.com/" target="_blank">prio-soft</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://prio-soft.blogspot.com/" target="_blank">CSS</a> <a href="http://prio-soft.blogspot.com" target="_blank">JavaScript</a> Rocks.
</div>Customization:
Now replace all code blue above with a link destination image, color coded green is an image link, and code / writing in red is the caption.
If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media.
Any type of information please Contact us.
Post a Comment