Membuat Artikel Terbaru Auto Slide Di Sidebar Blog

Membuat Artikel Terbaru Auto Slide Di Sidebar Blog - Tidak jauh berbeda dengan tampilan popular post pada umumnya yang terdapat pada halaman sidebar blog. Di sana akan terdapat 10 daftar artikel terbaru yang telah Anda publikasikan dengan menampilkan judul-judul artikel blog Anda, dengan mengkombinasikan sedikit sentuhan efek slide, artikel terbaru ini akan menghias tampilan halaman sidebar blog Anda menjadi lebih keren dan menarik yang tampak kurang lebih seperti gambar berikut:

Cara Membuat Tampilan Popular Post Dengan Slideshow sebelumnya, Anda dapat melihat penggunaan kode script yang sama, namun tampilannya saya buat untuk widget halaman beranda. Karena lebar halaman beranda/home tidak sama dengan sidebar, maka untuk tampilan artikel terbaru kali ini, saya mengubah struktur letak kodenya agar sesuai dengan lebar halaman sidebar blog Anda dengan script seperti ini:

<script type="text/javascript">
var tinycarousel_config = {
    nav: {
        //tombol berikutnya dan selanjutnya
        prevText: 'Prev',
        nextText: 'Next'
    },
    carousel: {
        axis: "y", //bentuk tampilan
        itemwidth: 200, //lebar widget
        itemheight: 370, //tinggi widget
        itemmargin: 10, //jarak sisi (left,top,bottom,right)
        itempadding:5, //jarak isi widget
        visible: 1,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000, //waktu slide
        animation: true,
        duration: 1000, //kecepatan slide
        easing: "swing",
        //kembali ke awal jika sudah menampilkan artikel terakhir
        callback: function() {}
    }
};

DEMO SHOW



Untuk mendukung hasil performa yang lebih menarik, Anda bisa gunakan CSS berikut untuk membuat bentuk desain tempilan artikel terbaru Anda dengan kode perintah seperti ini:

<style type="text/css">
.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;margin:0 auto;}

.tinycarousel-viewport {
  overflow:hidden;position:relative;
  background-color:#333;border:1px solid #ccc;
  margin:0 auto;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;}

.tinycarousel-overview {
  list-style:none;margin:0;padding:0;
  position:absolute;left:0;top:0;}

.tinycarousel-overview li {
  list-style:none;float:left;padding:0;
  background:#fff;height:auto;color:#666;}

.tinycarousel-inner {
  padding:10px;border:1px solid #080;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;overflow:hidden;position:relative;}

li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;width:100%;height:auto;
  border:none;outline:none;
  margin:0;padding:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;}

.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;margin:0 0 6px;
  padding:10px 0 3px;background:none;
  border-bottom:3px double orange;text-align:center;}
</style>

CATATAN
Perlu di ketahui, untuk Membuat Artikel Terbaru Auto Slide Di Sidebar Blog seperti ini, pastikan template Anda sudah dilengkapi dengan script-jQuery. Jika belum, Silahkan Copy jQuery ini, lalu letakkan diatas tag penutup </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>