Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Selasa, 27 September 2011

Memasang Horizontal Scrolling Twitter Feed

Kategori :
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 followHorizontal 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 Arrow Button dan pilih Template
    Dashboard
  3. Pada halaman Template, klik tombol Edit HTML, tunggu sebentar lalu klik proceed
    Edit HTML
  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;}

    bskin
  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>

    head
  6. Sekarang sudah selesai di halaman Edit HTML, mari kita menuju halaman layout
    layout
  7. Tambahkan sebuah gadget, untuk letaknya pilih di mana saja
    Add Gadget
  8. pilih HTML/javascript
    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

6 Komentar untuk Memasang Horizontal Scrolling Twitter Feed

thanks infonya sangat berguna buat newbie spt sya

oke bngt postingnya mas....


salam kenal!!

Demonya nggak jalan

Boleh dicoba nie triknya. Terima kasih share'y masbro.....

itu kan ada USERNAME TWITTER nah itu nama username twitter kita bukan?