Make News Ticker in 4 lines use jQuery

Apa jadinya variabel unordered (ul) di rangkai dengan ramuan plugin jQuery! Pasti bakal tercipta suatu karya aneka macam, bagaimana si pembuat :p Kesempatan sekarang Koben akan berbagi cara membuat News Ticker in lines of jQuery. Tidak tanggung² langsung 4 jenis gaya ticker lines akan gue share :-"
Syarat utama dalam memuluskan trik ini tidak lain telah terpasang script jQuery didalam template kalian! Nama ke empat gaya news ticker in lines itu adalah: only one news at the time, 3 news always visible, changing opacity of first news and live twitter data. Melihat nama-namanya saja sudah terbayangkan betapa full stylish hasil akhirnya nanti. Mau dipasang semua gaya tersebut juga tidak apa-apa ;))

Urusan peletakan bumbu ramuan Koben anggap kalian sudah pada tahu dimana & gimana ;)

Kode CSS

.ticker {
width: 100%;
height: 40px;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
border-radius: 5px;
border: 1px solid #ddd;
box-shadow: 0px 0px 5px #ddd;
}
.ticker li {
height: 30px;
padding: 5px;
margin: 3px 5px;
border-bottom: 1px dotted #ddd;
}
#ticker_01, #ticker_03 {
height: 53px;
}
#ticker_02 {
height: 125px;
}

Koben sengaja membuat standaran saja gaya variabel CSS. Silahkan deh sobat buat yg edan punya variable CSS lainnya :)

Markup HTML

<ul id="ticker_01" class="ticker">
<li>
blah bleh bloh 1
</li>
<li>
blah bleh bloh 2
</li>
<li>
blah bleh bloh 3
</li>
<li>
blah bleh bloh ...
</li>
</ul>Perhatikan penulisan id dan class di dalam taging ul Itulah unik-ID dari masing² gaya jQuery ticker! Dan unik ID "ticker_01" untuk gaya ticker 1. Bila ingin memakai gaya "ticker_02" dan "ticker_03" tinggal ganti saja.<ul id="ticker_02" class="ticker">
<li>
blah bleh bloh 1
</li>
<li>
blah bleh bloh 2
</li>
<li>
blah bleh bloh 3
</li>
<li>
blah bleh bloh ...
</li>
</ul>

<ul id="ticker_03" class="ticker">
<li>
blah bleh bloh 1
</li>
<li>
blah bleh bloh 2
</li>
<li>
blah bleh bloh 3
</li>
<li>
blah bleh bloh ...
</li>
</ul>

Plugin jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
 function tick(){
 $('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); });
 }
 setInterval(function(){ tick () }, 5000);


 function tick2(){
  $('#ticker_02 li:first').slideUp( function () { $(this).appendTo($('#ticker_02')).slideDown(); });
 }
 setInterval(function(){ tick2 () }, 3000);


 function tick3(){
  $('#ticker_03 li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker_03')).css('opacity', 1); });
 }
 setInterval(function(){ tick3 () }, 4000); 

 function tick4(){
  $('#ticker_04 li:first').slideUp( function () { $(this).appendTo($('#ticker_04')).slideDown(); });
 }
//]]>
</script>

Baris pertama script jangan dipakai jika sudah ada!

Kalau berminat memasang gaya yg ke-4 [live twitter data], sobat tinggal tambahkan rumusan CSS & jQuerynya!
Berikut Koben buatkan terpisah versinya, silahkan bandingkan dengan yg ada pada demo. Temukan apa yg bedanya ya :d

KODE CSS

<style>
.ticker {
width: 100%;
height: 40px;
overflow: hidden;
border: 1px solid #DDD;
margin: 0;
padding: 0;
list-style: none;
border-radius: 5px;
box-shadow: 0px 0px 5px #DDD;
}
.ticker li {
height: 30px;
border-bottom: 1px dotted #DDD;
padding: 5px;
margin: 3px 5px;
}
#ticker_04 {
height: 161px;
}
#ticker_04 li {
height: 40px;
overflow: hidden;
} 
#ticker_04 img {
float: left;
height: 40px;
width: 40px;
margin-right: 10px;
} 
#tick_4 { 
display: none;
}
</style>

MARKUP HTML

<div id="tick_4">
<ul id="ticker_04" class="ticker">
</ul>
</div>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

jQuery PLUGIN

<script type='text/javascript'>
//<![CDATA[
 function tick4(){
  $('#ticker_04 li:first').slideUp( function () { $(this).appendTo($('#ticker_04')).slideDown(); });
 }

 /**
  * USE TWITTER DATA
  */

  $.ajax ({
   url: 'http://search.twitter.com/search.json',
   data: 'q=%23blogger tutorial',
   dataType: 'jsonp',
   timeout: 10000,
   success: function(data){
    if (!data.results){
     return false;
    }

    for( var i in data.results){
     var result = data.results[i];
     var $res = $("<li />");
     $res.append('<img src="' + result.profile_image_url + '" />');
     $res.append(result.text);

     console.log(data.results[i]);
     $res.appendTo($('#ticker_04'));
    }
   setInterval(function(){ tick4 () }, 4000); 

   $('#tick_4').show();

   }
 });
//]]>
</script>

Semua tutorial itu Koben dapatkan dari master Ivan Lazarevic selaku owner web WORKSHOP @kopipejst
Acak-acak semua konten di web tersebut. Pokoknya tidak akan rugi deh, edan eling bin kueren punya b-)
Good luck :)
Happy news ticker \m/