Latest Twitter Tweet Ticker Widget For Blogger

Today i am posting about Twitter tweet widget.it's benefit is that it's shows a persons tweet in form of tricker.There are many tricker but this one has a unique functionality through which blogger can assume his readers it operates on jquery so you don't have to worry about updating tweets.

Feature of Tweet Ticker Widget:

This widget update updates automatically.
It has three different jquery Text transaction styles.
it has fast javascript so it wouldn't effect site speed.
It works perfectly on almost all browsers including chrome, FireFox and even Internet explorer.
It has three different buttons through which users can Stop, forward or reverse the Tweets.

How To Install Twitter Tweet Widget:

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

CODE:

**** 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/AVvXsEhrYfjFshZVPkud1o6KfDS-Gyqy_cQ22iyhpr510995fNDDhohWuMYFjeu1cM1JTMRpC2XOvEvF72ssGFncjADeqZ7GVReu69zjGvQsf7VE61KX_Kd2wEXOLP86Y9Mq0NbK7VLfHPlIHhg/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/AVvXsEiJJy1VvCnmY1iWhINXqurvG3YK1b_V5rw8KcYmSksrVgaYnrhyCTSAXSri0cv6GlfeHuvc0U6t6G6AfLcfEx8K3C6RrtwgVw4ArQ1Pf2jqK6d4crk4qGIe7Y5N8QXH1stgluEF_vr6cEI/s1600/pause.png');

}

.newsticker_controls .resume {

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlGa0QI5MPCYsO8uayfp7zWoPVbNTLwBQAdikNSAn5S8EltbqR2HY7nhwYW6wsdkXtV_MM7-Lh_XHFOLXm7qWJY5w70cdKHqtNLVCvnbxHIpQ2ELq2A5wi2gDOhl9JtPqs4IQpQtpINQ/s1600/resume.png');

}

.newsticker_controls .previous {

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Q1IQKjaxmt30SPzuKG5ent3h6Yl4gbFjg1n5hmQp1FNxLEmKUSLb4svqdt8HhxKFE9kTFv8HuJfqJlnoAVT3fSfl05c2jb64JzHHTvSa5lIA9H_h45aBWrDhjoafyMfkn-_ob0bnMSM/s1600/previous.png');

}

.newsticker_controls .next {

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7644zmicpkaY58tF-2hfGc_s36rBo4ZTrfksAcqi4qYGsq865f1XFaqjyo7Aora_d4XOkzal62SC2qlekknU2iO3aCOeFUsfa03TEb1OVHVf8FL9_oPfFPvlJgggmrvMFhY2qCz_BYw/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;

}

How To Add Twitter Tweet Widget In Blogger:

Go to Blogger.com >> Layout >> Add a Gadget >> HTML/JavaScript.
Now paste the Following code in that HTML Box.

CODE:

(function($){

$(document).ready(function() {

$('#newsticker_demo_scroll').newsticker( {

'style' : 'Fade',

'tickerTitle' : 'We Guide You',

'twitter' : 'We Guide You',

'excerptLength' : 100, // 100 characters

'sortBy' : 'timestamp',

'reverseOrder' : true,

'scrollSpeed' : 50,

'autoStart' : true,

'slideSpeed' : 1000,

'slideEasing' : 'swing',

'showControls' : true

});

})

})(jQuery);

</script>

<!--[if lt IE 9]>

<![endif]-->

Replace 'We Guide You' with your twitter username.
you can replace 'Fade' with either reveal or scroll.

DONE:

After this save the gadget and then visit your site and enjoy this Tweet Twitter Widget.

Latest Twitter Tweet Ticker Widget For Blogger