Headline

Buat sobat blogger yang menjumpai komentar kasar dan mengatasnamakan OzieCyber, silahkan baca dan laporkan disini.
Unduh Adobe Flash player

close

~Affiliates~

 

Bantu saya vote +1 pada tombol google plus di bawah!!

×

flang counter

free counters

Cara buat Latest tweets di Blog

ini adalah trick untuk memasang feed twitter kita agar ada atau terlihat di blog kita.
 Baiklah Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :

   
 Caranya : 

  • Login blogger     
  • Rancangan,Edit Html, Cari kode ]]></b:skin>     
  • Dan Simpan kode berikut diatasnya :
#LottTWT {
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;
}
#LottTWT 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;
}
#LottTWT p, #LottTWT marquee, #LottTWT div {
float: left;
width:75%;
margin: 0;
padding:7px 0;
line-height: 1;
}
#LottTWT marquee a, #LottTWT div a {
margin: 0 10px 0 0;font-size:13px;
color:#999;font-family:century gothic;
text-decoration: none;
}
#LottTWT marquee a i, #LottTWT 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('LutfieLott');
                },

                // 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
                        $('#LottTWT 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)
                    $('#LottTWT 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="LottTWT">

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

            <noscript>This feature requires JavaScript</noscript>

        </div>

6. Simpan template. Dan berhasil.

NB:
- Teks 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 (OzieCyber) itu adalah nama twitter saya, sobat rubah dengan nama twitter sobat sendiri.xD

Related Post :

Comments
0 Comments


0 komentar:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q:

Berikan Tanggapan mengenai Artikel Di Atas :

Berkomentar Lah Dengan Sopan :

=> Hahahaha ...xD
=> Blog Ini bebas Mau Berkata Apa Asal Sopan ...Azzzz
=> #Peace ALL

Terima Kasih Sudah Berkomentar .. !!

-----
pin 284A465C Gunakan Browser Google Chrome Versi Terbaru, Agar Tampilan Blog Ini Maksimal.