Belajar Content Slider dengan Simplest jQuery Featured di Blogspot

Halo kawan-kawan bloger semua.. semoga tetap baik-baik saja dan semakin berjaya. Sekarang saya akan memposting sebuah template dengan menggunakan jQuery content slider dimana kawan-kawan bloger pemula akan menapilkan postingan terbaru di blog  dengan cara yang berbeda dari postingan umumnya yang kawan-kawan liat di bloger-bloger lain. Karena disini Tempat belajar bersama, kita belajar caranya agar postingan baru kalian nantinya akan tampil dengan  beautiful flowing style. Artinya, postingan tersebut akan tampil  berbentuk semacam slide show foto secara otomatis. Silahkan kawan-kawan perhatikan langkah-langkahnya jangan sampai salah menerapkan. Sebab sangat disayangkan kalo nanti setelah capek-capek ternyata gak tampil karena kesalahan penerapan. Padahal ini adalah salah satu scrip yang sangat mudah penerapannya hanya butuh sedikit kehati-hatian  saat penerapannya.

Langsung saja tanpa banyak basa-basi karena saya juga sudah tidak punya bahan untuk membahas ini langkah langkahnya sbb :

1. Install CSS dan JavaScripts di Templat.

• Buka Layout  Edit HTML dan click "Download full template" untuk membackup template lama kamu. ( Jaga-jaga terjadi kerusakan ).
• Cari kode HTML ini di template kalian ]]></b:skin> dan letakkan ( kopas ) kode berikut diatas code tadi.

 #jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
#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; }

•  Cari code </head> kopas code kode berikut diatas kode tadi:

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></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>

2. Menambahkan Widget dan kopas kode berikut kedalam HTML/JavaScript.

<div class="jflow-content-slider">
<div id="slides">

<!-- Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->

<!-- Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->


<!-- Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->

.
.
.
.
<!-- You can add as many slides as you want above this line -->
</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

 Catatan :

• ( pada code ke 3 ) nomor berwarna merah untuk lebar dab tinggi main slider dan nomor yang berwarna  hijau untuk kecepatan sliding.
•  Silahkan letakkan dimana saja widget div tag nya terserah kalian.
• ( pada code langkah ke 4 ) bisa kalian ganti "judul gambarnya, Judul SLIDE dan TEXT  SLIDE" dengan gambar dan kalian, judul dan text yang sesuai.
• Kalian juga bisa mengurangi atau menambahjumlah slides tergantung kebutuhan.
• Ingat kalau menambah atau mengurangi jumlah tampilan slide, jangan lupa untuk mengurangi atau menambah jumlah jFlowControlnya. Seperti contoh kalau kalian menambah slide 4, maka kalian harus menambahkan  <span class="jFlowControl">4</span> jadi kalau kalian punya 15 slide maka jFlowControlnya seperti ini <span class="jFlowControl">15</span> .
• ( pada code langkah ke 3 ) Link berwarna biru untuk link untuk 2 JavaScripts. kalau kalian punya hosting file / server silahkan download scriptsnya dan upload semua ke hosting file / server kalian agar bisa di loading.
• Bagi yang kurang mengerti sory saja, ini hasil tarjamahan dari B. Inggris, masih koplak kaplek  coy.
• Kalau mau liah demonya kilik disini