OKAY Ajjaa: TUTORIAL MEMBUAT LIST TICKER SLIDE

jQuery, mungkin sudah tidak asing lagi bagi orang yang sering membuat sebuah website yang dinamis, dengan desain web yang hidup. Bagi yang belum tahu, jQuery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan AJAX interactions untuk pengembangan web secara cepat.

Simple Ticker merupakan sebuah ticker yang dibangun menggunakan jquery/1.3.2/jquery.min.js dan sedikit CSS serta javascript. Penggunaan jQuery.1.3.2.min.js menjadikan ticker ini layak dipertimbangkan untuk dibuat sebagai salah satu pelengkap blog karena jQuery.1.3.2.min.js mempunyai kompabilitas tinggi dan sangat umum digunakan pada web ataupun blog.

Langsung saja kita ke tutorial bagaimana membuat List Ticker Slide?

1. Yang pertama Download jQuery.1.3.2.min.js yang tersedia banyak di mbah Google,

2. Kemudian buat Buat script pada notepad, berikan judul, dan panggil JQuery di dalam <script>

3. Buat paragraf yang akan dibuat ticker slide di dalam <body>

4. Untuk mengatur interval/ jarak pergerakan tambahkan function berikut di dalam <body>

Naahhh cukup mudah kan untuk membuat Ticker Slide untuk mempercantik tampilan blog/website kita.

Ini merupakan kode html Ticker Slide secara keseluruhan:

<!doctype html>
<head>
<meta charset="utf-8" />
<title>LIST TICKER SLIDE</title>

</head>
<body>
<h1>
LIST TICKER SLIDE UP </h1>
<ul id="ticker1">
    <p style="color:blue;">
jQuery, mungkin sudah tidak asing lagi bagi orang yang sering membuat sebuah website yang dinamis, dengan desain web yang hidup
    </p>
<p style="color:blue;">
Bagi yang belum tahu, jQuery adalah sebuah Library Javascript yang cepat dan ringkas
    </p>
<p style="color:blue;">
yang mana dapat menyederhakan document traversing, event handling, animating, dan AJAX interactions untuk pengembangan web secara cepat
    </p>
</ul>
<ul id="ticker2">
     <p style="color:green;">
Simple Ticker merupakan sebuah ticker yang dibangun menggunakan jquery/1.3.2/jquery.min.js
    </p>
<p style="color:green;">
Penggunaan jQuery.1.3.2.min.js menjadikan ticker ini layak dipertimbangkan untuk dibuat sebagai salah satu pelengkap blog
    </p>
<p style="color:green;">
karena jQuery.1.3.2.min.js mempunyai kompabilitas tinggi dan sangat umum digunakan pada web ataupun blog
    </p>
</ul>
<script>
 function tick1(){
  $('#ticker1 p:first').slideUp( function () { $(this).appendTo($('#ticker1')).slideDown(); });
 }
 setInterval(function(){ tick1 () }, 2000);
 function tick2(){
  $('#ticker2 p:first').slideUp( function () { $(this).appendTo($('#ticker2')).slideDown(); });
 }
 setInterval(function(){ tick2 () }, 2000);
</script>
</body>
</html>

Selamat Mencoba....

OKAY Ajjaa

Senin, 04 April 2016

TUTORIAL MEMBUAT LIST TICKER SLIDE

Tidak ada komentar: