• Twitter
  • Facebook
  • Google+
  • Instagram
  • Youtube

Wednesday, June 26, 2013

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

16 comments:

  1. keren nih, coba di praktekkan, makasi sobat infonya.

    ReplyDelete
  2. jadi ga banyak makan ruang yah, trims sob dan happy blogging...

    ReplyDelete
  3. Keren nih keknya... Bungkus dulu sobat buat bekel ^^

    ReplyDelete
  4. sip dech sobat.. cara ini bisa menghemat ruang juga sob dan terlihat rapi... mantap dech......

    ReplyDelete
  5. dengan scroll ini tidak terlalu panjang kebawah ya sobat...

    ReplyDelete
  6. Wah... bagus juga, bs menghemat tempat dan jg waktu, g kyk punya saya, harus turun jauh ke bawa utk komentar...

    ReplyDelete
  7. mantep ni tutorialnya, makasihm om ane simpan dulu

    ReplyDelete
  8. Ijin mempraktekan dulu ya gan..

    ReplyDelete
  9. jadi lebih rapi ya sob.. thanks,
    comment back ya..

    ReplyDelete
  10. ada jg tutorial yg kotak komentarnya diluar sob..,coba cari2 di goolge..,

    jd terpisah antara kotak komentar dan isi komentar, cz klo digabung kayak gini sedikit merepotkan, andaikan klo yg komen agak bnyk tentu untuk komntar baru hrs memutar scroll mouse jauh ke bawah dan ini merepotkan.., mf ini hny saran.., happy blogging *smile

    ReplyDelete
  11. trik yang bagus sob
    semoga ilmunya bermanfaat

    ReplyDelete
  12. wah ternyata simpel ya...dibungkus dulu sob

    ReplyDelete
  13. Weh bagus nih, biar komentar gak panjang bgt kebawah kalau bnyk yg koment

    ReplyDelete
  14. ini bisa meminimalisir komentar yg banyak yah :)

    ReplyDelete
  15. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

    ReplyDelete

Anda diwajibkan membaca Privacy Policy terlebih dahulu sebelum berkomentar.

Contact

Get in touch with me


Adress/Street

12 Street West Victoria 1234 Australia

Phone number

+(12) 3456 789

Website

www.johnsmith.com