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]-->





Commenti

Post più popolari