Pasang Twitter Feed Update diBlog

Baiklah Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :

#UTtwitter {
background:#111;
width:98%;
padding:0 7px;
overflow:hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#UTtwitter h5 {
float:left;
width:82px;font-family:shaun the sheep;
margin:0;
padding:7px 0;
font-size:15px;
color:red;border-right:3px solid #444;
line-height: 1;
}
#UTtwitter p, #UTtwitter marquee, #UTtwitter div {
float: left;
width:85%;
margin: 0;
padding:7px 0;
line-height: 1;
}
#UTtwitter marquee a, #UTtwitter div a {
margin: 0 10px 0 0;font-size:13px;
color:#999;font-family:century gothic;
text-decoration: none;
}
#UTtwitter marquee a i, #UTtwitter div a i {
font-style: normal;
color: #4b9fff;
}

4. Selanjutnya letakkan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
<script type='text/javascript'>
      //<![CDATA[
            var Twitter = {
                init: function () {
                    // Pass in the username you want to display feeds for
            this.insertLatestTweets('uttakracker15');
                },

                // 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
                        $('#UTtwitter 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)
                    $('#UTtwitter 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>

5. Selanjutnya letakkan kode berikut pada bagian tambah Gadget HTML/JAVASCRIPT

<div id="UTtwitter">

                        <h5>Latest tweets</h5>
             <p><blink>Loading...</blink></p>

            <noscript>This feature requires JavaScript</noscript>

        </div>

6. Simpan template. Dan berhasil.

KET::>>
- Teks yang utta beri warna hijau adlah script nya, jika sobat sudah memasang, maka kode yang berwarna hijau diatas didak usah lagi (biar gak double).

- Sedangkan Teks yang berwarna merah (uttakracker15) itu adalah nama twitter saya, sobat rubah dengan nama twitter sobat sendiri.

Selesai deh tutorialnya .Trims ^^ Please rate this article: