Twitter Tweets Ticker Widget Cantik

Twitter tweets ticker adalah widget yang menampilkan data post di twitter secara berkala dan otomatis. Data ini dapat diatur sesuai kebutuhan kapan anda melakukan tweet. Sebelumnya saya pernah share cara membuat twit official widget dan latest twitter update yang tidak kalah menarik dengan widget lainnya. Bedanya Twitter Tweets Ticker Widget Cantik ini berbentuk horizontal dan tampilan latest twitter updatenya dapat ditampilkan dalam tiga gaya. Sekarang mari kita bahas cara membuat twitter tweets ticker widget cantik untuk blogspot. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Masukkan kode berikut di atas kode ]]></b:skin>

.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); background-image:-moz-linear-gradient(left,#fff,#fff 50%,#e5e6e7); background-image:-ms-linear-gradient(left,#fff,#fff 50%,#e5e6e7); background-image:-o-linear-gradient(left,#fff,#fff 50%,#e5e6e7);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://2.bp.blogspot.com/-W63cDkFRXk0/UI7HltoCJKI/AAAAAAAAG3k/KL0e2Zu4hy8/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; background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#538ebf),to(#87abd1)); background-image:-webkit-linear-gradient(left,#538ebf,#87abd1); background-image:-moz-linear-gradient(left,#538ebf,#87abd1); background-image:-ms-linear-gradient(left,#538ebf,#87abd1); background-image:-o-linear-gradient(left,#538ebf,#87abd1)}
.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://4.bp.blogspot.com/-upBFmyfy4KM/UI7Hmw_VvJI/AAAAAAAAG3w/_IvmBS2KK6E/s1600/pause.png')}
.newsticker_controls .resume{background-image:url('http://2.bp.blogspot.com/-ncUOgCFsI2w/UI7HofX_JOI/AAAAAAAAG4A/gqJS-WlC_ck/s1600/resume.png')}
.newsticker_controls .previous{background-image:url('http://1.bp.blogspot.com/-vzjwIgRLQXc/UI7HnsZqFuI/AAAAAAAAG34/F4zyGHxPiUc/s1600/previous.png')}
.newsticker_controls .next{background-image:url('http://2.bp.blogspot.com/-sWwtR5VdHlc/UI7HmcXnGyI/AAAAAAAAG3o/QQuLkWUSWIE/s1600/next.png')}
.newsticker_style_reveal .newsticker li{ left:15px !important}.newsticker_style_scroll .newsticker_title{ margin-right:10px}
.newsticker_style_scroll .newsticker{ background:none}
.newsticker_style_scroll .newsticker li{ margin-right:80px; padding:0}

Sekarang kita bikin kolom di bawah header untuk tampilan widget tickernya agar tidak mengganggu tampilan widget yang lain. Selain itu widget ini membutuhkan ruang yang lebar, jadi lebih cocok ditempatkan di bawah header atau di atas main wrapper.
Masukkan lagi kode berikut di atas kode ]]></b:skin>

#blogonol_kolom{margin:10px 0;padding:1%;width:98%}

Masukkan kode berikut di atas kode <div id='main-wrapper'>

<div id='blogonol_kolom'>
<b:section class='header' id='blogonolkolom' preferred='yes'>
</div>

Klik Simpan Template
Klik Tata Letak
Nantinya akan terlihat kolom baru di ata main wrapper seperti gambar berikut.

klik gambar untuk memperbesar

Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<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'         : 'reveal',
              'tickerTitle'   : 'masukkan nama ticker',
              'twitter'       : 'username twitter anda',
              '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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

Silahkan ganti tulisan merah dengan cetak tebal sesuai perintah. Anda juga dapat mengganti reveal dengan fade atau scroll.
Klik Simpan dan lihat hasilnya
Demikian tutorial cara membuat Twitter Tweets Ticker Widget Cantik, semoga dapat bermanfaat bagi semua. Amin. Selamat mencoba dan sukses selalu

"keep spirits and do the best"