Tweet Box Twitter

Keren...Keren...Keren... neeh satu lagi widget twitter yang sudah dimodifikasi sehingga terlihat lebih keren, unik dan dinamis. Oke widget twitter ini saya beri nama Tweet Box Twitter. Pada dasarnya widget ini menggunakan JavaScript API Twitter Post Fetcher v15.1 untuk memperoleh data tweet kemudian sedikit modifikasi agar tampilan burung twitter seolah-olah bisa berkicau yang diilustrasikan dengan balon kata yang ada diatas gambar burung twitter. Widget ini juga bisa dijadikan feed dari suatu blog ataupun website yang terhubung ke twitter. Untuk illustrasi dan contoh bisa dilihat di bawah ini. Wahhh saya sudah mulai kehabisan kata-kata neeh, okelah biar cepat aja kita langsung ke TKP (Tempat Kopi Paste).


Sebelum sobat blogger mencoba widget ini ada baiknya membuat backup template blog sobat terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.

• Login ke blog sobat.
• Copy-Paste kode di bawah ini.
  
  <script src="http://sites.google.com/site/monosbit/Twitter_Post_Fetcher_v151.js"></script>
  <div align="center">
  <div id="spylist">Loading...</div>
  <div style="margin-top:0px;position: relative;border-width: 15px 15px 0;border-style: solid;border-color: #ddd transparent;display: block;width:0px;"></div>
  <a href="http://www.twitter.com/monosbit" target="_blank" style="padding-left:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHiVbibqc7JtPKT6wmrLPBw20aqhBYAn2aYM-n_WizhQX3JxhbXD67YwXFsaI9WX-VERqGnWGjwO6zV0qOL7RgC3Wpi-_yuNAIgkMw8CqlVhSx9HST_3J1a04FrRDKI_8gcRAWHkl0NiEn/s800/twitter_mexico.png" title="Follow Me"/></a>
  </div>
  
  <script>
  var outhTwit='735779479444815874';
  var heightTwitStyle=165;
  var widthTwitStyle=250;
  var heightTwitItem=150;
  var contentTwit=5;
  var speedTwit = 4000;
  </script>
  
  <script>
  /*http://monosbit.blogspot.com visit us to see more updates for this widget*/
  var listTwitHtml;
  var twitStyle='<style type="text/css" media="screen">#spylist{width: '+widthTwitStyle+'px;height:'+heightTwitStyle+'px;margin:0;font-family:Arial;font-size:12px;text-align:left;overflow: hidden;border-radius:8px 8px 0 0;border:1px #ccc solid;box-sizing:border-box;}#spylist ul{margin:0;padding:0;overflow: hidden;list-style-type: none;}#spylist li{margin:0;padding:10px;border-width:0;background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKoy5XQGHRaZB9bkNLPfySMsO8N2GmpLDAvCBX8rD7cz7zmk_xWo1vjbDpnuNjr70t_J5JlRs8xBpuyX5XDVFNierqq_3fh7kuqz5Eesp01HXbSPKgCSQnCRMxeB8j6_ZYGzb5qSRVTs00/s1600/bdlab-blogspot-com.jpg) repeat-x;height:'+heightTwitStyle+'px;overflow:hidden;box-sizing:border-box;}#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:#EFEFEF;border:0;border-radius:4px;width:24px}</style>';
  var appTwitCredit='<div align="left" style="margin-top:-15px;font-style:Verdana;font-size:9px;color:#000;"># <a href="http://monosbit.blogspot.com" target="blank" style="text-decoration:none;color:#000;">MonosBit</a> #</div>';
  var configTwit={"id":outhTwit,"domId":'',"maxTweets":contentTwit+1,"enableLinks":true,"showUser":true,"showTime":true,"dateFunction":'',"showRetweet":false,"customCallback":animatedTweet,"showInteraction":false};
  $('body').append(twitStyle);
  function animatedTweet(tweets){listTwitHtml='<ul class="spy">';for(var n=0;n < tweets.length;n++){listTwitHtml +='<li style="text-align:left;">'+tweets[n]+appTwitCredit+'</li>';}listTwitHtml +='</ul>';$("#spylist").html(listTwitHtml);}
  twitterFetcher.fetch(configTwit);
  function rpnewsticker() {
  last = $('ul.spy li:last').hide().remove();
  $('ul.spy').prepend(last);
  $('ul.spy li:first').slideDown("slow");}
  $(document).ready(function() {
  rpnewsticker();
  interval = setInterval(rpnewsticker, speedTwit);});
  </script>
• Untuk penempatan widget silakan anda sesuaikan dengan template sobat, bisa sebagai gadget atau bisa juga sebagai widget di halaman blog.
• Jika anda ingin widget ini muncul di halaman depan blog saja silakan anda baca artikel saya mengenai Jenis dan Fungsi Kode Untuk Mengatur Tampilan Widget BlogSpot. Trik yang satu ini sobat blogger membutuhkan pengetahuan tambahan mengenai kode HTML.
• Ganti kode "id": '735779479444815874' twitter yang berwarna merah pada kode di atas dengan kode id twitter sobat.
  
  Cara mengetahui Kode Widget Twitter :
  - Login ke akun twitter.
  
  - Klik gambar profil kecil yang ada di pojok kanan atas, klik setting kemudian pilih widget pada menu sebelah kiri. Jika belum ada widget twitter klik "Create New" >> klik "Create Widget" >> Klik "Save Changes" >> Sekarang lihat di adressbar browser diatas yang ada tulisan seperti :
  
  https://twitter.com/settings/widgets/735779479444815874/edit?notice=WIDGET_UPDATED.
  
  - Gunakan angka yang terdapat pada teks adress bar browser sobat dan gunakan angka tersebut sebagai kode angka widget twitter sobat.


• Klik "Save" dan lihat hasilnya.

.:Selamat Mencoba:.