Scroll Bar with Effects in Box Comments using CSS3 Transition

Memanfaatkan CSS3 transformation dengan mempermainkan opacity effect (transparency Effect) serta tinggi box menjadi salah satu kunci perubahan desain di kolom komentar. Tak banyak kode yang digunakan karena kita hanya mencoba menambah sebuah scroll bar hingga kolom komentar terbatasi ketinggiannya. Dengan membuat ketinggian kolom sebesar 260px maka apabila blog menggunakan bentuk kolom komentar yang terpasang di bawah halaman posting, ukuran ini menjadi sangat tepat. Semua bagian masih akan terlihat (seluruh box untuk menulis komentar saat belum ada komentar) ketika blog dibuka pengunjung. Apabila telah ada dua, tiga atau lebih komentar masuk, yang akan terlihat hanya sebagian, baru seteleh pengunjung menyentuh kolom maka semua bagian akan langsung terlihat dengan ketinggian 400px. Pengunjung yang akan menuliskan komentar atau melihat hanya perlu menggeser scroller di sisi kanan kolom. Sangat simple akan tetapi sangat menarik untuk di coba di blog karena efek transparansi akan membuat kolom terlihat sedikit temaram. Sentuhan cursor secara perlahan membuat kolom bertambah tinggi hingga mencapai 400px dibarengi dengan tampilan kolom yang semakin tajam. Yah ... sebuah efek sederhana tapi cukup memberi darah segar bagi blog!

Membuat bentuk seperti apa yang tersampaikan di atas cukup muda dilakukan, karena hanya perlu menambah kode CSS di atas ]]></b:skin>, kemudian klik "SAVE Templates" dan ... selesai sudah!

Kode CSS

.comments {
        opacity:0.6;
        filter:alpha(opacity=60);                
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";  
        height: 260px;
        overflow:hidden;
       -o-transition: opacity 1s 1s, height 1s 0.2s;
       -moz-transition: opacity 1s 1s, height 1s 0.2s;
       -webkit-transition: opacity 1s 1s, height 1s 0.2s;
}
.comments:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
       -ms-filter:"progid.DXImageTransform.Microsoft.Alpha(opacity=100)";
        height:400px;
        overflow:auto;
        overflow-x:hidden;
       -o-transition: opacity 1s 0.1s, height 0.6s 1s;
       -moz-transition: opacity 1s 0.1s, height 0.6s 1s;
       -webkit-transition: opacity 1s 0.1s, height 0.6s 1s;  
}

Cara Membuat

• Login ke Blogger.
• KLIK "Design/Rancangan".
• KLIK "Edit HTML".
• Cari kode ]]></b:skin>.
• Copy dan pastekan kode CSS di atasnya.
• KLIK "SAVE Templates/Simpan Templates".
• Buka Blog dan Lihat hasilnya!

Catatan/Keterangan

• Bila dari langkah di atas belum jelas, baik dalam mencari kode atau yang lain, silahkan buka Special Tutorials yang terletak di sidebar kiri. Sampeyan bisa mempelajari tentang "Cara Cepat Cari Kode HTML", "Cara Back-up Templates", "Cara Menyimpan Kode CSS, Javascript dan xHTML" serta beberapa tutorial penting lainnya.
• Untuk merubah tinggi kolom komentar saat halaman blog mulai terbuka (sebelum tersentuh cursor), silahkan rubah pada height:260px;.
• Untuk merubah tinggi kolom komentar setelah tersentuh cursor, rubah nilai pada height:400px;. Semakin bertambah nilainya maka kolom akan semakin tinggi.
• Maaf kali ini tak ada DEMO! Silahkan coba dan nikmati hasilnya. Semoga bisa memperindah blog sampeyan dan memper-irit pemakain ruang!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «