Horizontal Twitter Ticker Widget Untuk Blogger

Twitter adalah salah satu jaringan social media yang tidak perlu di pertanyakan lagi kegunaanya, selain untuk follow, mengiklan atau bahkan mempromosikan situs web/blog milik kita.

Untuk perjumpaan kali ini Oto Website akan update artikel tentang Horizontal Twitter Ticker Widget Untuk Blogger.

Ini adalah sebuah widget yang dapat anda gunakanan untuk memperlihatkan tweet-tweet Anda di twitter dan widget ini dapat anda letakkan di situs/blog Anda.
Untuk lebih jelasnya tentang widget ini silahkan Anda lihat demonya terlebih dahulu dengan menekan tombol berikut.

Lihat Demo

Fitur Tweet OW Ticker Widget:

• Memiliki 3 gaya Teks Jquery transeksi yang berbeda. 
• Update Twitter Widget Tiket otomatis. 
• Memiliki Ultrafast JavaScript sehingga tidak akan mempengaruhi kecepatan situs. 
• Memiliki tiga tombol yang berbeda melalui mana pengguna dapat Berhenti, maju atau membalikkan Tweets. 
• Ini memiliki tiga tombol yang berbeda melalui mana pengguna dapat Berhenti, maju atau membalikkan Tweets.
• Bekerja sempurna di hampir semua browser, termasuk Chrom, FireFox dan bahkan IE.

Kode-kode yang di gunakan:

CSS

/** OW 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/AVvXsEjCfINscqP3OTcaamZXnZPoFhXur_KsPK5R5DHE20BfNlzHFr_SPfxTuHI3nDq0XdfVlEqsqZtR1MvL_NiBAZ3KVFP-ZUha-aSWMbVLKm91RwBi6OkOFVmdHlHbg9dbeDlfCM6P6GwDbw/s1600/OW-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/AVvXsEgjJ5xgYbVy_NT3UILTycTA_0W4ZTb3Is3f1myp6hTQ8CPKN7_RIu1-ZgqHRw8BgIiRsydKzlUQ7BLUouFrqCN0h55Iw1b3lNNRj7yrkxfxM3BlZb56cwKwbgBNLyPXc6gWCgQYrLOMSg/s1600/OW-pause.png');
}
.newsticker_controls .resume {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRemUijReZvKDuBCLiZsBGgONZQg1FX0jKMOCN-znxJPrKp0YNAIHAhuUxSgN2U-oVmFG3uNXnArLY5DTLvlYSyHbNhsRXmUS3Z8bz2hQ2OP8oJP5KTTsznzH5t4lTJBsmRNuff8p_Cg/s1600/OW-resume.png');
}
.newsticker_controls .previous {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ny-UCFGXF2IZrCYkFez50QTovz8Kq3pxdNTfQ0yYLoh670lF7Rt-eqF_BMeYriDf2LGbAkxgiQvFWNQuaBoDeXnGiWrtrHmEwEL8TmAaOZO9X3I2uAL2wAxezqeXiFbr7cNH4HUJLA/s1600/OW-previous.png');
}
.newsticker_controls .next {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqS61MFpxpRLnknYvi3BceL_sh8e_yVPGZpBH8j2qpH8BVpsp0uEdgAeIZ1DcDSc18bjOuXl0HEUntpxLcDAV-c0HlhyKsltaLJWvLKQxMhAuxP_vwPDhTP2a6VX4WQ_WKNwst7QPn1w/s1600/OW-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;
}

HTML/JavaScript.

<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://otowebsite-blogspot.googlecode.com/svn/trunk/ticker.js"></script>
 
    <script type="text/javascript">
    (function($){

      $(document).ready(function() {                                
          $('#newsticker_demo_scroll').newsticker( {
              'style'         : 'reveal',
              'tickerTitle'   : 'OtoWebsite',
              'twitter'       : 'otowebsite',
              '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="https://otowebsite-blogspot.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

TIP Penting: Ada tiga gaya transeksi teks yang berbeda yang terintegrasi dalam ticker melalui mana seseorang dapat memilih hanya satu. Secara default, saya telah menambahkan gaya mesin tik untuk itu, tapi setiap orang dapat mengubahnya sesuai dengan kebutuhan dan keinginannya.

Silahkan lakukan perubahan pada kode di atas agar sesuai dengan Situs/Anda.

Jika Anda membutuhkan bantuan Saya Ada disini.