Cara Memasang Image Slider Responsive Blogger

Bismillahirrahmanirrahim sobat blogger.. Sudah sekian lama sekali saya belum posting sebuah artikel dikarenakan kesibukan yg mulai sangat padat disekolah dan aktivitas sehari2 saya dan ok sekarang kita langsung saja ya.. kali ini saya akan mulai memposting tentang Cara Memasang Image Slider Responsive Blogger yg mungkin dapat bermanfaat buat semua sobat blogger..


- Ok Langkah Pertama seperti biasa sobat harus Login Blogger sobat

- Kemudian setelah sobat login blogger masing2 setelah itu disana ada pilihan seperti di gambar berikut dan pilih persis seperti lingkaran tersebut:
- Dan sesudah itu sobat akan melihat pilihan add widget terserah sobat mau pilih dimana letaknya atau sobat juga bisa memasang di selain widget seperti Laman, Menu, dll

- Kemudian sobat pasang kode script HTML berikut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://responsiveslides.com/responsiveslides.min.js?v=1.6"></script>   <script> $(function () {       // Slideshow 1       $("#slides1").responsiveSlides({         auto: true,         pagination: true,         nav: true,         fade: 500,         maxwidth: 800       });     }); </script> <br /> <div id="wrapper"> <div class="rslides_container"> <ul class="rslides" id="slides1"> <li>           <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvToucbjb-4iVqcdSWMYmBHu03s8GJLkX-eZhlD4-Nbipk7JAfFbzU9_pe6zt0hhAMz5JPYVHqXx4PmdhA9kwltzHuEI0KFP1Qvsie3Fz4nx93z0V3kPfe74yvddAXCeDkbUoNhXB0cQ/s1600/1.jpg" />           <div class="caption"> Light Lawlet Quotes</div> </li> <li>           <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuUmuT9lt06-Xho-3PESt_1T318ih1kEu6-W70Lw2f04wPbmDeF0nj6JdlyrY7sKUNNFKLmOd4HXTt6PurFH3oyBxqjPrNm9LlycR8b6BHy4r8FdD7fOzPitlUhp3dLqr4AUvsIjCo3Y/s1600/2.jpg" />           <div class="caption"> Light Yagami</div> </li> <li>           <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnUfDZVgq7zIG3HUuHFpG-CKG5K0q-2E13D5p7XCgibafLrum7KLlm8GWNPOtyX0-HFgKp6WMjcny1oeisyl414gd_9eM1LVKy4Qzu43qdcyf4SrFHcLVQopQxJeHJTNtDMQC7fhzyd78/s1600/5.jpg" />           <div class="caption"> I Am Justice</div> </li> <li>           <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZhc7QSxGt_RNf0bByicytSzxBnFJtDAkv7JDNxfZYDKz6ipAqWbhcw_xsZ-VrF-SfASd8QSEl_V2z5UarpPdScF330KCuNVIWugMXnvBjEOksjuZ4ZHTCU-pEcSnYROMZbLhs6fHTQM/s1600/4.jpg" />           <div class="caption"> Light Lawlet Sitting</div> </li> <li>           <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOF4Xsra5ZApgfvbh-2-dZxaeVkCAAHKwFdzaD8VekBqoPNgfzDdpwEpD5FRnFOdHyKC53RMRtUf7vunp5TfvI-Ff-Uvl4jiZ_cj_X3NPFRaCQ6GT0u1NomOE8O-8te1gZaU101ueQhE/s1600/3.png" />           <div class="caption"> Apple&nbsp;</div> </li> </ul> </div> </div> <style> /*! http://responsiveslides.com v1.54 by @viljamis */ .rslides {   position: relative;   list-style: none;   overflow: hidden;   width: 100%;   padding: 0;   margin: 0;   } .rslides li {   -webkit-backface-visibility: hidden;   position: absolute;   display: none;   width: 100%;   } .rslides li:first-child {   position: relative;   display: block;   float: left;   } .rslides img {   display: block;   height: auto;   float: left;   width: 100%;   border: 0;   margin-bottom: -3px;   } /*! http://responsiveslides.com/with-captions/themes.css?v=1.13 */ * {   margin: 0;   padding: 0;   } #wrapper {   float: left;   width: 100%;   margin-bottom: 50px;   } a {   color: #222;   } .rslides {   margin: 0 auto;   } .rslides_container {   margin-bottom: 50px;   position: relative;   float: left;   width: 100%;   margin-left: -20px;   } .rslides1_nav {   position: absolute;   -webkit-tap-highlight-color: rgba(0,0,0,0);   top: 50%;   left: 25px;   z-index: 99;   opacity: 0.7;   text-indent: -9999px;   overflow: hidden;   text-decoration: none;   height: 61px;   width: 38px;   background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;   margin-top: -45px;   } .rslides1_nav:active {   opacity: 1.0;   } .rslides1_nav.next {   left: auto;   background-position: right top;   right: -20px;   } .rslides2_nav {   position: absolute;   -webkit-tap-highlight-color: rgba(0,0,0,0);   top: 0;   left: 0;   display: block;   background: #fff; /* Fix for IE6-9 */   opacity: 0;   filter: alpha(opacity=1);   width: 48%;   text-indent: -9999px;   overflow: hidden;   height: 91%;   } .rslides2_nav.next {   left: auto;   right: 0;   } .rslides3_nav {   position: absolute;   -webkit-tap-highlight-color: rgba(0,0,0,0);   opacity: 0.6;   text-indent: -9999px;   overflow: hidden;   top: 0;   bottom: 0;   left: 0;   background: #000 url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left 50%;   width: 38px;   } .rslides3_nav:active {   opacity: 1.0;   } .rslides3_nav.next {   left: auto;   background-position: right 50%;   right: 0;   } .rslides1_nav:focus, .rslides2_nav:focus, .rslides3_nav:focus {   outline: none;   } .rslides_tabs {   margin-top: 10px;   text-align: center;   } .rslides_tabs li {   display: inline;   float: none;   _float: left;   *float: left;   margin-right: 5px;   } .rslides_tabs a {   text-indent: -9999px;   overflow: hidden;   -webkit-border-radius: 15px;   -moz-border-radius: 15px;   border-radius: 15px;   background: #ccc;   background: rgba(0,0,0, .2);   display: inline-block;   _display: block;   *display: block;   -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);   -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);   box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);   width: 9px;   height: 9px;   } .rslides_tabs .rslides_here a {   background: #222;   background: rgba(0,0,0, .8);   } .caption {   position: absolute;   display: block;   bottom: 0;   left: 0;   right: 0;   padding: 15px;   text-align: center;   background: #000;   background: rgba(0,0,0, .8);   color: #fff; } </style>

- Nah jika kalian bertanya mengenai kode script yg berwarna itu sobat sudah tidak perlu bertanya lagi karena sudah ada jawabannya yaitu kode yg berwarna biru itu sebuah kode gambar sobat yg sudah sobat upload ke media uploader seperti Mediafire, 4Shared, Upfile, dll sobat hanya perlu copas saja alamat url gambar sobat..

- Setelah sobat berhasil selesai memasang kode script diatas tersebut kedalam widget sobat atau ke halaman lainnya maka sobat tinggal review kode script tersebut dan lihat kedalam blogspot sobat masing2 blogger apakah work apa nggak mungkin disana terjadi kesalahan karena templatenya tapi ini saya yakin berhasil ke blogger sobat masing2 silakan dicoba  apabila mungkin ada yg gk paham bisa comment di kolom komen yg berada dibawah postingan saya ok, cukup seperti itu saja Tutorial dari saya yg singkat padat dan insyaallah dapat bisa dimengerti oleh para sobat blogger semua.

Sekian Dari Saya Semoga Sukses Bloggingnya Dan Keep It Up Terus yahh .... :-)

Post a Comment

0 Comments