twitter scroller orizzontale personalizzabile
Per inserire su blogger una barra orizzontale twitter con gli ultimi tweet con 3 diversi effetti come in questo sito leggi il post.
aggiungere un widget HTML e inserire questo codice:
(da: http://www.mybloggerlab.com/2012/10/horizontal-twitter-tweet-widget-for-blogger.html)
Modificare account twitter dove evidenziato. . Si può cambiare l'effetto con reveal , fade e scroll
Sembra non funzionare subito sotto la barra menu
<style>
/** 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/AVvXsEg_jli-JrQLA9gJ3aPna9byTJJdAkLTblSXFw5xkeU87uqekH9i0ocoM4Qe68K7lEffkTF7qyHPc34tv4UlmPR36mhPyAqbmsJ4RWlHBfRYw4Ma-GPb8PlsVDlBBm8IWWHvUeB0yVKz2eo/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/AVvXsEj8pbkijMJ2xeueWvLxOv_x-ZQR3-a8L29brahOG1DmAFGOp7D2P1Q-Ml4t6yYK6OUghLVf-DP9ukojosubDZd7HS_EyENxhyphenhypheniZ7TT-WkgMNljI36vaHNkrxU36-ozMtJ-7FYxPUpGoaDg/s1600/pause.png');
}
.newsticker_controls .resume {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHsWvmAkp8M_aOdPobWeKFFweUgaSmCMRt7JDFvZH1boE-ML3UiAeyE7aY30gfo_kMNf_VgqmULpP6tKKfTPYxN-igh0gRJHPvLjelsysLP6geLv1OiHhSmXuN3aG9v1i45UATMhcG1k/s1600/resume.png');
}
.newsticker_controls .previous {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwynKTGLUZpNU9TUiHHeqvSCqGZPvjtHN9bdKvxHBSCntqmSz8MjraHcBWjkn2ZkwL7C8lHI2Wyz38w_dZNuQNNvURWKSNnOeXlA27tC1gHFVOPjwC0-qwlzjaZHHKZtUMqdRGvivEcvE/s1600/previous.png');
}
.newsticker_controls .next {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiYYbmdlbj_Kg43abWqrlH6iFelQSye3H_LPHlxYDEg46Rn8T1wtnglRnyBRRxJ7Obg4dF4cnyExiZAMTb8NedDoAEQjFy9UMnEyBesfYIdMFrCjvdV93HlcwQZsWJF49E9Bm3X0i_XM/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;
}
</style>
<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="http://mybloggerlab.com/Scripts/ticker.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function() {
$('#newsticker_demo_scroll').newsticker( {
'style' : 'fade',
'tickerTitle' : 'Tweet',
'twitter' : 'account_twitter_senza_@',
'excerptLength' : 100, // 100 characters
'sortBy' : 'timestamp',
'reverseOrder' : true,
'scrollSpeed' : 300,
'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]-->
aggiungere un widget HTML e inserire questo codice:
(da: http://www.mybloggerlab.com/2012/10/horizontal-twitter-tweet-widget-for-blogger.html)
Modificare account twitter dove evidenziato. . Si può cambiare l'effetto con reveal , fade e scroll
Sembra non funzionare subito sotto la barra menu
<style>
/** 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/AVvXsEg_jli-JrQLA9gJ3aPna9byTJJdAkLTblSXFw5xkeU87uqekH9i0ocoM4Qe68K7lEffkTF7qyHPc34tv4UlmPR36mhPyAqbmsJ4RWlHBfRYw4Ma-GPb8PlsVDlBBm8IWWHvUeB0yVKz2eo/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/AVvXsEj8pbkijMJ2xeueWvLxOv_x-ZQR3-a8L29brahOG1DmAFGOp7D2P1Q-Ml4t6yYK6OUghLVf-DP9ukojosubDZd7HS_EyENxhyphenhypheniZ7TT-WkgMNljI36vaHNkrxU36-ozMtJ-7FYxPUpGoaDg/s1600/pause.png');
}
.newsticker_controls .resume {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHsWvmAkp8M_aOdPobWeKFFweUgaSmCMRt7JDFvZH1boE-ML3UiAeyE7aY30gfo_kMNf_VgqmULpP6tKKfTPYxN-igh0gRJHPvLjelsysLP6geLv1OiHhSmXuN3aG9v1i45UATMhcG1k/s1600/resume.png');
}
.newsticker_controls .previous {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwynKTGLUZpNU9TUiHHeqvSCqGZPvjtHN9bdKvxHBSCntqmSz8MjraHcBWjkn2ZkwL7C8lHI2Wyz38w_dZNuQNNvURWKSNnOeXlA27tC1gHFVOPjwC0-qwlzjaZHHKZtUMqdRGvivEcvE/s1600/previous.png');
}
.newsticker_controls .next {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiYYbmdlbj_Kg43abWqrlH6iFelQSye3H_LPHlxYDEg46Rn8T1wtnglRnyBRRxJ7Obg4dF4cnyExiZAMTb8NedDoAEQjFy9UMnEyBesfYIdMFrCjvdV93HlcwQZsWJF49E9Bm3X0i_XM/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;
}
</style>
<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="http://mybloggerlab.com/Scripts/ticker.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function() {
$('#newsticker_demo_scroll').newsticker( {
'style' : 'fade',
'tickerTitle' : 'Tweet',
'twitter' : 'account_twitter_senza_@',
'excerptLength' : 100, // 100 characters
'sortBy' : 'timestamp',
'reverseOrder' : true,
'scrollSpeed' : 300,
'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]-->


Commenti
Posta un commento