Membuat Widget Recent Post Slider

Dalam tempo 2 tahun terakhir ini, saya rasa kualitas artikel blog dengan berplatform blogspot semakin menurun drastis. Sebenarnya bukan menurun kualitasnya, tetapi posisi di search engine. Kebanyakan hasil dari mesin pencari yaitu blog yang berplatform Wordpress dan parahnya lagi blog itu adalah blog AGC ( baca : Blog Auto Generate Content ). Seandainya saya itu pemilik Google, sudah saya musnahkan tuh semua blog AGC dari hasil search Google.

Nah, dari pada bahas blog AGC yang nggak jelas mending kita coba buat artikel yang bisa nandingin blog AGC di SE. Pada tutorial kali ini, saya akan memberikan sedikit tutorial Cara Membuat Widget Recent Post dengan Slider di blogspot. Karena widget Recent Post merupakan salah satu widget yang sangat penting pada suatu blog (baca : Widget Penting Yang Harus Dimiliki Sebuah Blog), maka saya sangat menyarankan anda untuk memasangnya di blog anda. Untuk membuatnya cukup simple, ikuti langkah-langkahnya di bawah ini :

1. Login ke blogspot
2. Buka Tab Rancangan » Tata Letak / Elemen Halaman
3. Click Tambah Gadget
4. Kemudian pilih HTML/JavaScript
5. Masukkan 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:blue;}
   #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;color:blue;}
   #rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
   #rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
   </style>
   <script type="text/javascript" src="hhttp://the-killermedia.googlecode.com/files/rpplusimgnt-v1.js.txt"></script>
   <script type="text/javascript">
   var speed = 800;
   var pause = 2500;
   $(document).ready(function(){
   rpnewsticker();
   interval = setInterval(rpnewsticker, pause);
   });
   </script>
   <ul id="rp_plus_img">
   <script style="text/javascript">
   var numposts = 10;
   var numchars = 50;
   </script>
   <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

6. Kemudian, click Simpan.

Setelah ke 5 point di atas selesai, ikuti langkah-langkah berikutnya di bawah ini :

1. Login ke blogspot
2. Buka Tab Rancangan » Edit HTML
3. Tekan Ctrl + F dan tulis ]]></b:skin>
4. Kemudian letakkan kode di bawah ini di bawah ]]></b:skin> :
   
   

   <script>
   function split_date(d){
   var da = d.split(&#39; &#39;);
   day = &quot;<strong class='day'>&quot;+da[0]+&quot;</strong>&quot;;
   month = &quot;<strong class='month'>&quot;+da[1].slice(0,3)+&quot;</strong>&quot;;
   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'/>
   <!-- End Jquery library -->
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Setelah itu, click simpan.

Semoga tutorial kali ini bisa bermanfaat!!

Tutorial Blogspot

• Cara Menampilkan Update Artikel Blog atau Website ke Twitter dan Facebook
• Cara Membuat Daftar Isi Blog
• Membuat Widget Recent Post dengan Gambar
• Cara Membuat Stripe-Ad di Blogspot
• Tips SEO ( Search Engine Optimization) Lengkap
• Cara Membuat Widget Sharing is Sexy
• Cara Memodifikasi Tampilan Facebook Fans Page
• Cara Membuat Widget Related Post / Artikel Terkait di Sidebar
• Cara Mengganti Template di Blogspot
• Memodifikasi Tampilan Template "Bloggerpedia 007 Style Template"
• Cara Mendaftarkan Blog di Ask.Com

Tutorial Blog

• Cara Menampilkan Update Artikel Blog atau Website ke Twitter dan Facebook
• Cara Membuat Daftar Isi Blog
• Membuat Widget Recent Post dengan Gambar
• Cara Membuat Stripe-Ad di Blogspot
• Cara Melakukan Review Blog di Alexa
• Tips SEO ( Search Engine Optimization) Lengkap
• Cara Membuat Widget Sharing is Sexy
• Cara Memodifikasi Tampilan Facebook Fans Page
• Cara Membuat Widget Related Post / Artikel Terkait di Sidebar
• Cara Mengganti Template di Blogspot
• Memodifikasi Tampilan Template "Bloggerpedia 007 Style Template"
• Tata Cara Tukeran Link di Blog Ini
• Cara Mendaftarkan Blog di Ask.Com

Posting yang berjudul Membuat Widget Recent Post Slider ini Diposting oleh Coba Coba pada 5/15/2011 10:11:00 PM
Label: Tutorial Blog, Tutorial Blogspot
Jangan lupa berikan komentar anda pada artikel yang berjudul Membuat Widget Recent Post Slider ini :DD