CSS Formulir Komentar untuk Blogspot

Berikut ini adalah sebuah tampilan formulir komentar yang sudah Saya obrak-abrik. Dengan memberikan tampilan yang berbeda pada formulir komentar di blogmu, tentunya akan membuat para pengunjung lebih tertarik untuk corat-coret:

CSS Formulir Komentar Blogspot

Untuk membuat tampilan formulir komentar yang luar biasa dahsyat seperti gambar di atas, kamu hanya membutuhkan dua buah langkah perombakan kecil:

Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil.

Pertama-tama, carilah sebuah elemen divisi yang tampak seperti ini:

<div class='comment-form'>

Tip: Tekan CTRL + F lalu ketik kode tersebut untuk mempermudah pencarian.

Find

Ganti kode tersebut dengan ini:

<div class='blok-komentar'>

Setelah itu gulung layarmu ke atas, dan segera temukan kode ]]></b:skin> atau </style>.

Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

.blok-komentar {
  background-color:#becdd5;
  margin-left:10px;
  text-align:left;
  width:400px;
  border:5px solid #728a97;
  padding:10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.blok-komentar:hover {background-color:#e0d1e0}

Klik Simpan Template dan lihat hasilnya pada halaman posting.

Catatan: Pengeditan tampilan maksimal untuk formulir komentar memang hanya sebatas pada pewarnaan latar saja, sedangkan untuk penerapan CSS Button dan CSS Textarea tidak bisa diterapkan di sini. Hal itu terjadi karena formulir komentar Blogger pada dasarnya hanyalah berupa iframe yang diletakkan di bawah posting.

iframe merupakan portal untuk menampilkan halaman yang sebenarnya tidak berada dalam halaman yang sedang aktif. Hampir mirip dengan televisi. Hanya saja, ketika kita melihat seorang gadis cantik di televisi, kita tidak bisa melakukan apa-apa terhadap gadis tersebut. Berbeda jika kita melihat seorang gadis cantik dalam sebuah iframe. Saat kita melihatnya di dalam iframe, maka kita bisa melakukan apa saja terhadap gadis itu. Seperti menyentuh, menabrak, bahkan sampai mengobrak-abrik.

Intinya, CSS yang dideklarasikan di halaman induk tidak akan pernah bisa mempengaruhi formulir komentar karena formulir komentar tersebut pada dasarnya memang tidak berada di halaman tersebut.

Bahkan, dengan sebuah iframe Saya juga bisa menampilkan formulir komentar di tempat yang tidak semestinya seperti ini:

31 Komentar

  • Unknown

    amazing :o

  • Unknown

    awesome !!!

  • Andi AF Studio

    ebusseeh.. bisa banget ya.. wkwkwkwk.. mantep bro

  • Admin 3

    Gan kalo bikin kolom komentar tersembunyi kaya blog agan nih gimana caranya, tolong ajarin dong gan, hehe..!!
    Makasih..

  • Unknown

    mantaapppp....mass

  • newbie blogger

    kerennn banget ni blogg :)

  • Anonim

    coba test jalan ngga nih -__-

  • Unknown

    Daerah Kekuasan Iframe Blogspot
    mas taufik...saya suka banget nih blog memberikan pelajaran gratis,tentang opsi2 dan fungsi2 scrip, jadi tambah ngerti buat saya yg blajarnya cuma otodidak..he
    Yang ingin saya tanyakan td disinggung iframe pada dasarnya hanyalah sebuah tag yang berfungsi sebagai portal Nah, daerah kekuasaan iframe nya kotak komentar blog, dari mana sampe mana mas....???

  • Taufik Nurrohman

    @ANGGA CAH PARE Iframe itu sebenarnya halaman HTML, sama dengan halaman blog. Dimulai dari <html> sampai </html>. Itulah yang membedakan antara blogspot dengan blog-blog lain. Kita tidak bisa mengatur CSS pada bagian ini karena kita tidak bisa mengontrol halaman lain yang berada di luar blog. Coba saja, apa kita bisa mengubah CSS situs Google hanya dengan memasukkannya ke dalam <iframe>?
    Daerah kekuasaan iframe... caranya sangat mudah. Coba klik kanan formulir komentar di bawah, kemudian pilih: This Frame ⇒ Show Only This Frame

  • Unknown

    wiihh...mantep kang baru ngerti aku ternyata kotak komentar, ya HTML jg....?
    dan kalo tidak salah mas pernah kasih komentar buat system of blog Formulir komentar harus tetap diupdate, karena setiap URL iframe harus menyesuaikan posting dan letak komentar. Masalahnya, kalau URL iframe tetap sama, saat kita nulis komentar di posting ini, bisa-bisa nanti hasil terbitan komentarnya keluar di posting yang lain. Setiap komentar itu kan harus ada IDnya masing-masing, jadi pasti harus tetap terload sedikit, untuk mengupdate URL iframenya saja.Dan maksud saya, saya ingin coba memodifikasi kotak komentar dengan cara dibungkus dengan efek slidshow atau efek accordion....tp bagaimana cara saya memasukan url iframe agar tidak keluar dari posting kita....??

  • Taufik Nurrohman

    @ANGGA CAH PARE Jangan berpikir terlalu rumit. Yang berubah itu cuma URLnya saja, yaitu yang ada di dalam atribut src. Tapi elemen <iframe> itu sendiri tidak akan pernah berpindah-pindah, den bentuknya akan selalu seperti ini:

    <iframe id='comment-editor' src='bagian-ini-akan-berubah-ubah' class='...' frameborder='0'></iframe>
    http://hompimpaalaihumgambreng.blogspot.com/2012/03/membuat-komentar-slide-panel-pada.html
  • Amri Cahyadi

    Wkwkwkwk, keren bg ...

  • Unknown

    itu cuman buat tampilan kotak komentarnya saja yaa kak??
    sebenarnya mau kalau bisa semuanyaa seperti blog ini..
    kalau mau dibuat semuanya tidak hanya kotak komentarnya saja tapi juga daftar komentarnya,.. itu gimana yaa??

  • Taufik Nurrohman

  • Id Bloger

    Wahahaha keren ...

  • Sixrone 609 Community

    lalu keluarnya di...

  • PRADANA TEKNIK AC

    sudah di terapkan!trik sakses,yang jadi pertanyaanya adalah: kenapa frame tidak bisa mengikuti komentar Thread?

  • Rayen Hendra

    ooooooooooooooo

  • Unknown

    mas mau nanya nih..
    apakah dgn meletakkan formulir komentar didalam posting seperti yang mas Taufik buat diatas maka komentarnya juga akan keluar di daerah posting??
    klo tdak..
    bagaimana caranya supaya komentar dapat muncul pada bagian dalam posting??

    • Taufik Nurrohman

      Pindah tag penutup pada posting ke bawah tag penutup area komentar, sehingga komentar juga akan masuk ke dalam wilayah posting. Cuma, mencari tag penutupnya itu yang tidak mungkin.

      • Unknown

        makasih jawabannya mas..
        jadi tdak bsa yah..

  • tes

    mas , saya mau bertanya ni , please reply :( saya edit template simple bawaan blogger tapi form komentar tidak ada saya ganggu . Masalahnya adalah di dalam posting kadang gak nongol form postingnya , kadang nongol sekali 2 :( pening saya mas . beri solusinya mas :'(

    terimah kasih 0:)

  • Unknown

    Mantab Gan ane berhasil

  • Unknown

    tesst

  • budkalon

    test komen di postingan :)

  • Irman Kurniawan

    komen

  • Unknown

    karena masih dalam area tentang kotak komentar saya ingin bertanya pada mas taufik cara mengatasi tombol hapus/delete yang hilang pada kotak komentar gimana mas karena saya sudah browsing kesana sini tapi kok ngak pernah ada yang posting/share tentang masalah ini

  • Unknown

    keren mas

Komentar telah ditutup.