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 for certain request. However, today MBL developers convey live on able to get together a widget that volition demo a person’s tweets inward a shape of ticker. Unlike our previous Scrolling tickers, this 1 has or hence inspiring features through which a blogger tin amuse his readers. It alone operates on Jquery hence a somebody won’t convey to worry nearly updating his tweets manually. Without waiting lets conduct 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 hence it wouldn’t touching on site speed.
- It has iii dissimilar buttons through which users tin Stop, forwards or contrary the Tweets.
- It has iii dissimilar buttons through which users tin Stop, forwards or contrary 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 hence that fifty-fifty novel bloggers tin 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 upward 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 locomote past times 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('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 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 pump widget.
Important TIP:There are iii dissimilar text transection styles integrated inward this pump through which a somebody tin pick out only one. By default, nosotros convey added a typewriter manner to it, but anyone tin alter it according to his wish needs.
From the Above JavaScript coding Replace reveal amongst either fade or scroll (Make for certain you lot write them inward lowercase letters otherwise the widget would halt working).
From The Editor’s Desk:
Hope you lot convey enjoyed today’s tutorial. On this occasion, I would similar to give thank you lot all our readers who are next us from the beginning. Alhamdulillah, nosotros are forthwith amidst the locomote past times 15,000 websites according to the Alexa Ranking. Once again, thank you lot each as well as every visitor who helped us inward growing. Take a lot tending of yourself as well as your menage unit of measurement till then, Peace, Blessings as well as Happy blogging.
No comments:
Post a Comment