Didan Cakep

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) {
                        // Well 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 well use Remy Sharps 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 sharps 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 its 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 ^^