Cara Membuat Widget Recent Post Dengan Slider

Cara Membuat Widget Recent Post Dengan Slider. kalau kemarin saya sudah menerangkan kepada sobat semua tentang cara membuat artikel terbaru menggunakan fungsi scrolling, nah pada kali ini saya akan menerangkan cara membuat recent post bergaya jquery yakni memanfaatkan animasi slider. dengan widget slider ini, artikel yang terlihat akan menarik perhatian pengunjung untuk membacanya. hasil dari slider ini sendiri akan nampak terlihat seperti gambar di bawah ini.

nah, sudah pada tahukan jadinya seperti apa? bagus atau tidak? yang pasti bagus ya.... oh iya, ada 1 kelemahan dari widget ini sama seperti widget lainnya yaitu loading blog akan semakin lemot. tetapi jika keindahannya akan terlihat seperti gambar di atas, loading blog akan lemot sedikit tidak apa-apa ya....

Pertama :

• login ke blogger
• klik rancangan
• pilih HTML
• jangan lupa centang expand widget ya...
• Cari kode ]]></b:skin>
• kemudian COPAS kode di bawah ini di atas kode tadi  

• <script>

  
  

  function split_date(d){

  var da = d.split(' ');

  day = "<strong class='day'>"+da[0]+"</strong>";

  month = "<strong class='month'>"+da[1].slice(0,3)+"</strong>";

  document.write(day+month);

  }

  </script>

  <link href='http://www.blogger.com/static/v1/widgets/119427095-widget_css_bundle.css' rel='stylesheet' type='text/css'/>

  <!-- Jquery library -->

  <script src='http://www.google.com/jsapi?autoload=%7B%22modules%22+%3A+%5B%7B%22name%22+%3A+%22jquery%22%2C%22version%22+%3A+%221.4.2%22%7D%5D%7D' type='text/javascript'></script>

  <!-- End Jquery library -->

  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

• sesudah itu klik simpan template

Kedua  :

• kalau tadikan HTML, sekarang ke elemen laman
• kemudian klik tambah gadget
• pilih Javascript/HTML
• COPAS Kode di bawah ini

• <style type="text/css">
  #rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;}
  #rp_plus_img ul{list-style-type:none;margin:0;padding:0}
  #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
  #rp_plus_img li{height:60px;padding:5px;list-style:none;}
  #rp_plus_img a{color:#FFF;}
  #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
  #rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
  #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
  </style>
  <script type="text/javascript" src="http://sodiycxacun.googlecode.com/files/rpplusimgnt-v1.js"></script>
  <script type="text/javascript">
  var speed = 400;
  var pause = 2500;
  $(document).ready(function(){
  rpnewsticker();
  interval = setInterval(rpnewsticker, pause);
  });
  </script>
  <ul id="rp_plus_img">
  <script style="text/javascript">
  var numposts = 10;

• tinggal di simpan deh. mudahkan...

semoga Cara Membuat Widget Recent Post Dengan Slider bisa bermanfaat