Headline Berita Statis (Jquery)

Ari soca tos abot pisan, ngalihkeun perhatian ngadamel catetan, bilih hilap aya kango “kokoreh” deui. Biasanya untuk membuat hiasan pada website yang akan dibuat, kita dapat menggunakan animasi slideshow yang dapat diunduh dari internet. Jquery memberikan kemudahan pada kita yang berupa plugin yang siap digunakan. Pada catatan kali ini saya akan menulis pembuatan headline berita statis dengan plugin skitter. Sebagai langkah pertama silahkan unduh core filenya disini

Adapun langkah penggunaannya sebagai berikut:

  1. Tambahkan code dibawah ini dan diletakkan sebelum </head>
    <link type="text/css" href="css/skitter.styles.css" media="all" rel="stylesheet" />
    https://code.jquery.com/jquery-2.1.1.min.js
    http://js/jquery.easing.1.3.js
    http://js/jquery.animate-colors-min.js
    http://js/jquery.skitter.min.js
  2. Setelah itu tambahkan kembali code dibawah ini sesudah code diatas dan sebelum </head>
    
    	$(document).ready(function() {
    		$(".box_skitter_large").skitter();
    	});
    
  3. Pada bagian body silahkan tambahkan perintah <ul> atau unordered list sebagai berikut
                
                   
    •                                          

      cut

                  </li>                 <li>                     <a href="#swapBlocks"><img src="images/002.jpg" width="400px" class="swapBlocks" /></a>                    

      swapBlocks

                      </li>                 <li>                     <a href="#swapBarsBack"><img src="images/003.jpg" width="400px" class="swapBarsBack" /></a>                    

      swapBarsBack

                      </li>                 <li>                     <a href="#swapBarsBack"><img src="images/004.jpg" width="400px" class="showBarsRandom" /></a>                    

      swapBarsBack

                      </li>           </ul>         </div>

CATATAN

untuk bagian <div class =”box_skitter box_skitter_large”> dapat diubah dalam bentuk yang lebih kecil dengan mengganti kata large dengan small. lebar box untuk ukuran large 800 x 300 sedangkan small 200 x 300 (pixel). perhatikan potongan code ini

<a href=”#cut”><img src=”images/001.jpg” class=”cut”

untuk class = “cut” bertujuan untuk mengatur gerak transisi antar gambar yang kita masukkan. Adapun transisi yang dapat digunakan adalah “cube”,”cubeRandom”,”block”,”cubeStop”,”cubeStopRandom”,”cubeHide”,”cubeSize”,

“swapBarsBack”,”swapBlocks”,”cut””horizontal”,”showBars”,”showBarsRandom”,”tube”,

“fade”,”fadeFour”,”paralell”,”blind”,”blindHeight”,”blindWidth”,”directionTop”,

“directionBottom”,”directionRight”,”directionLeft”,”cubeSpread”,”glassCube”,

“glassBlock”,”circles”,”circlesInside”,”circlesRotate”,”cubeShow”,”upBars”,

“downBars”,”hideBars”,”swapBars”, “swapBarsBack”,”swapBlocks”,”cut”

Gunakan pilihan transisi diatas tanpa tanda kutip

Author: ica03

lahir di Cianjur 25 Agustus 1980, Sekolah Dasar di SDN Cibogo satu tmt 1992, MTs dan MA di Assalaam Parungkuda tmt tahun 1998, Strata I di Baturaja jurusan Teknologi Pendidikan tmt 2003. Sedang menempuh strata 2 di Universitas Sriwijaya Prodi Teknologi Pendidikan Hanya Seorang Guru Biasa di SMA Negeri 1 Pagar Alam CP/WA 085268071600

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s