Image Slider --disebut juga Featured Post Slider atau Content Image Slider-- biasanya dipasang di blog toko online ataupun blog lembaga/organisasi, untuk menonjolkan konten yang penting di homepage.
Penampilan slidernya seperti gambar ilustrasi di atas. Posisinya di atas widget Blog posts. Posting dan dan gambar yang ditampilkan dipilih sendiri (manual), karena slider ini tanpa javascript sehingga fast loading alias ringan. Anda harus mengganti url gambar dan kata-katanya.
Cara Membuat Slider Gambar Responsive
PASANG KODE HTMLLetakkan di antara kode <body> dan </body> atau di atas kode </body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='width:100%;max-width:540px;margin:5px auto 20px;'> <div style='position: relative;height: 0; padding-bottom: 45%;'> <div style='position: absolute;height: 100%; width: 100%;'><div id='pure-slider'><input checked id='s1' name='num' type='radio'/><input id='s2' name='num' type='radio'/><input id='s3' name='num' type='radio'/><input id='s4' name='num' type='radio'/><input id='s5' name='num' type='radio'/><div class='dikiri'> <label for='s1'>‹</label> <label for='s2'>‹</label> <label for='s3'>‹</label> <label for='s4'>‹</label> <label for='s5'>‹</label> </div><div class='dikanan'> <label for='s1'>›</label> <label for='s2'>›</label> <label for='s3'>›</label> <label for='s4'>›</label> <label for='s5'>›</label> </div>
<div class='chaild'><label for='s1'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFALFFPrYpupQ8CdQuVrAg4ebNQsNaN2q9W4rOfxpdeybgQJ8MAE8bfSxXMTyGUjTzwSsm1lZdtwZgeytBeWihFSMvUelnQ9BRfxDWu7A1y3Y5Zij2IaML9Koz4HBHkcRr9jfarlcXUy7V/s320-Ic42/how%252520to%252520blog%252520small.jpg'/> <span>
<b>Hello world</b>
<br/>Welcome and enjoy!</span></a></div>
<div class='chaild'><label for='s2'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcwP58Qw_tHzLZq0WQNDcKuW1o78xfgANYI4QEVCkbliTzpg-4Xl8ikrH0lCUv_f1GTSH7NWc2Z0xY1gNRvlRuZ-Q_TVv299OeVJT0msnZQ_ptGBcvW0qzo9tZzuzwf557y1GsAFiuBCt/s300-Ic42/blog%252520blogger%252520blogging.jpg'/><span>
<b>Assalamu'alaikum!</b>
<br/>This is sample text aja</span></a></div>
<div class='chaild'><label for='s3'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSltn_W5FbOGHINY5F0gBoYcxHGPK_CafS9ywdeehOOTxrOtJzHBuYAVqzBFKYKnIPeuM_P6Q7vbzyNyUTNW4TAxm2Twd_Yg5qHU7oy60hbW-oRChtuejADESdw7DYh0WlwvOpDE6By6vc/s500-Ic42/kontify-blogger-template.jpg'/><span>
<b>Halow Semuanyah!</b>
<br/>This is sample text ajah</span></a></div>
<div class='chaild'><label for='s4'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikTkoyfjK87T2aTxrnJRPrxPXkGD4Bn3PL-rd5SgpFBH-plRhTTLL_1CTKK7A1119ZR86qmDYcO715zZ82MqSg_3N7oVfAtSGnXv5KZ6yuqOzG1QAqkbMmc_UYWUtJb0wbmv_l2RyJJDJ5/s610-Ic42/Cara-Membuat-Breadcrumbs.png'/><span>
<b>Good Luck!</b>
<br/>This is sample text aja #000</span></a></div>
<div class='chaild'><label for='s5'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjapVViyuBpl3XfDg1cqumykbIkwOPymhiPU2Hz7bWwwAcH5bR-0jpyWJzb9gDiW4TqVDZryP3D-swmA7ogNUwTgMSJvCslLpLvGW6fDPGqRRaIq3TzAdDwWv-lidR-vp6J_Eu3XqtxrD1/s680-Ic42/how-to-add-related-posts-in-blogger.jpg'/><span>
<b>Lorep Ipsum</b>
<br/>Dolor Sit Amet Amet Jabang Bayee</span></a></div>
</div>
</div>
</div></div>
</b:if>
KODE CSS
Pasang di atas kode <head>
<style>
#pure-slider{width:auto;height:100%;position:relative;overflow:hidden;background:#000;margin:0;padding:0}
#pure-slider .chaild{list-style:none;margin:0;padding:0}
#pure-slider .chaild label{position:absolute;bottom:5px;left:10px;z-index:12;background:#000;color:#FFF;width:12px;height:12px;border-radius:100%;border:2px solid #9C9C9C;text-align:center;cursor:pointer;padding:0}
#pure-slider .chaild:nth-child(9) label{left:28px}
#pure-slider .chaild:nth-child(10) label{left:46px}
#pure-slider .chaild:nth-child(11) label{left:64px}
#pure-slider .chaild:nth-child(12) label{left:82px}
#pure-slider .chaild img{border:none;outline:none;position:absolute;top:0;left:-100%;width:100%;height:100%;opacity:.2;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
#pure-slider a{text-decoration:none!important}
#pure-slider .chaild span{cursor:default;display:block;position:absolute;right:0;bottom:-52px;left:0;height:37px;background-color:rgba(0,0,0,0.8);font:normal 11px/26px Arial,Sans-Serif;color:#FFF;text-align:left;font-size:13px;opacity:0;visibility:hidden;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;line-height:18px;padding:7px 10px 26px}
#pure-slider .chaild b{font-size:18px;line-height:20px}
#pure-slider input#s1:checked ~ .chaild:nth-child(8) label,#pure-slider input#s2:checked ~ .chaild:nth-child(9) label,#pure-slider input#s3:checked ~ .chaild:nth-child(10) label,#pure-slider input#s4:checked ~ .chaild:nth-child(11) label,#pure-slider input#s5:checked ~ .chaild:nth-child(12) label{background:#1F63A7;border-color:#fff}
#pure-slider .chaild input:checked ~ img,#pure-slider .chaild input:checked ~ a img{top:0;left:0}
#pure-slider input#s1:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(12) a img{left:0;opacity:1}
#pure-slider input#s1:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(12) a img{left:100%}
#pure-slider input#s1:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(12) a img{left:200%}
#pure-slider input#s1:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(12) a img{left:300%}
#pure-slider input#s1:checked ~ .chaild:nth-child(12) a img{left:400%}
#pure-slider input#s2:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(11) a img{left:-100%}
#pure-slider input#s3:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(10) a img{left:-200%}
#pure-slider input#s4:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(9) a img{left:-300%}
#pure-slider input#s5:checked ~ .chaild:nth-child(8) a img{left:-400%}
#pure-slider input#s1:checked ~ .chaild:nth-child(8) a span,#pure-slider input#s2:checked ~ .chaild:nth-child(9) a span,#pure-slider input#s3:checked ~ .chaild:nth-child(10) a span,#pure-slider input#s4:checked ~ .chaild:nth-child(11) a span,#pure-slider input#s5:checked ~ .chaild:nth-child(12) a span{bottom:0;z-index:10;opacity:1;visibility:visible}
#pure-slider input{display:none}
#pure-slider .dikiri{position:absolute;top:50%;margin-top:-30px;bottom:26px;left:0;z-index:11}
#pure-slider .dikanan{position:absolute;top:50%;margin-top:-30px;bottom:26px;right:0;z-index:11}
#pure-slider .dikiri label,#pure-slider .dikanan label{display:none;font-size:60px;font-weight:700;line-height:90%;color:#000;background:#fff;opacity:.2;padding:0 7px 5px}
#pure-slider .dikiri label:hover,#pure-slider .dikanan label:hover{opacity:.4;cursor:pointer}
#pure-slider .dikiri label{border-radius:0 20px 20px 0;padding-left:3px}
#pure-slider .dikanan label{border-radius:20px 0 0 20px;padding-right:3px}
#pure-slider input#s1:checked ~ .dikiri label:nth-child(5),#pure-slider input#s1:checked ~ .dikanan label:nth-child(2),#pure-slider input#s2:checked ~ .dikiri label:nth-child(1),#pure-slider input#s2:checked ~ .dikanan label:nth-child(3),#pure-slider input#s3:checked ~ .dikiri label:nth-child(2),#pure-slider input#s3:checked ~ .dikanan label:nth-child(4),#pure-slider input#s4:checked ~ .dikiri label:nth-child(3),#pure-slider input#s4:checked ~ .dikanan label:nth-child(5),#pure-slider input#s5:checked ~ .dikiri label:nth-child(4),#pure-slider input#s5:checked ~ .dikanan label:nth-child(1){display:block}
</style>
Save! Simpan Template.
Code Source
Post a Comment
Post a Comment