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 occupation as well as other requests from loyal readers, nosotros were unable to fulfill that certainly request. However, today MBL developers bring hold upwards able to get together a widget that volition present a person’s tweets inward a cast of ticker. Unlike our previous Scrolling tickers, this i has to a greater extent than or less inspiring features through which a blogger tin ship away amuse his readers. It solely operates on Jquery thus a soul won’t bring to worry nigh 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 thus it wouldn’t comport upon site speed.
- It has iii dissimilar buttons through which users tin ship away Stop, forwards or opposite the Tweets.
- It has iii dissimilar buttons through which users tin ship away Stop, forwards or opposite the Tweets.
- It 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 thus that fifty-fifty novel bloggers tin ship away 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 upwards 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGV1a8Cp6uSx80HhERyyBIFsgM7seskBbT-i5N-XS_d4t8u0XO9WsB63DsrVrQFwceA8A-0nlU6N9BsYoDfp4_v6iDAERys2S4vXdeuJeuRytqQgtEHfGAu2ZiuoUpQOu5L-3KAwlRKA/s1600/list_bg.png') no-repeat exceed 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: pump center;
background-repeat: no-repeat;
background-color: transparent;
cursor: pointer;
}
.newsticker_controls .pause {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivAYi-wyDNY7Z-2vgRWZX8dykINiauB4F0J_-tTE5EpCsoFifzZvtka4MpsWBH1TNiE137onb_7QLUNHRhY-Rs8Q6at6bR5aH-O4YlQkShQRFUgixs6c8Vh7KefRXBkePhkdSjmXUFx8g/s1600/pause.png');
}
.newsticker_controls .resume {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZx0jHSyzAS2INQXOqifh15F434IE2oR2JQIaP1CXaKP1cmUh85Vq1gyXfrwTyG-RlZUNE9-cA8AoBDhJyKB1a6kVnsY59eGi1EnyNM9l5M6yDEbnJJ7rlaBkgqKs7WO2Qg2cPB8fF8wc/s1600/resume.png');
}
.newsticker_controls .previous {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4F4_anNZSdYKEHGZX5z-s371FXeKbbKHUkCBd-YKY_nANgEOZmQGzJh3IIfRaHvhB59w3dm3oT3Aou8EpJ6Y9EXVaaxtwUi6yRfGGK4gXPrmZP_tp0y5oGJRAgQ7T0IxDoQ5XILEB3Xo/s1600/previous.png');
}
.newsticker_controls .next {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_U57b4LwDCbYE9P7X_EYqtRmk_a_GFrxuo5fKQ6gCdwWhEDjr5EG5e1uS1OBXedU-IWC-ouKC5kW83O1ndV9xx4GfzVr8J5J4XICtSD5fKXTxQINkwYBOQjB1aR7CHaCaxo0H6H_TaKY/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 relieve 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">
(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 yesteryear pressing “Save button” as well as that’s it. Now become ahead as well as see the website to relish the marvelous tweet see widget.
Important TIP:There are iii dissimilar text transection styles integrated inward this see through which a soul tin ship away pick out only one. By default, nosotros bring added a typewriter fashion to it, but anyone tin ship away modify it according to his wishing needs.
From the Above JavaScript coding Replace reveal with 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 thank y'all all our readers who are next us from the beginning. Alhamdulillah, nosotros are instantly with the exceed 15,000 websites according to the Alexa Ranking. Once again, thank y'all each as well as every visitor who helped us inward growing. Take a lot aid of yourself as well as your household unit of measurement till then, Peace, Blessings as well as Happy blogging.
No comments:
Post a Comment