Cara Memberi Scroll pada Area Komentar Blog

          

        Scroll merupakan suatu fungsi yang dapat digunakan untuk menghemat area suatu bagian dari blog. Jadi, dengan memanfaatkan fungsi scroll ini. Panjang suatu bagian dapat di perkecil tetapi isinya masih dapat kita lihat dengan cara menggeser tombol scroll yang biasanya terletak di kanan pada bagian tersebut. Nah, scroll ini dapat kita pasang pada area komentar. Karena biasanya, tidak sedikit yang berkomentar pada artikel kita. Sehingga membuat halaman posting kita lebih panjang. Tetapi setelah memberi fungsi scroll ini pada komentar, panjang halaman posting karena banyak komentar akan dapat di atasi.

          Cara menambahkan scroll di bagian komentar tidak lah sulit, kita hanya perlu menambahkan sedikit kode CSS pada blog kita. Kode CSS nya pun tidaklah begitu panjang, jadi bisa diketik langsung. Nah, berikut ini kode CSS yang perlu anda tambahkan untuk memberi fungsi scroll di area komentar pada blog kita .

background-color: white;

border-bottom: 3px solid #06396C;

border-left: 20px solid #66B0F9;

border-right: 3px solid #06396C;

border-top: 3px solid #06396C;  

height: 360px;

overflow: auto;

padding: 10px;

width: 720px;

kode diatas tersebut silahkan anda tambahkan pada bagian bagian kode CSS komentar. Masing-masing template mempunyai letak css comment yang berbeda-beda. Silahkan saja cari kode tersebut di blog anda lalu sisipkan kode pertama di dalam tanda { }. Sebagai kata kunci untuk mencari kode css komentar coba saja ketikan comments di kotak pencarian nya. 

Cara diatas, hanya memberi scroll biasa pada komentar blog anda. Untuk menambahkan efek yang lebih keren dapat di kombinasikan dengan kode CSS shadow untuk memberi efek bayangan pada kotak scroll yang telah di buat tadi atau dengan kode CSS border untuk memberi efek garis border yang unik pada kotak scroll tersebut.

            Nah, dengan ditambahkan kode border dan kode Shadow diatas, kotak scrollnya jadi tambah keren kan. Anda bisa atur sendiri bagaimana keren nya. Untuk Kumpulan kode CSS Border dan Daftar Lengkap kode CSS shadow nya bisa anda lihat di postingan saya sebelumnya.

            Semoga Bermanfaat

            #salam terhangat dari Mr.DHI

Read More

Daftar Lengkap Kode CSS Shadow atau bayangan

            Efek Shadow merupakan sebuah efek tampilan suatu objek yang memiliki bayangan di belakang objek tersebut.  dengan menambahkan efek ini di blog anda, mungkin bisa membuat tampilan blog anda lebih terlihat indah dan semarak. Membuat shadow effect ini, dibuat dengan menggunakan kode CSS. Oleh karena itu, Yang perlu anda pahami dalam membuat efek bayangan ini adalah beberapa kode CSS.

            Pada intinya, kode CSS untuk efek shadow sederhana sekali. Ada tiga property CSS yang digunakan dalam membuat Efek bayangan ini, yaitu :

-webkit-box-shadow: 5px 5px 10px #FF0000;          ( untuk browser safari)

-moz-box-shadow :5px 5px 10px #FF0000;              (untuk browser mozilla)

box-shadow: 5px 5px 10px #FF0000;

keterangannya, pada nilai 5pxpertama itu adalah ukuran offset sumbu-X, 5px kedua ukuran offset sumbu-Y, dan 10pxuntuk mengatur tingkat blur shadow. Secara default, kode diatas membuat efek shadow diluar objek. tapi Anda juga bisa menambahkan value ��inset�� untuk membuat efek bayangan didalam objek.

-webkit-box-shadow: inset10px 5px 7px #FF0000;
-moz-box-shadow:inset10px 5px 7px #FF0000;
box-shadow:inset10px 5px 7px #FF0000;

ketiga properti tersebut digunakan karena tidak semua orang menggunakan browser yang sama. Hal itu bermaksud agar tampilan nya di setiap browser akan tetap sama. Nah, dibawah ini adalah beberapa macam Tampilan Shadow beserta kode-kode CSS nya yang mungkin bisa anda terapkan di blog anda untuk mempercantik blog anda.

-webkit-box-shadow: 10px 5px 7px #FF0000;
-moz-box-shadow: 10px 5px 7px #FF0000;
box-shadow: 10px 5px 7px #FF0000;

-webkit-box-shadow: 10px 0 7px #FF0000;
-moz-box-shadow: 10px 0 7px #FF0000;
box-shadow: 10px 0 7px #FF0000;

-webkit-box-shadow: 0 0 7px #FF0000;
-moz-box-shadow: 0 0 7px #FF0000;
box-shadow: 0 0 7px #FF0000;

-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
box-shadow: 0 0 20px #FF0000;

-webkit-box-shadow: 10px 5px 0 #FF0000;
-moz-box-shadow: 10px 5px 0 #FF0000;
box-shadow: 10px 5px 0 #FF0000;

-webkit-box-shadow: -10px -5px 0 #FF0000;
-moz-box-shadow: -10px -5px 0 #FF0000;
box-shadow: -10px -5px 0 #FF0000;

-webkit-box-shadow: inset 10px 5px 7px #FF0000;
-moz-box-shadow: inset 10px 5px 7px #FF0000;
box-shadow: inset 10px 5px 7px #FF0000;

-webkit-box-shadow: inset 0 10px 7px #FF0000;
-moz-box-shadow: inset 0 10px 7px #FF0000;
box-shadow: inset 0 10px 7px #FF0000;

-webkit-box-shadow: inset 10px 0 7px #FF0000;
-moz-box-shadow: inset 10px 0 7px #FF0000;
box-shadow: inset 10px 0 7px #FF0000;

-webkit-box-shadow: inset 0 0 20px #FF0000;

-moz-box-shadow: inset 0 0 20px #FF0000; 

box-shadow: inset 0 0 20px #FF0000;

-webkit-box-shadow: inset 10px 5px 0 #FF0000;
-moz-box-shadow: inset 10px 5px 0 #FF0000;
box-shadow: inset 10px 5px 0 #FF0000;

-webkit-box-shadow: inset -10px -5px 0 #FF0000;
-moz-box-shadow: inset -10px -5px 0 #FF0000;
box-shadow: inset -10px -5px 0 #FF0000;

Selamat Mencoba !!!
#salam terhangat dari Mr.DHI

Tulisan ini terinspirasi dari : http://azzam10.blogspot.com/2012/08/membuat-efek-bayangan-shadow-dengan-css.html

Read More