Horizontal Twitter Tweets Ticker Widget For Blogger

Socialize It →

Tweet

41

Advertisements

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.

Horizontal Tweets Ticker (DEMO)

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivvUaDBLXQOA-Tm5r9shrkEab8yt1cp6a91923bkncbQy-vUBy18iF7FEKK3YMVta9rNxtnjHYRww8c10npuOBx-GdfdNFhKYbV0_OkUgOdJjmetfGCOs4Z_Mdqye_RPkw-rXMf_GljaQ/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBBfryCqFdHuCergPeCBwPrmeSqvaacLZJRnPILRrMrbaosWRdQGnJ46dI6_cXFHEWSySgJmpEouAucn-JiuT5PXBCNQH7NZaMVUEILR8LgFS_XsFsfDt0ccT3wlqi4b__94MvLW2XKbw/s1600/pause.png');    
}
.newsticker_controls .resume {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi05WICnrc8vDHfLGl3oDgnVVPZRou3wX0KETBft5bhedyeL8rToWhR9PTi3GLDHa-h6IqROiwUq0ub9JdTITiPXBY34e3Zt1W8NIKaqoBHq_4oA14LA7OC8Fjqzg6v_QDEAvEIld-5ulc/s1600/resume.png');    
}
.newsticker_controls .previous {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9ICJI3ie_xVdFmTxrrcchxDfeCclGtiO4TVN6EEj_6ZPKeDeW4wQek5JNj-lUxY3QNWrboPeJQBhHaFmJtJF_z8UxQFbiIg4H3KcxBB5OfVZwubdtfIjbMCgLdD88-1rFDwRzDE6DiY/s1600/previous.png');
}
.newsticker_controls .next {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HZfhWW7LbJnbHKA8SXBq8-WweG9bI8_RN0NJ5zPtFdvi2aUdC18M-MDfUPW3EEUsIue7ZwMS6KeKoP4YAfEEr0SddP-fBAzv7VgcuWBvZm_bQ-Zs4D6FNVigTQdRYNzBiccuB-GFdXA/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

About the Editorial Team

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