Add Horizontal Scrolling Twitter Feed In Blogger

There are many widgets which display the twitter feeds on blog or site. Most of them are displayed in a vertical manner in the sidebar.This tutorial will show you How To Create A Horizontal Scrolling Twitter Feed Using jQuery.

Scrolling Twitter Feed Demo

LIVE DEMO

How To Make A Horizontal Scrolling Twitter Feed

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the Code Shown Below just above/before it

#twitter {
                background: #f1f2f8;

                width: 600px; /* Up to you but remember to change the div width below as well if you change it */
                padding: 0 10px;

                overflow: hidden; /* clearfix */

                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -o-border-radius: 5px;
                -ms-border-radius: 5px;
                border-radius: 5px;
            }

                #twitter h2 {
                    float: left; /* We'll make the heading sit on its own line next to the tweets */
                    width: 85px; /* Might wanna change this depending on the text in the heading */
                    margin: 0;
                    padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */

                    font-size: 12px;
                    color: #4b9fff;
                    line-height: 1;
                }

                /* The marquee plug-in turns a marquee element into a div */
                #twitter p,
                #twitter marquee,
                #twitter div {
                    float: right;
                    width: 505px; /* Container width - heading width - 10px (for some right padding) */
                    margin: 0;
                    padding: 6px 0; /* Again we set the padding in here so as not to cut text */
                    line-height: 1;
                }

                    /* All the tweets will be links pointing to your page on twitter */
                    #twitter marquee a,
                    #twitter div a {
                        margin: 0 10px 0 0;
                        color: #333;
                        text-decoration: none;
                    }

                        /* The i is used to display the date of the tweet */
                        #twitter marquee a i,
                        #twitter div a i {
                            font-style: normal;
                            color: #999;
                        }  

• Now Find the code shown below using [ctrl+F]

</head>

• Now Paste the Code Shown Below just above/before it

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

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

• Now save your template

• Now Go to Blogger Dashboard --> Layout --> Add A Gadget --> HTML/JAVASCRIPT
• Now paste the code shown below inside it

<div id="twitter">
                        <h2>Latest tweets</h2>
             <p>Loading...</p>

            <noscript>This feature requires JavaScript</noscript>

        </div>

Customization

• Replace latesthack with your twitter username
• var limit    = 5 shows the number of feeds you want to display
• Dont add this <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> if your template already contain this script

Like it? Share it.