Cara Membuat Artikel Terbaru Auto Slide Di Sidebar Blog

Berikut ini akan diuraikan langkah-langkah cara membuat (  Artikel Terbaru Auto Slide Di Sidebar Blog  ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : (  Artikel Terbaru Auto Slide Di Sidebar Blog  ) sebagai berikut :

1. Login ke akun blogger
2. Klik tema
3. Edit html

Masukan CSS di bawah 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>

Masukan Kode HTML / Javascript di bawah 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() {}
    }};

Dan Kode Javascript di bawah ini tepat di atas </head>

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

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah

simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,

dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Artikel Terbaru Auto Slide Di Sidebar Blog ) semoga bermanfaat terima kasih.