Slide Cantik Buat Blog

 Slide Cantik Buat Blog



Widget ini boleh di bilang Content slide yang mana setiap artikel atau postingan yang terupdate akan otomatis tampil dengan tampilan nya secara slide...untuk ukuran widget ini lumayan lah sekitar 5 kb dan untuk waktu loading nya tidak terlalu berat kok kecuali jika kita mengatur update artikel yang tampil pada widget ini lebih dari 10 artikel terupdate  mungkin akan butuh waktu yang lama untuk loading nya..
nah bagi sobat-sobat yang berminat dengan content slide ini cara nya mudah kok tinggal ambil obeng,tang,paku, martil dll he he eh salah..maksud ku silahkan simak cara-cara nya di bawah ini..

1.Silahkan Login terlebih dahulu.

2. Lalu klik Templete lalu klik Edit templete dan centang Expand Widget Templates yang terlihat seperti gambar di bawah ini.
3.Cari kode dibawah ini ..!!! cara cepat nya tekan (Ctr + F pada keyboard) 

]]></b:skin>
 
Setelah ketemu silahkan copy kode di bawah ini di atas tag ]]></b:skin>
 
/* 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/arkastyle/

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/arkastyle/slick-control_left.jpg)

no-repeat 0 0; }
#rightControl { top:0; right:0; background:transparent

url(http://i1133.photobucket.com/albums/m596/arkastyle/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
*/


 
 
4. Simpan Templete



catatan : 

Sebelum kita melangkah lebih lanjut kode di atas bisa kita modifikasi warna ,background dan ukuran nya,tulisan yang saya beri warna merah saya akan jeaskan satu persatu yang di mulai dari atas :
  • width:640px; height:263px;@ ukuran tinggi dan lebar kotak nya.
  • background:transparent @ Warna latar kotak
  • http://i1133.photobucket.com/gambar latar kotak.jpg @ gambar latar kotak.
  • http://i1133.photobucket.com/gambarpanahsebelah.jpg@gambar panah sebelah kiri.
  • http://i1133.photobucket.com/gambarpanahsebelahkanan@ gambar panah sebelah kanan.
  • color:#ccc; @ warna tulisan artikel nya.
Oke gitu aja ya anda bisa mengganti warna mau pun background nya..mari kita lanjut kan kembali...


5. setelah itu anda segera klik layout terus klik tambahkan Gadget dan klik HTML /Java Script seperti yang terlihat pada gambar di bawah ini
 
dan anda Copy paste kode di bawah ini
 
<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://accordion-template.googlecode.com/svn/
trunk/galleryposts-slick-slideshow-min.js"></script>
<script style="text/javascript">
 var numposts_gal = 10;
 var numchars_gal = 150;
 var caption_position = 'right'; // top,bottom,left,right -> 
choose one
</script>

<script src="http://arkastyle.blogspot.com/feeds/posts/default?orderby=
published&alt=json-in-script&callback=showgalleryposts"></script>
    </div>
  </div>
  <!-- Slideshow HTML -->
 
 
Catatan : 
  • Tulisan berwarna merah anda ganti dengan URL blog sobat.
  • Var numposts_gal = 10; angka ini untuk menampilkan berapa artikel yang ingin sobat tampilkan bisa 12,15,18 dll.
  • widget ini bisa anda letakan dimana aja..bisa di sebelah kanan sidebar,atas,bawah,dll yang penting jangan di letakin di loteng aja ya he he ( red ; bercanda )

6. Simpan dan lihat hasil nya.
 
 

0 komentar:

Posting Komentar

RecentPost

 

© Copyright Efecft Downs – Download Grátis.
Design by | Arka Ramadhan Al-Ghozy
Adicionar aos Favoritos