Make News Ticker in 4 lines use jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make News Ticker in 4 lines use jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article Javascript, Article jQuery, Article Snippet, Article Trik dan Tips, Article Web, we write this you can understand. Well, happy reading.

Title : Make News Ticker in 4 lines use jQuery
link : Make News Ticker in 4 lines use jQuery

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/

Thus articles Make News Ticker in 4 lines use jQuery

that is all articles Make News Ticker in 4 lines use jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make News Ticker in 4 lines use jQuery with the link address https://autopostingblogspot.blogspot.com/2012/06/make-news-ticker-in-4-lines-use-jquery.html