Membuat Artikel Terbaru Blog Bergaya Slide

Nah ini dia yang di tunggu-tunggu..

Bukan cewek bahenol...bukan pula biduan yang lincah atau pun tetangga sebelah yang aduhai he he ( red : just kidding ) gitu aja serius amat seh..!! hihi...widget cantik kayak gambar di atas tuh yang mau hadir di blog kita penasaran kayak apa? yuk kita simak penjelasan nya di bawah ini.

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 DI BAWAH 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/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;
} .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/albums/m596/abu-farhan/slick-bg_slideshow.jpg
  @ gambar latar kotak.
• http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg
  @gambar panah sebelah kiri.
• http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg
  @ 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 id="leftControl">Clicking moves left</span>')
    .append('<span 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://andiweb3.wordpress.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.

wuih ..akhir nya selesai...

Capek juga rasa nya jari-jari ini menari terus di keyboard...semoga dengan tahapan -tahapan yang kita jalani bisa membuah kan hasil maka tambah satu lagi artikel yang dapat mempercantik blog kita dan ceritakan pengalaman-pengalaman sobat setelah memakai widget ini ya serta jika ada kesulitan silahkan tumpahkan cendol nya di kotak komentar ya...

Sumber

Posted in: Blog,blogspot,Tips dan Trik