Horizontal Twitter Tweets Ticker Widget For Blogger

Advertisements
Twitter Tweets Ticker Widget For Blogger
After releasing an automatic RSS Feed Content ticker, almost each and every reader requested for a Tweet Ticker widget. Due to lots of pending work and other requests from loyal readers, we were unable to fulfill that certain request. However, today MBL developers have finally able to assemble a widget that will show a person’s tweets in a form of ticker. Unlike our previous Scrolling tickers, this one has some inspiring features through which a blogger can amuse his readers. It entirely operates on Jquery so a person won’t have to worry about updating his tweets manually. Without waiting lets directly jump onto our Today’s Tutorial.




Features of MBL Tweet Ticker Widget:

  • It has 3 Different Jquery Text transection styles.
  • This Twitter Ticket Widget updates automatically.
  • It has Ultrafast JavaScript so it wouldn’t affect site speed.
  • It has three different buttons through which users can Stop, forward or reverse the Tweets. 
  • It has three different buttons through which users can Stop, forward or reverse the Tweets. 
  • It works perfectly on almost all browsers including chrome, FireFox and even Internet explorer. 

How To Install Twitter Ticker Widget in Blogger:

The steps stated below are extremely straightforward so that even new bloggers can easily integrate it into their websites. Just follow the following instructions. 

  • Go To Blogger.com >> Template >> Edit HTML >> Proceed.
  • Within the template, search for ]]></b:skin> and above it paste the following CSS Coding.
/** MBL Twitter Tweet Ticker**/

