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.



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('http://3.bp.blogspot.com/-ypWQMLvjuYc/UJagkWS_zzI/AAAAAAAAF0E/uR1oP1CCPZs/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('http://3.bp.blogspot.com/-ZZPNJnEce8o/UJagmc-2CHI/AAAAAAAAF0Q/oH0nNpFGwOE/s1600/OW-pause.png');
}
.newsticker_controls .resume {
    background-image: url('http://3.bp.blogspot.com/-wM4OFL7MTiE/UJagomGf66I/AAAAAAAAF0g/rIllG5aOegA/s1600/OW-resume.png');
}
.newsticker_controls .previous {
    background-image: url('http://4.bp.blogspot.com/-eDdHXuwlaFs/UJagnfN7kWI/AAAAAAAAF0c/LZ0CAjXSPNw/s1600/OW-previous.png');
}
.newsticker_controls .next {
    background-image: url('http://2.bp.blogspot.com/-jzt2vd4dKmY/UJaglZENgjI/AAAAAAAAF0I/mbKMJn567yk/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.

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top