Memasang Horizontal Scrolling Twitter Feed

Kalau kita berbicara tentang mempercantik blog mungkin widget lah yang tepat untuk membantu mempercantik. Namun widgetpun berfungsi bukan hanya untuk mempercantik melainkan untuk memudahkan pengunjung untuk berinteraksi dengan si empunya blog. Nah kali ini saya akan berbicara tentang bagaimana Memasang Horizontal Scrolling Twitter Feed. Apa sih fungsi widget tersebut? Widget tersebut akan menampilkan aktifitas kita di dalam sosial media seperti Twitter dalam bentuk horizontal scroll. Jadi fungsinya agar si pengunjung atau visitor blog kita mengetahui aktifitas kita di twitter, siapa tahu aja mereka ingin berinteraksi dengan kamu melalui jejaring sosial tersebut dan apabila benar maka follower twitter kamu bertambah dan secara otomatis pengunjung blog kamu pun akan meningkat.

Lalu bagaimana dengan twitter widget yang oketrik share terdahulu? Apakah fungsi dengan widget yang satu ini berbeda? Yup kita ketahui oketrik pernah berbicara soal twitter widget sebelumnya seperti, Menambahkan twitter box widget dan memasang tombol follow. Horizontal Scrolling Twitter Feed ini tidak jauh berbeda dengan widget sebelumnya hanya saja bentuk dari widget yang membedakannya, fungsinya tetap saja sama untuk meningkatkan pengunjung dengan sosial media twitter. Trus bagaimana untuk memasang widget tersebut kedalam blog kita? nah ini dia pertanyaan yang saya tunggu - tunggu :p. untuk pemasangannya lihat ke bawah yuk.

1. Seperti biasa login ke blogger
2. Pada halaman dashboard klik tanda panah ke bawah dan pilih Template
   
   
3. Pada halaman Template, klik tombol Edit HTML, tunggu sebentar lalu klik proceed
   
   
   
4. Cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   #twitter { background: #f1f2f8;width: 553px;padding: 0 10px;overflow: hidden;-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px;}
   #twitter h5 {float: left;width: 120px;margin: 0;padding: 6px 0;font-size: 12px;color: #4b9fff;line-height: 1;}
   #twitter p, #twitter marquee, #twitter div {float: right;width: 430px;margin: 0;padding: 6px 0;line-height: 1;}
   #twitter marquee a, #twitter div a {margin: 0 10px 0 0;color: #333;text-decoration: none;}
   #twitter marquee a i, #twitter div a i {font-style: normal;color: #999;}
   
   
5. Setelah itu cari kode </head> dan pindahkan kode di bawah ini tepat di atasnya
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
   <script src='http://artistutorials.googlecode.com/files/jquery.marquee.js'/>
   <script type='text/javascript'>
   //<![CDATA[
   var Twitter = {
   init: function () {
   // Pass in the username you want to display feeds for
   this.insertLatestTweets('USERNAMETWITTER');
   },
   // This replaces the <p>Loading...</p> with the tweets
   insertLatestTweets: function (username) {
   var limit = 5; // How many feeds do you want?
   var url = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?';
   // Now ajax in the feeds from twitter.com
   $.getJSON(url, function (data) {
   // We'll start by creating a normal marquee-element for the tweets
   var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
   // Loop through all the tweets and create a link for each
   for (var i in data) {
   html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
   }
   html += '</marquee>';
   // Now replace the <p> with our <marquee>-element
   $('#twitter p').replaceWith(html);
   // The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
   Twitter.fancyMarquee();
   });
   },
   // Replaces the marquee-element with a fancy one
   fancyMarquee: function () {
   // Replace the marquee and do some fancy stuff (taken from remy sharp's website)
   $('#twitter marquee').marquee('pointer')
   .mouseover(function () {
   $(this).trigger('stop');
   })
   .mouseout(function () {
   $(this).trigger('start');
   })
   .mousemove(function (event) {
   if ($(this).data('drag') == true) {
   this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
   }
   })
   .mousedown(function (event) {
   $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
   })
   mouseup(function () {
   $(this).data('drag', false);
   });
   },
   // Takes a date and return the number of days it's been since said date
   daysAgo: function (date) {
   // TODO: Fix date for IE...
   if ($.browser.msie) {
   return '1 day ago';
   }
   var d = new Date(date).getTime();
   var n = new Date().getTime();
   var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
   var daysAgo = numDays + ' days ago';
   if (numDays == 0) {
   daysAgo = 'today';
   }
   else if (numDays == 1) {
   daysAgo = numDays + ' day ago';
   }
   return daysAgo;
   }
   };
   Twitter.init();
   //]]>
   </script>
   
   
6. Sekarang sudah selesai di halaman Edit HTML, mari kita menuju halaman layout
   
   
7. Tambahkan sebuah gadget, untuk letaknya pilih di mana saja
   
   
8. pilih HTML/javascript
   
   
9. Pindahkan kode di bawah ini kedalamnya
   
   <div id="twitter">
   <h5>Latest tweets</h5>
   <p>Loading...</p>
   <noscript>This feature requires JavaScript</noscript>
   </div>
10. setelah di pindahkan klik tombol simpan, nah sekarang pindahkan widget tersebut di tempat yang kamu inginkan misalnya di atas elemen Post.
11. setelah itu klik tombol save arrangement dan lihat hasilnya

Mudah bukan cara pemasangannya? oiya script - script di atas saya mengambil dari How to make horizontal scrolling twitter feed. Kok g muncul di blog saya? bisa di edit ga? cara merubah warnanya bagaimana? blablablabla... kirim pertanyaan kamu di kotak komentar agar mudah saya membalasnya ^_^. Terima kasih and Happy Blogging.
Demo

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg