Pasang Slide Content Yang Sederhana

Sekarang kita langsung saja [ cukup 3 langkah ] bila anda sudah melihat contoh slidenya dan tentunya kalau sobat berminat maka bisa ikuti cara sebagai berikut :

1. Dashboard > Layout > Edit HTML [ Disarankan Templete Di Download Terlebih Dahulu ].Dan selanjutnya letakkan kode di bawah ini dia atas kode ]]></b:skin>

#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;

2. Letakkan kode di bawah ini di atas </head>

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>

Simpan Templete.

3. Dan terakhir letakkan kode di bawah ini di mana slide ini di inginkan.

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

<-! Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="Url tmpt penyimpanan gambar Sobat"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> Judul slide Sobat</b></span>
<div class="description">
Ket' Slide Sobat
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->

<-! Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="Url tmpt penyimpanan gambar Sobat"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> Judul Slide Sobat </b></span>
<div class="description">
Ket' Slide Sobat
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->


<-! Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="Url tmpt penyimpanan gambar Sobat"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> Judul Slide Sobat </b></span>
<div class="description">
Ket' Slide Sobat
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->

.
.
.
.
<!-- Copas kode di atas untuk menambah halaman -->
</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Copas kode di atas untuk menambah halaman-->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

Note : Ganti tulisan berwarna sesuai dengan kebutuhan sobat.Semoga bermanfaat...