U must b lucky: MENAMBAHKAN ANIMATED WIDGET RECENT POSTS

Sahabat blogger, pagi hari ini saya sengaja jogging jari rada subuh (biar sehat, hehehe.) keliling berkunjung ke beberapa blog sahabat yang bertebaran pada media maya ini. Jalan sana, pencet sini, klik sana [dot] com, lalu klik sini [dot] com sekalian cari ide untuk membuat tulisan mengisi posting artikel pagi ini...

Secara kebetulan pada beberapa blog sahabat yang saya kunjungi ada tampilan widget recent posts yang terus berputar (animated). Timbul keinginan untuk membuatnya, nah kesempatan ini tidak saya sia-siakan. Saya keluarkan jurus ampuh yaitu bertanya pada Mbah-Google yang pinter dan nyaris segala tahu....

Dari Mbah-Google yang baik ini menelorkan info situs-situs yang dapat membantu saya dalam "Menambahkan Animated Widget Recent Posts".

Dari situs-situs tersebut (Terutama http://teknikbuatblog.blogspot.com/) saya belajar (walau cuma memasukkan kode script) dan Alhamdulillah berhasil (lihat hasilnya di sini.)

Memang bahasan ini bukan barang baru sudah banyak yang membahasnya (sudah basi yah...), tapi saya akan tetap ingin berbagi dengan sahabat blogger (kalo ada yang mau menghiasi blognya dengan widget ini dan kebetulan mampir pada Blog ku.)

Nah ini caranya pasangnya :

1. Login ke akun kamu di blogger.com.
2. Pada dashboard klik Rancangan atau Design lalu klik Page Element atau Elemen Laman.
3. Dari situ pilih add a Gadget lalu pilih lagi HTML / JavaScript.
4. Kemudian masukkan kode script berikut ini :
   
   <center>
   <script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
   <style type="text/css" media="screen">
   <!--
   
   #spylist {
   overflow:hidden;
   margin-top:5px;
   padding:0px 0px;
   height:350px;
   }
   
   #spylist ul{
   width:220px;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:208px;
   padding: 5px 5px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8qnB6y1ofwDHsuU1r_NeyFPd9GWjnt_xTgp3rriCQFliPKu9FzzL-u0fSu5uSIC32vySzphFWWdlNTCSOrIroByrxvjyrPkvIAVpVef7NBQwbVQsKdtWWIgfls7XMT-z0cDt2zt-xS0/s1600/teknikbuatblogblogspot-com.jpg) repeat-x;
   border:1px solid #ddd;
   }
   #spylist li a {
   text-decoration:none;
   color:#4B545B;
   font-size:11px;
   height:18px;
   overflow:hidden;
   margin:0px 0px;
   padding:0px 0px 2px 0px;
   }
   #spylist li img {
   float:left;
   margin-right:5px;
   background:#A9A9F5;
   border:0;
   }
   .spydate{
   overflow:hidden;
   font-size:10px;
   color:#0284C2;
   padding:2px 0px;
   margin:1px 0px 0px 0px;
   height:15px;
   font-family:Tahoma,Arial,verdana, sans-serif;
   }
   .spycomment{
   overflow:hidden;
   font-family:Tahoma,Arial,verdana, sans-serif;
   font-size:10px;
   color:#262B2F;
   padding:0px 0px;
   margin:0px 0px;
   }
   -->
   </style>
   <script language='javascript'>
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVPkh4h6znDNhtSAMYSttpAZV48rFWQoaxVHkMLrHrsON9s7YrOq1mohTuz9veh95GhILDxvNnYH26j5_8KIAg3jeeS8xJcgdryTRVzGtOyPcN3UKxC8_RjjQVeUpOwKqUDfqppX6MDY/s1600/no_image+.gif";
   imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVPkh4h6znDNhtSAMYSttpAZV48rFWQoaxVHkMLrHrsON9s7YrOq1mohTuz9veh95GhILDxvNnYH26j5_8KIAg3jeeS8xJcgdryTRVzGtOyPcN3UKxC8_RjjQVeUpOwKqUDfqppX6MDY/s1600/no_image+.gif";
   imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVPkh4h6znDNhtSAMYSttpAZV48rFWQoaxVHkMLrHrsON9s7YrOq1mohTuz9veh95GhILDxvNnYH26j5_8KIAg3jeeS8xJcgdryTRVzGtOyPcN3UKxC8_RjjQVeUpOwKqUDfqppX6MDY/s1600/no_image+.gif";
   imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVPkh4h6znDNhtSAMYSttpAZV48rFWQoaxVHkMLrHrsON9s7YrOq1mohTuz9veh95GhILDxvNnYH26j5_8KIAg3jeeS8xJcgdryTRVzGtOyPcN3UKxC8_RjjQVeUpOwKqUDfqppX6MDY/s1600/no_image+.gif";
   imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVPkh4h6znDNhtSAMYSttpAZV48rFWQoaxVHkMLrHrsON9s7YrOq1mohTuz9veh95GhILDxvNnYH26j5_8KIAg3jeeS8xJcgdryTRVzGtOyPcN3UKxC8_RjjQVeUpOwKqUDfqppX6MDY/s1600/no_image+.gif";
   showRandomImg = true;
   boxwidth = 255;
   cellspacing = 6;
   borderColor = "#232c35";
   bgTD = "#000000";
   thumbwidth = 70;
   thumbheight = 70;
   fntsize = 12;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = true;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 10;
   home_page = "http://umustlucky.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>
   <div id="spylist">
   <script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
   </div><a href="http://umustlucky.blogspot.com/2011/06/menambahkan-animated-widget-recent.html">
   <font size="1">get this widget</font></a></center>
   
   
   
   ke dalam kotak HTML / JavaScript tadi. Dan jangan lupa mengisi judulnya (title) yah.
   Jangan lupa pula untuk kode script yang diberi warna hijau ganti dengan alamat blog kita.
   

5. Sesuaikan lebar widget dengan kondisi blog kita, lalu simpan dan selesai.
   

Nah sobat gampang kan.. cara menambahkan animated widget recent posts pada blog kita. Semoga apa yang disampaikan di atas dapat bermanfaat buat sahabat blogger semua.

Maaf jika masih banyak kekurangan dalam penulisan artikel ini, namanya juga pemula / rookie yang mencoba senam otak dan joging jari dengan ilmu alakadarnya.

[Sumber inspirasi tulisan dari http://teknikbuatblog.blogspot.com/]

by