SliDer KonTen oToMaTis UnTuK BloG MenGguNaKan JQuery ParT.2

Bismillah ...
Metode instalasi hampir sama dengan tutorial sebelumnya ... Awesome Content Sliderotomatis untuk jQuery menggunakan BloggerBagian 1 ...
Pada slider konten ini waktu (Awesome ContentSlider otomatis untuk jQuery menggunakanBlogger Bagian 1) Saya menggunakan style dari slide Slick dan sedikit penyesuaian yang dapat digunakan di Blogger ...
Cukup ikuti langkah-langkah di bawah ini ...Saya yakin akan ada masalah ...

Slick Slideshow

Langkah 1: Menerapkan Style
Login ke Dashboard Blogger dan arahkan ke Layout> Edit HTML
Jangan klik kotak centang yang mengatakan 'Expand Template Widget'
menemukan ini

]]></b:skin>

Kemudian masukkan script di depannya

/* START
--------------------------------------------------------------------
 Awesome Automatic Content Sliders for Blogger using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
Slick Slideshow
*/
#slideshow {  margin:0 auto;  width:640px;  height:263px;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0;  position:relative; }
#slideshow #slidesContainer {  margin:0 auto;  width:560px;  height:263px;  overflow:auto; /* allow scrollbar */  position:relative; }
#slideshow #slidesContainer .slide {  margin:0 auto;  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */  height:263px; }
/**  * Slideshow controls style rules.  */
.control {  display:block;  width:39px;  height:263px;  text-indent:-10000px;  position:absolute;  cursor: pointer; }
#leftControl {  top:0;  left:0;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; }
#rightControl {  top:0;  right:0;  background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; }
.slide h2, .slide p {  margin:15px;  font:normal 11px Verdana, Geneva, sans-serif;  color:#ccc; }
.slide h2 {  font:italic 24px Georgia, "Times New Roman", Times, serif;  color:#ccc;  letter-spacing:-1px; }
.slide img {  float:right;  margin:0 15px; }
/* END
--------------------------------------------------------------------
 Awesome Automatic Content Sliders for Blogger using jQuery
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Slick Slideshow
*/


Langkah 2: Terapkan Gadget
Desain -> Klik "Tambah Gadget" -> HTML /JavaScript tipe.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
<script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-slick-slideshow.min.js"></script>
<script style="text/javascript">
	var numposts_gal = 6;
	var numchars_gal = 150;
	var caption_position = 'right'; // top,bottom,left,right -> choose one
        var random_posts = false; // random posts
</script>

<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
    </div>
  </div>
  <!-- Slideshow HTML -->
Demo

• 
• 
• 
• 
• 
• 
•