Horizontal Twitter Tweets Ticker Widget For Blogger

Twitter Tweets Ticker Widget For Blogger  Horizontal Twitter Tweets Ticker Widget For Blogger
After releasing an automatic RSS Feed Content ticker, almost each as well as every reader requested for a Tweet Ticker widget. Due to lots of pending piece of employment as well as other requests from loyal readers, nosotros were unable to fulfill that certainly request. However, today MBL developers bring in conclusion able to get together a widget that volition exhibit a person’s tweets inward a cast of ticker. Unlike our previous Scrolling tickers, this 1 has approximately inspiring features through which a blogger tin make the axe amuse his readers. It solely operates on Jquery thence a somebody won’t bring to worry virtually updating his tweets manually. Without waiting lets straight 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 thence it wouldn’t comport upon site speed.
  • It has 3 unlike buttons through which users tin make the axe Stop, forwards or contrary the Tweets. 
  • It has 3 unlike buttons through which users tin make the axe Stop, forwards or contrary the Tweets. 
  • It industrial plant perfectly on almost all browsers including chrome, FireFox as well as fifty-fifty Internet explorer. 

How To Install Twitter Ticker Widget inward Blogger:

The steps stated below are extremely straightforward thence that fifty-fifty novel bloggers tin make the axe easily integrate it into their websites. Just follow the next instructions. 

  • Go To Blogger.com >> Template >> Edit HTML >> Proceed.
  • Within the template, search for ]]></b:skin> and higher upwardly it glue the next 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 come about 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: middle 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 salve the template.

How To ADD MBL Tweet Ticker Widget inward Blogger:

  • Go to Blogger.com >> Layout >> Add a Gadget >> HTML/JavaScript.
  • Now glue the Following code inward 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”>
      $(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
    <!–[if lt IE 9]>
    <script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>

  • Replace MyBloggerLab amongst your twitter Username
All Done: Save the gadget past times pressing “Save button” as well as that’s it. Now larn ahead as well as view the website to taste the marvelous tweet heart widget.

Important TIP:There are 3 unlike text transection styles integrated inward this heart through which a somebody tin make the axe conduct only one. By default, nosotros bring added a typewriter manner to it, but anyone tin make the axe alter it according to his wishing needs.

From the Above JavaScript coding Replace reveal amongst either fade or scroll (Make certainly y’all write them inward lowercase letters otherwise the widget would halt working).

From The Editor’s Desk:

Hope y’all bring enjoyed today’s tutorial. On this occasion, I would similar to give cheers all our readers who are next us from the beginning. Alhamdulillah, nosotros are forthwith amid the come about 15,000 websites according to the Alexa Ranking. Once again, cheers each as well as every visitor who helped us inward growing. Take a lot attention of yourself as well as your solid unit of measurement till then, Peace, Blessings as well as Happy blogging.

Sumber http://www.mybloggerlab.com