.newsticker_wrapper {
    font: 13px/32px Arial, Helvetica, sans-serif;
    color: #7ca9ce;
    height: 30px;
    -moz-border-radius: 3px;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#fff), color-stop(0.5, #fff), to(#e5e6e7));
    background-image: -webkit-linear-gradient(left, #fff, #fff 50%, #e5e6e7); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(left, #fff, #fff 50%, #e5e6e7); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(left, #fff, #fff 50%, #e5e6e7); /* IE 10+ */
    background-image: -o-linear-gradient(left, #fff, #fff 50%, #e5e6e7); /* Opera 11.10+ */
 
    border-style: solid;
    border-width: 1px;
    border-top-color: #b0b2b3;
    border-bottom-color: #c9cacc;  
    border-right-color: #b7b8ba;
    border-left-color: #c9cacc;
    border-radius: 3px;
    -webkit-text-size-adjust: none;
}
.newsticker_wrapper .newsticker_title {  
    float: left;
    background: transparent url('http://2.bp.blogspot.com/-W63cDkFRXk0/UI7HltoCJKI/AAAAAAAAG3k/KL0e2Zu4hy8/s1600/list_bg.png') no-repeat top right;
    padding-right: 7px;
    margin-right: 15px;
}
.newsticker_wrapper h4 {
    color: #fff;
    height: 100%;
    overflow: hidden;  
    margin: 0;
    padding: 0 6px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #4374ab;
    border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    background-color: #87abd1; /* fallback/image non-cover color */
    background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#538ebf), to(#87abd1));
    background-image: -webkit-linear-gradient(left, #538ebf, #87abd1); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -moz-linear-gradient(left, #538ebf, #87abd1); /* Firefox 3.6+ */
    background-image: -ms-linear-gradient(left, #538ebf, #87abd1); /* IE 10+ */
    background-image: -o-linear-gradient(left, #538ebf, #87abd1); /* Opera 11.10+ */
}
.newsticker {      
    margin: 0;
    padding: 0;  
}
.newsticker li {
    padding: 0 15px;
}
.newsticker a {
    color: #538ebf;
}
.newsticker_controls {
    position: absolute;
    right: 9px;
    top: 0;
    list-style-type: none;
    list-style-image: none;  
    background-color: transparent;
    z-index: 30;
    margin: 0 0 0 10px;
}
.newsticker_controls li {
    float: left;  
    height: 30px;
    width: 23px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
}
.newsticker_controls .pause {
    background-image: url('http://4.bp.blogspot.com/-upBFmyfy4KM/UI7Hmw_VvJI/AAAAAAAAG3w/_IvmBS2KK6E/s1600/pause.png');    
}
.newsticker_controls .resume {
    background-image: url('http://2.bp.blogspot.com/-ncUOgCFsI2w/UI7HofX_JOI/AAAAAAAAG4A/gqJS-WlC_ck/s1600/resume.png');    
}
.newsticker_controls .previous {
    background-image: url('http://1.bp.blogspot.com/-vzjwIgRLQXc/UI7HnsZqFuI/AAAAAAAAG34/F4zyGHxPiUc/s1600/previous.png');
}
.newsticker_controls .next {
    background-image: url('http://2.bp.blogspot.com/-sWwtR5VdHlc/UI7HmcXnGyI/AAAAAAAAG3o/QQuLkWUSWIE/s1600/next.png');
}
/* Reveal */
.newsticker_style_reveal .newsticker li {
    left: 15px !important;
}
/* Scroll */
.newsticker_style_scroll .newsticker_title {
    margin-right: 10px;
}
.newsticker_style_scroll .newsticker {
    background: none;
}
.newsticker_style_scroll .newsticker li {
    margin-right: 80px;
    padding: 0;
}

  • After pasting the CSS StyleSheet coding save the template.

How To ADD MBL Tweet Ticker Widget in Blogger:

  • Go to Blogger.com >> Layout >> Add a Gadget >> HTML/JavaScript.
  • Now paste the Following code in that HTML Box.
<ul id="newsticker_demo_scroll" class="newsticker"></ul>                  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/ticker.js"></script>
     
    <script type="text/javascript">
    (function($){
   
      $(document).ready(function() {                                    
          $('#newsticker_demo_scroll').newsticker( {
              'style'         : 'reveal',
              'tickerTitle'   : 'MyBloggerLab',
              'twitter'       : 'mybloggerlab',
              'excerptLength' : 100, // 100 characters
              'sortBy'        : 'timestamp',
              'reverseOrder'  : true,
              'scrollSpeed'   : 50,      
              'autoStart'     : true,
              'slideSpeed'    : 1000,
              'slideEasing'   : 'swing',
              'showControls'  : true
          });
       
      })
         
    })(jQuery);  
    </script>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  • Replace MyBloggerLab with your twitter Username
All Done: Save the gadget by pressing “Save button” and that’s it. Now go ahead and visit the website to enjoy the marvelous tweet ticker widget.

Important TIP:There are three different text transection styles integrated in this ticker through which a person can select only one. By default, we have added a typewriter style to it, but anyone can change it according to his desire needs.

From the Above JavaScript coding Replace reveal with either fade or scroll (Make sure you write them in lowercase letters otherwise the widget would stop working).


From The Editor’s Desk:

Hope you have enjoyed today’s tutorial. On this occasion, I would like to thank all our readers who are following us from the beginning. Alhamdulillah, we are now among the top 15,000 websites according to the Alexa Ranking. Once again, thanks each and every visitor who helped us in growing. Take a lot care of yourself and your family till then, Peace, Blessings and Happy blogging.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

43 comments

October 29, 2012 at 12:16 PM

Must say it's awesome widget.

October 29, 2012 at 12:20 PM

Interesting read.

October 29, 2012 at 5:27 PM
October 29, 2012 at 7:30 PM

Thanks for the info.

October 30, 2012 at 4:32 AM

@Syed
Bro I HAVE VERY big problum
in hindi:
bro mai jo bhi css bskin ky upar dalta hu wo work he nahi karta please tell me how to fix this

October 30, 2012 at 4:38 AM

Nice work brother, but i thing switching speed of tweets should be slow.

Vertigen- A free Blogger Template

October 30, 2012 at 6:20 AM

Bro too much havy coding! Please Make it simple and lightweight Please.

Simple and awesome Hire Me Card with CSS3 for Blogger

Editorial Team MOD
October 30, 2012 at 10:40 AM

Thanks For Commenting, But the Switching Speed can be increased according to your desire needs. In above coding Search for 'slideSpeed' : 1000, and increase its speed. Hope that Helps. Peace

Editorial Team MOD
October 30, 2012 at 10:41 AM

Dude, its extremely lightweight. It has just 1 Jquery File. While rest coding is of CSS Which will won't affect your site speed. Peace

Editorial Team MOD
October 30, 2012 at 10:45 AM

Thats Kinda Weired. Try doing this

Go To Blogger.com >> Template >> Layout
Now Add a Gadget >> HTML/JavaScript
Now Type <style> Your_CSS_Here </style>

Now Remove "Your_CSS_Here" With your CSS Style Sheet Coding.
Hope That Helps. Peace and Blessings

October 30, 2012 at 8:46 PM
Editorial Team MOD
October 30, 2012 at 11:48 PM

Yes You can add it in WordPress.

October 31, 2012 at 2:35 AM

nice widget.Great work bro. I am the regular visitors of your blog.And i have learn lots from your blog. Keep this good works in future also.

Regards
Blogging Tips & Tricks

October 31, 2012 at 4:25 AM

Terrific work! That is the kind of information that are meant to be shared across the internet.Thank you =)
Also see my website: Remove Background

October 31, 2012 at 9:47 PM

Nice Post Bro Keep Writting :)

Premium Tech Blog

November 19, 2012 at 8:02 AM

Hi Syed !
Thanks for your job.

I'm pasting the code in my blog but not work. See please.
What happens?

November 19, 2012 at 8:03 AM

http://blogdoevangelista.blogspot.com.br/

Editorial Team MOD
November 19, 2012 at 8:56 AM

The problem is that, You have Added "@lhevangelista" In the Twitter account you should add only "lhevangelista" Don't use "@". Hope that Helps. Peace

November 19, 2012 at 1:51 PM

Thank's for attention Syed, I'm revising and pasting again but not solving this problem.

November 19, 2012 at 2:20 PM

Now all it's ok! Thank's again!

Editorial Team MOD
November 20, 2012 at 12:09 AM

Thumbs UP

January 14, 2013 at 5:24 AM

The "scroll" effect doesn't work.

Editorial Team MOD
January 14, 2013 at 7:35 AM

Working fine, at our End. Use just scroll. Don't add any spaces or use capital letters.

March 8, 2013 at 2:13 PM

Added this yesterday and it was working grea. Haven't changed anything but this afternoon it stopped working. About an hour ago it randomly started working again and I figured it was just a fluke thing but now it's coming up blank again. Anything I could be doing wrong or is this somehow just unreliable?

Editorial Team MOD
March 8, 2013 at 2:14 PM

You can always check our Preview gadget, it never stops working. Provide blog url so we can help you more!

March 8, 2013 at 2:30 PM
This comment has been removed by the author.
March 8, 2013 at 2:31 PM

Thanks! It's actually not on a blog. I put the code on a personal webpage that I hard-coded: www.popealarm.com.

March 8, 2013 at 4:01 PM

And... it's back up and working again. Very strange.

March 8, 2013 at 4:15 PM

One related question thouhg... It looks like it's posting the oldest tweet first, rather than the most recent. Any way to reverse it?

Editorial Team MOD
March 9, 2013 at 12:17 AM

Its Working, Very fine, And yes, it shows the latest tweet first. There is no way to reverse it.

March 23, 2013 at 6:56 AM

when i install it on my blog it stops my content slider, which also uses jquery, working.

Editorial Team MOD
March 23, 2013 at 9:16 AM

Seems as if, some Jquery files are conflicting. The reason why, your slider stopped working.

March 24, 2013 at 9:56 AM

How do I stop Jquery files from conflicting? Are you allowed more than one widget with jquery on the same page?

Editorial Team MOD
March 24, 2013 at 10:05 AM

If you can provide us the Url of your site then, we can help more easily.

March 24, 2013 at 10:49 AM

http://urbancoreonline.blogspot.co.uk thank you

Editorial Team MOD
March 25, 2013 at 1:53 AM

Can you Send us your Full Template in XML format.

Email us at. support@mybloggerlab.com

March 25, 2013 at 2:05 PM

Ive sent the email entitled "urbancore template". Thank you for your help.

May 28, 2013 at 10:09 AM

Am I able to add retweets into the feed?

Editorial Team MOD
May 29, 2013 at 1:20 AM

Yes you can

July 8, 2013 at 10:35 AM

Anyway to make this work with the new twitter API changes?

July 11, 2013 at 10:22 AM

I don't see the ticker at all, no matter where I put the name. kingnina82.blogspot.com...what do you think the problem is???

November 2, 2013 at 11:12 AM

Doesn't work :(

Editorial Team MOD
November 3, 2013 at 4:05 AM

That's because of the change in Twitter API

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.