Menu

Sabtu, 11 Februari 2017

Cara Membuat Slider Gambar Responsive di Blogger Tanpa Javascript

Cara Membuat Slider Gambar (Image) Responsive di Blogger Tanpa Javascript. Pure CSS Responsive Slider - Without Javascript. Fast Loading & User Friendly!

Pure CSS Responsive Slider
SLIDER yaitu tampilan animasi posting blog berupa gambar besar atau kecil yang bergerak otomatis ataupun manual di halaman depan blog.

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 HTML
Letakkan 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'>&lt;input checked id=&#39;s1&#39; name=&#39;num&#39; type=&#39;radio&#39;/&gt;<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'>&#8249;</label> <label for='s2'>&#8249;</label> <label for='s3'>&#8249;</label> <label for='s4'>&#8249;</label> <label for='s5'>&#8249;</label> </div><div class='dikanan'> <label for='s1'>&#8250;</label> <label for='s2'>&#8250;</label> <label for='s3'>&#8250;</label> <label for='s4'>&#8250;</label> <label for='s5'>&#8250;</label> </div>
<div class='chaild'><label for='s1'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEily48koGESK-2afWsU0_JsWRG07QBYQd70w4gWL_Jud18WKSLheI5W3o-0JsQ0Qa8HpOkHNkSVN4osT2s6QjjQHfjm6co_A6VwvR99RznJFDa7sr52OSI30Cm_N-MXIWCSV7GsaPJUQWU9/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/AVvXsEizzyvjHykcSaEWU7HskQUFqiWeYutQi5wzKNSWxADRcPTZBDBIn6UO3L_AA0W8THSnAUE9waySRYWEX230BEEEMxVscxGxfPovZUSzae0dbDORYihwD5ywBF9JD-zw275ov2vhyphenhyphennRX7Ys9/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/AVvXsEg54tt7tTMtLQYhGTd7H3imScuv0TQ4gm8vr6Ch9rOd_EkmHh3PpluRIgpn4JUkb4n9P7ju-cJhXqMSK3phfRZalLEqbrQgwcyr3O5Q-3g5NgAMzK2ikQNUt4RLl-NprOQ9y9OZkKlvrCAt/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/AVvXsEhBGb__5mwx5JFMrxbPLGzKb5gupkIO-9N3UMM4NwBM47qIx65Z3aWyy4LnJoB4kLsLjA5kSR4HRQbiRjhNqmz3yfwsrySQj0Al304XbkvdBZEolDNa-R0CLlLbf9MOFuuns-Ai2DKKlyLk/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/AVvXsEgQxkAyxJowgW82DvbEbtNJWDxzp3S8RC-LgLGat89CQ-bpCKDaNaUFIo-Rvm1Uwxaed_kS-qpRuNy1wZK1-BdyAc8snBjmw708Q9hvIBliMinNu3b87jrpH31y8cw0JJBiSMUncsmk_Rxg/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

Share This

Previous Post
Next Post
en

Written by

Related Posts

0 Please Share a Your Opinion.: