Cara Membuat Slider Post di Blog

Tips!

Slider Post Otomatis, yang akan menayangkan setiap artikel baru.

IlmuKomputer95.co.cc-Bismillah"

Pada Kali ini saya akan berbagi Cara membuat Slider Post Otomatis di Blog.

Untuk Melihat Contohnya atau Demo Silahkan Klik Link Berikut Ini.

Langsung Saja.

Pertama-tama,

1. Yang Tentunya Buka Akun Blog anda.
2. Setelah masuk, Sekarang pilih Rancangan (Edit Tata Letak)
3. Kemudian Pilih Edit HTML.

Contoh Antarmuka Blogger terbaru.

Contoh Antar Muka Blogger Lawas.

4. Carilah Code : ]]></b:skin> (agar cepat ketemu Cari menggunakan Pencarian Cepat, Tekan CTRL+F dan masukkan Code ]]></b:skin>)

5. Setelah Ketemu Masukkan/Copy-Paste Code dibawah Ini diatas ]]></b:skin>

/* START<br /> --------------------------------------------------------------------<br /> www.ilmukomputer95.co.cc<br /> --------------------------------------------------------------------<br /> Featured Content Slider<br /> */<br /> #slider-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;font-size: 10px; background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png) top center; }<br /> .slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }<br /> .stripViewer .panelContainer<br /> .panel ul{ text-align: left; margin: 0 15px 0 30px; }<br /> .stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }<br /> .stripViewer .panelContainer{ position: relative; left: 0; top: 0; }<br /> .stripViewer .panelContainer .panel    { float: left; height: 100%; position: relative; width: 419px; }<br /> .stripNavL, .stripNavR, .stripNav{ display: none; }<br /> .nav-thumb { border: 1px solid black; margin-right: 5px; }<br /> #movers-row    { margin: -46px 0 0 62px; }<br /> #movers-row div    { width: 20%; float: left; }<br /> #movers-row div a.cross-link { float: right; }<br /> .photo-meta-data{ background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png); padding: 10px; height: 40px; margin-top: -50px; position: relative; z-index: 9999; color: white; }<br /> .photo-meta-data span { font-size: 13px; }<br /> .cross-link    { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }<br /> .active-thumb { background: transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png) top center no-repeat; }<br /> /* END<br /> --------------------------------------------------------------------<br /> www.ilmukomputer95.co.cc<br /> --------------------------------------------------------------------<br /> Featured Content Slider<br /> */<br />

Contoh :

6. Setelah Itu Cari lagi Code : </body>
dan letakkan Code dibawah diatas/Sebelum : </body>

<br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script><br />  <script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/FeaturedContentSlider.pack.js"></script><br />  <script type="text/javascript">  var theInt = null;  var $crosslink, $navthumb;  var curclicked = 0;  theInterval = function(cur){  clearInterval(theInt);  if( typeof cur != 'undefined' )  curclicked = cur;  $crosslink.removeClass("active-thumb");  $navthumb.eq(curclicked).parent().addClass("active-thumb");  $(".stripNav ul li a").eq(curclicked).trigger('click');  theInt = setInterval(function(){  $crosslink.removeClass("active-thumb");  $navthumb.eq(curclicked).parent().addClass("active-thumb");  $(".stripNav ul li a").eq(curclicked).trigger('click');  curclicked++;  if( 6 == curclicked )  curclicked = 0;  }, 3000);  };  $(function(){  $("#main-photo-slider").codaSlider();  $navthumb = $(".nav-thumb");  $crosslink = $(".cross-link");  $navthumb  .click(function() {  var $this = $(this);  theInterval($this.parent().attr('href').slice(1) - 1);  return false;  });  theInterval();  });  </script><br />

7. Setelah itu, Simpan Template, dan kembali ke bagian Tata Letak

8. Klik Tambah Gadget > HTML/Java Script > dan Paste Code ini pada Kotak yang tersedia

ILMU KOMPUTER 95

var numposts_gal = 6; //recommended

var numchars_gal = 150;

var random_posts = false; // random posts

</script>

</div>

KETERANGAN :
Angka 6 Berwarna Merah adalah Jumlah Postingan Terbaru yang akan Tampil.
Angka 150 Berwarna Merah diatas adalah Besar Slider nanti.

Setelah itu Klik Save/Simpan.

Gambar Cara menambahkan Gadgget.