Modifikasi Comment atau Testimonial Box

Home

Tuesday, 24 June 2008 22:11

Berikut akan diberikan membuat tampilan comment atau testimonial box kebuka kalo mouse diarahin ke comment kemudian akan muncul photo atau picture yang kasih comment. Untuk hasilnya bisa dilihat seperti pada gambar.

Sebenernya sudah ada beberapa variasi modifikasi tampilan comment box, ini salah satu yang saya ketahui dan saya sukai tampilannya. Jadi kalo yang mo coba variasi lain bisa kunjungi friendstertalk.com.

1. Download kode comment_box_load klik disini. Copy kode tersebut dan paste di BAGIAN A dalam tracker.txt. Buat yang belum ngerti bisa klik disini.

2. Download kode comment_box klik disini [sory tidak saya copykan disini karena scriptnya cukup panjang]. Copy kode tersebut dan paste di BAGIAN C dalam tracker.txt.

3. Copy kode dibawah ini dan paste dalam external.css.

/*Comment Box*/
.publiccomments div div .dtd ul {
color:#FFFFFF;
overflow: hidden;
width: 420px;
height: 50px;
border: 1px solid #FFFFFF;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5; border: 1px solid #FFFFFF; -moz-border-radius: 10px;
padding: 10px;
}

.publiccomments div div .dtd ul:hover{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1; height: 100%; min-height: 100px;
border: 1px solid #FFF;
}

.publiccomments .title{
width:400px;
text-align: center;
text-color: #000000;
font-family: arial;
background:#000000;
-moz-border-radius: 10px;
padding:10px;
}

pada bagian yang berwarna kuning bisa diubah-ubah isinya tapi harus disesuaikan dengan inputnya. Jadi ada tiga langkah utama untuk meletakkan tiga macam kode yang berbeda.