Widget Slider responsif dengan fitur dan content. Simple!

Widget slider resposnsif tanpa edit html, simple dan mudah banget

TutorialMixs- oke sobb.. baru ada waktu lagi ku posting di blogku yang baru ini. maklum lagi rame demo buruh, demo guru, demo wakil rakyat,, hadehhh mumet jadinya.. (he,e.e memang hubunganya apa coba?? ngaco!)

kali ini aku mo coba share ke sobat blogger terkait penerapan widget slider yang bagi aku sangat responsif banget di samping kagak perlu susah otak-atik script sobat..

oke langsung aja ke topik,..

seperti biasa aja, langsung sobat masuk ke template dan tambah widget baru.. (maklum lagi males buat tutorial komplit, tapi ku rasa ini gampang banget juga kok, jadi tidak perlu lah aku jelasin mendetail)

kalau kepingin tau penjelasan komplitnya silahkan kunjungi di halaman link berikut

setelah sobat masuk di penambahan widget baru, silahkan copykan scriptdi bawah ini, sedangkan untuk demonya bisa liat dan klik di sini

Berikut Scriptnya :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/freebloggerhelp-jquery.flow.1.2.auto.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "610px", height: "235px", duration: 400, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); </script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">#jFlowSlide{ background:#f8f8f8; font-family: Georgia; } #myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; } #myController span.jFlowSelected { background:#43A0D5;margin-right:0px; } .slide-wrapper { padding: 5px; } .slide-thumbnail { width:300px; float:left; } .slide-thumbnail img {max-width:300px; } .slide-details { width:290px; float:right; margin-left:10px;} .slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; } .slide-details .description { margin-top:10px; } .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; } .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; } </style> <div class="jflow-content-slider"><div id="slides"><div class="slide-wrapper"><div class="slide-thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Ko6Rw0q61_uAzrFEVjanLyNGx0dUKpMN1x699P69qMAH5rkAfnPUbOC6hEwMlEhrikn7-eyeJfvpujlwM69CBlx-fbqBYnvM5FsuRXzoj7TazNEPDePgeKdfNUSR09LDZ-aCehdz90J4/s1600/dini+fronitasari.jpg" alt=""/></div><a href="http://tutorialmixs.blogspot.com/" rel="dofollow" target="_blank" /></a><div class="slide-details"><h2><a href="http://youtube-most-wanted.blogspot.com/2015/11/wow-tengok-video-pribadi-dosen-cantik.html" target="_blank">Dini Fronitasari adalah seorang dosen di Universitas Multimedia Nusantara (UMN). Selain itu, Dini juga pernah menjadi dosen di Universitas Bina Nusantara (Binus)</a></h2><div class="description">TEXT-OF-THE-SLIDE 1 </div></div><div class="clear"></div></div><div class="slide-wrapper"><div class="slide-thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTY-h6R3bPiYg4-0Wg2STnRPfWwhhA_7PCrholknGjOVfEMg6GBUztPBKRqBE_ga5n__q9cuZV9wSuk3U3t_E-tyO7OITUlEi_tX5kzIykUZJdQ3HjF8sARaN5KEXSa8rnqfO1KuB144V/s1600/video+pribadi+dewi+persik.jpg" alt=""/><a href="http://tutorialmixs.blogspot.com/" rel="dofollow" target="_blank" /></a></div><div class="slide-details"><h2><a href="http://youtube-most-wanted.blogspot.com/2015/11/lagi-video-pribadi-dewi-persik-ini-tak.html" target="_blank">Setelah netizen di hebohkan oleh tersebarnya video dewi persik dengan tarian menggila dewi menari streaptise di youtube. sekarang video pribadinya yang di sinyalir bukan untuk konsumsi publik, akhirnya menyebar juga. </a></h2><div class="description">TEXT-OF-THE-SLIDE 2 </div></div><div class="clear"></div></div><div class="slide-wrapper"><div class="slide-thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_KVYQc33XqGt8VuRIo8mHI8Ce7FZL3H25ENNg9eQnjhU-n_YF9P5M3HfXouRhVyIlZFll8FnNmz-xw_TU9QAQp64VqY9_Ywnf5TnnnrNL2qYdwnYf0sWIA89g4Xk5j2P993vkMVw3S5X/s1600/algojo+isis.JPG" alt=""/><a href="http://tutorialmixs.blogspot.com/" rel="dofollow" target="_blank" /></a></div><div class="slide-details"><h2><a href="http://youtube-most-wanted.blogspot.com/2015/11/jihadi-jhone-si-algojo-isis-di-kabarkan.html" target="_blank">WASHINGTON - Serangan pesawat tanpa awak milliter Amerika Serikat (AS) di Raqqa, Suriah, pada hari Kamis mengenai kendaraan yang diyakini ditumpangi algojo ISIS, Jihadi John</a></h2><div class="description">TEXT-OF-THE-SLIDE 3 </div></div><div class="clear"></div></div><div class="slide-wrapper"><div class="slide-thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidqt3pGoBRSiAi5uH7OHKnDInWHhfOlJV_cWDamnzv5sKd56_3KR5zOLd9wPvQcQ3Wlp4817En0KLXb3u1D56MumhiPCmiSEvQwuIV2NEaiV39Qctsb5C6BWMc0lRpseXwAYnjVZ9GfDGQ/s1600/siwa+sma+berantem.jpg" alt=""/><a href="http://tutorialmixs.blogspot.com/" rel="dofollow" target="_blank" /></a></div><div class="slide-details"><h2><a href="http://youtube-most-wanted.blogspot.com/2015/09/heboh-video-pertengkaran-siswi-anak-sma.html" target="_blank">Merdeka.com - Kekerasan yang dilakukan siswi Sekolah Menengah Atas (SMA) semakin mengkhawatirkan</a></h2><div class="description">TEXT-OF-THE-SLIDE 4 </div></div><div class="clear"></div></div><div class="slide-wrapper"><div class="slide-thumbnail"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxzPSQx_M4-zY9w20O_3c6Io_acNS4bJ44xaeD3lxITvTLMagLFc2M4pLXXL51mFaYPq6c10bCwtFV_1ceENp_bu8m-VKZyTP1gRIAmLRpcztvlwqywzvy6FwAhRvxzo4MjPnrn4taPe6/s1600/linsaylohan+mualaf.jpg" alt=""/><a href="http://tutorialmixs.blogspot.com/" rel="dofollow" target="_blank" /></a></div><div class="slide-details"><h2><a href="http://youtube-most-wanted.blogspot.com/2015/05/linsay-lohan-mualafkah-berikut-fakta.html" target="_blank">Salah satu kamera paparazzi berhasil mengabadikan potret Lindsay melintas di kawasan Brooklyn, New york. Di sanalah ia tampak membawa Alquran, seperti dilansir Daily Mail.</a></h2><div class="description">TEXT-OF-THE-SLIDE 5 </div></div><div class="clear"></div></div></div><div id="myController"><span class="jFlowPrev">Prev</span><span class="jFlowControl">1</span><span class="jFlowControl">2</span><span class="jFlowControl">3</span><span class="jFlowControl">4</span><span class="jFlowControl">5</span><span class="jFlowNext">Next</span></div><div class="clear"></div></div>

penjelasan singkat:

- untuk script yang berExstention .JPG, silahkan ganti gambar sobat

- sedangkan untuk script yang berExstention .HTML silahkan ganti link sobat blogger..

klo ada yang kurang jelas silahkan di tanyakan aja sobb di comment, soalnya capek kalo harus memberi penjelasannya he,e, soalnya ini udah sangat sangat simple dan sederhana banget..

oke semoga bermanfaat buat sobat