Cara Membuat Content Slider di Blogspot.com

Slide adalah hiasan blog yang cukup menarik perhatian para pengunjung blog, namun jangan terbuai oleh efek yang diberikan. Slide mempunyai kekurangan seperti memberatkan loading blog kamu. Namun segala apapun yang simple insyallah tidak akan memberatkan loading blog kamu, sepertitrik yang satu ini, slide ini terbilang simple karena tidak terlalu menggunakan banyak script dan banyak image. 

Sekarang kita lihat cara memasang Simple Featured Content Slider For Blogger.

1. Login ke blogger
2. masuk ke Rancangan >> Elemen Halaman
3. Setelah itu tambahkan sebuah gadget di tempat yang cukup lebar, karena widget ini mempunyai lebar sekitar 640px.
4. Setelah itu Pilih yang HTML/Javascript dan masukan kode di bawah ini kedalamnya

1. 
   <style type="text/css">#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
   #myController { font-family: Georgia; padding:2px 0; width:640px; background:#3AB7FF; }
   #myController span.jFlowSelected { background:#43A0D5;margin-right:0px; text-align:center; }
   .slide-wrapper { padding: 5px; }
   .slide-thumbnail { width:200px; height:190px; float:left; }
   .slide-thumbnail img {max-width:200px; min-width:200px;max-height:190px; min-height:190px;}
   .slide-details { width:420px; 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>
   
   <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: "640px",
   height: "200px",
   duration: "900",
   prev: ".jFlowPrev", // must be class, use . sign
   next: ".jFlowNext" // must be class, use . sign
   });
   });
   </script>
   
   <div class="jflow-content-slider">
   <div id="slides">
   <!-- Slide #1 Starts-->
   <div class="slide-wrapper">
   <div class="slide-thumbnail">
   <img alt="Okezine - Template" src="ALAMAT GAMBAR POSTINGAN KAMU"/>
   </div>
   <div class="slide-details">
   <a href="ALAMAT URL POSTINGAN KAMU" title="JUDUL POSTINGAN">JUDUL POSTINGAN KAMU</a>
   <div class="description">
   DESKRIPSI DARI POSTINGAN KAMU
   </div>
   </div>
   <div class="clear"></div>
   </div>
   <!-- Slide # 1 Ends -->
   <!-- Slide #2 Starts-->
   <div class="slide-wrapper">
   <div class="slide-thumbnail">
   <img alt="Okezine - Template" src="ALAMAT GAMBAR POSTINGAN KAMU"/>
   </div>
   <div class="slide-details">
   <a href="ALAMAT URL POSTINGAN KAMU" title="JUDUL POSTINGAN">JUDUL POSTINGAN KAMU</a>
   <div class="description">
   DESKRIPSI DARI POSTINGAN KAMU
   </div>
   </div>
   <div class="clear"></div>
   </div>
   <!-- Slide # 2 Ends -->
   <!-- Slide #3 Starts-->
   <div class="slide-wrapper">
   <div class="slide-thumbnail">
   <img alt="Okezine - Template" src="ALAMAT GAMBAR POSTINGAN KAMU"/>
   </div>
   <div class="slide-details">
   <a href="ALAMAT URL POSTINGAN KAMU" title="JUDUL POSTINGAN">JUDUL POSTINGAN KAMU</a>
   <div class="description">
   DESKRIPSI DARI POSTINGAN KAMU
   </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>
   
2. Setelah itu simpan

Sumber :http://oketrik.blogspot.com