Latest Articles
Loading...
16 Oct 2011

Twitter, a famous Social Networking  site also marks way of promoting your page links  through Twitter Resources like Follow Button,Tweet Button,Twitter icons/logos and Twitter Widgets. Using these inbuilt codes in Twitter, you can customize them to your needs if you have a Twitter account.
scrolling twitter feed
Scrolling Twitter Feed

How to add a horizontal scroll for Twitter Tweets?

Backup your templates in case you need them

1. Login Blogger and got to your dashboard-> Design-> Edit HTML

2. Using "Ctrl+F", search for </b:skin> by expanding the html codes . Before it place the below ajax codes


/* The container for the module */
   #twitter {
    background: #f1f2f8;
 
    width: 553px; /* 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 h5 {
     float: left; /* We'll make the heading sit on its own line next to the tweets */
     width: 120px; /* 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: 430px; /* 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;
      }  


The above codes defines how our feeds would like ,basically the skins.Save it (Important).

3. Now, find and place the below javascript code before it


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/> 
  <script src='http://writershome.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('writershome');
    }, 
 
    // This replaces the <p>Loading...</p> with the tweets
    insertLatestTweets: function (writershome) {
     var limit = 5; // How many feeds do you want?
     var url  = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + writershome + '&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/' + writershome + '#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>

Replace writershome marked in red with your own twitter id in the above code. Again, Save this template(Important)

4. Next, go to the Page elements and add a HTML widget and paste this below code


<div id="twitter"> 
                        <h5>Latest tweets</h5>
    <p>Loading...</p> 
 
   <noscript>This feature requires JavaScript</noscript> 
 
  </div>

5.Save it and now view your blog ..tada :)

Finally we  have learned how to do this in a easy way : D

4 comments:

  1. thanks for sharing...

    ReplyDelete
  2. Can you make your iframe info box re-adjustable? Kinda hard to read all the source without pulling it down.

    ReplyDelete
    Replies
    1. Adjusting means I had to remove the scrolling option making the code too long for this post

      The other way you can still use the code is by placing your cursor on the start and move down selecting all by dragging your mouse till the end ( no need to use the scroll down in this case)

      Hope this is useful for you!

      Delete

Thank You for visiting Momscribe.com !
Your contribution is greatly appreciated.
Please feel free to subscribe to this blog either by Email or any methods listed on the right side of this content.

நன்றி ! மீண்டும் வருகை தாருங்கள் :)