Twitter tweets ticker adalah
widget yang menampilkan data post di twitter secara b
erkala 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
bloggerKlik 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXbDykvGwo3ZMPeUSdDCxx8jlsDLl1FFb5Dd1URrddd4ybk4vMT4cKXGpyWkp0RcOZB2jefVyELzRkgODo65yxcDvXjtr5RI6yoP0G7vc2-gR2xqRc-6uGdY9pBgVF4_DpUc2FzvMwIoE/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PLLPS9zhQ79Byc69f7gDz0xQhxhCcXDeAtwj0wuPeA_wOEDTsgi2tgnr1xBficsnlcJg0CGZ6RWGVgBPuuQRmiP3TzcMGQM2_NaTtCzU6-dsfDjFILpZqV4u85dWhEqAWyjB5H4qJqA/s1600/pause.png')}
.newsticker_controls .resume{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP18usql8Kwf5kjPI23KgX9knFzLyx_os4QA0TxbX4mAIWe8IF8tCO8EIZnKlEqm0_Vqvl_rJ0Z6E6u9M9NjOAAOj9pjrDvinY7Ep-2aRUAcsbS6_30gZZegLDP4cXm7axUWW0GAz6PcM/s1600/resume.png')}
.newsticker_controls .previous{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVe1j0gYQHrKUTr938_mX6fbQhdU1GNCYCQ_KQCqbqKfiHyIeXRVqKwGRAd72VQFTdzV436Y04bXPpprdeYgDcOB77yvpu8bpkkBqcCpPZ-vZkde5fmNyXFMHMVkfId4Bnwa4vwj7vbN0/s1600/previous.png')}
.newsticker_controls .next{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnq6Xxo_DQLCLToXBUTmW-f0ZDKAYhItAmwnEAlhamjIPJTEXPlbGd2wQRB07HTVxFsxLIWKJCzwGlbwVKYfBfzZVywwKV_H4UlZQbJTGFYpjnNIIHhNZhrCT_HTTB8p5s4am9agpTdh4/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"
