Text-slider Testimonial Menggunakan JavaScript Widget using jQuery Cycle Plugin

Posted on Updated on

Salam hangat dari saya, kembali saya akan membagikan tutorial mempercantik sebuah testimonial yang kerap kali terdapat pada sebuah website menjadi sebuah slider text. Dalam hal ini saya menggunakan bantuan widget jQuery Plugin dan Cycle Plugin. Langsung ja ea….

Ada beberapa hal yang harus kita lakukan yaitu

1. Download terlebih dahulu plugin jQuery Cycle disini

2. Buat sebuah database yang isinya adalah sebagai berikut :

CREATE TABLE `testimonial` (
`idtest` INT( 5 ) NOT NULL AUTO_INCREMENT ,
`nama` VARCHAR( 30 ) NOT NULL ,
`isitest` TEXT NOT NULL ,
`kota` VARCHAR(20) NOT NULL ,
PRIMARY KEY ( `idtest` )
) ENGINE = MYISAM ;

dan script dibawah ini adalah untuk isi data pada tabel


INSERT INTO `testimonial` (`idtest` ,`nama` ,`isitest` ,`kota`)
VALUES (
'' , 'GooLanz', 'Terkadang didalam hidup, seseorang harus bersedia mundur selangkah untuk mempersiapkan diri melangkah kedepan.', 'Medan'
), (
'', 'Agus Han', 'Seorang pemenang itu ibarat rajawali yang mengepakan sayapnya terbang di angkasa menerjang segala rintangan.', 'Papua'
), (
'', 'Budi', 'Sebagai pemimpin, kita hidup bagaikan dibawah mikroskop. Segala hal yang kita lakukan atau katakana, tidak terlepas dari pengamatan pengikut kita.', 'Makassar'
), (
'', 'Faber', 'Kebahagian tidak datang begitu saja. tidak ada orang yang dikaruniai kebahagian. kita harus mencari kebahagian kita sendiri, melauli sikap berpikir kita dan kesediaan kita untuk bersyukur.', 'Medan'
);

3. Selanjunya kita buat skrip untuk style cssnya, simpan dengan nama style.css. Kira-kira seperti dibawah ini.


@charset "utf-8";
/* CSS Document */
#testimonials {
width:500px;
background:#E7E9E6 ;
border:1px solid #D8D9D6;
margin:5px 0 ; height:auto;

}
#blockquote{
padding:5px;
width:400px; height:auto;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
color:#808080;

}

#isi{ text-align:justify;
	padding:10px; width:380px;

}
#cite {
font-style: normal;
display: block;

text-transform: uppercase;
font-weight: bold;
font-style:italic;
color: #555;
padding-left:5px;
margin-top:10px;
}

4. Selanjutnya kita buat script untuk testimonial slidernya. Perhatikan script dibawah ini


<?php
//koneksi server
mysql_connect("serverhost","userhost","passhost");
mysql_select_db("nama_database");
?>
<html>
<head>
<!-- include file jQuery library dari folder js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- include file Cycle plugin dari folder js -->
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#testimonials')
	.before('<div id="nav">')
	.cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, scrollRight, shuffle
		pager:  '#nav'
     });
});
</script>
<!--include file style.css untuk tampilannya-->
<link href="style.css" type="text/css" media="screen" rel="stylesheet" />
<title>Slider Testimonials With jQuery Cycle</title>
</head>

<body>
<?php
//query untuk mengambil data
$mysql=mysql_query("SELECT*FROM testimonial");?>
<h1>Slider Testimonials With jQuery Cycle</h1>
<div id="testimonials">
 <? while($qMysql=mysql_fetch_array($mysql)){ //array data testimonial?>
 <div id="blockquote">
    <div id="isi">"<?php print $qMysql[2];?>"</div>
       <div id="cite">&ndash;<?=$qMysql[1]?> - <?=$qMysql[3]?></div>
  </div>
 <? }?>
</div><!--end testimonials-->
</body>
</html>

oke cukup mudah bukan. selamat mencoba

Download filenya lengkap disini

4 thoughts on “Text-slider Testimonial Menggunakan JavaScript Widget using jQuery Cycle Plugin

    keydanrara said:
    8 May 2012 at 2:33 pm

    Mantapppp…aku cobain deh..kalo ga bisa boleh nanya yaa…:)

      Faber responded:
      19 May 2012 at 12:39 pm

      Terima kasih atas komentarnya…
      Oke…

    Aditya Subawa said:
    28 July 2012 at 4:51 pm

    terima kasih scriptnya boss, sayang gak ada demonya.. ditambahin form input lebih cadas tu boss😀

      Faber responded:
      11 August 2012 at 9:01 pm

      Terimakasih atas komentarnya…
      Mungkin nanti dibuat dipikirkan boss

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s