Saturday, July 9, 2011

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:

Labels: ,

32 Comments:

At Sunday, August 7, 2011 at 9:19:00 AM GMT+7, Blogger Unknown said...

amazing :o

 
At Sunday, August 7, 2011 at 2:40:00 PM GMT+7, Blogger Bayu said...

awesome !!!

 
At Monday, August 8, 2011 at 2:01:00 AM GMT+7, Blogger Andi AF Studio said...

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

 
At Tuesday, August 9, 2011 at 3:13:00 PM GMT+7, Blogger Admin 3 said...

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

 
At Sunday, September 25, 2011 at 10:35:00 AM GMT+7, Blogger Aeferes / Al Firous said...

mantaapppp....mass

 
At Monday, November 21, 2011 at 5:29:00 AM GMT+7, Blogger newbie blogger said...

kerennn banget ni blogg :)

 
At Sunday, February 12, 2012 at 2:36:00 AM GMT+7, Anonymous Anonymous said...

coba test jalan ngga nih -__-

 
At Friday, March 9, 2012 at 7:35:00 PM GMT+7, Blogger Unknown said...

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....???

 
At Saturday, March 10, 2012 at 12:02:00 AM GMT+7, Blogger Taufik Nurrohman said...

@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

 
At Sunday, March 11, 2012 at 7:29:00 AM GMT+7, Blogger Unknown said...

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....??

 
At Sunday, March 11, 2012 at 8:28:00 AM GMT+7, Blogger Taufik Nurrohman said...

@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

 
At Tuesday, April 24, 2012 at 2:04:00 PM GMT+7, Blogger Amri Cahyadi said...

Wkwkwkwk, keren bg ...

 
At Tuesday, May 8, 2012 at 6:43:00 PM GMT+7, Blogger Unknown said...

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??

 
At Thursday, May 17, 2012 at 10:45:00 AM GMT+7, Blogger Taufik Nurrohman said...

@Luthfi All Cari di Google: http://www.google.co.id/search?q=modifikasi+tampilan+komentar+blogger

 
At Saturday, May 19, 2012 at 9:23:00 PM GMT+7, Blogger Id Bloger said...

Wahahaha keren ...

 
At Thursday, July 26, 2012 at 5:30:00 AM GMT+7, Blogger Sixrone 609 Community said...

lalu keluarnya di...

 
At Saturday, July 28, 2012 at 10:21:00 PM GMT+7, Blogger PRADANA TEKNIK AC said...

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

 
At Sunday, July 29, 2012 at 10:12:00 AM GMT+7, Blogger Taufik Nurrohman said...

Mungkin karena beda prinsip dan keyakinan hidup.

 
At Thursday, August 23, 2012 at 7:08:00 PM GMT+7, Blogger Rayen Hendra said...

ooooooooooooooo

 
At Saturday, September 1, 2012 at 7:25:00 PM GMT+7, Blogger Unknown said...

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??

 
At Sunday, September 2, 2012 at 4:10:00 PM GMT+7, Blogger Taufik Nurrohman said...

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.

 
At Sunday, September 2, 2012 at 8:33:00 PM GMT+7, Blogger Unknown said...

makasih jawabannya mas..
jadi tdak bsa yah..

 
At Saturday, October 27, 2012 at 3:58:00 PM GMT+7, Blogger tes said...

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:)

 
At Saturday, October 27, 2012 at 9:15:00 PM GMT+7, Blogger Taufik Nurrohman said...

.blok-komentar,
.comment-form {display:block}

 
At Monday, November 19, 2012 at 10:53:00 AM GMT+7, Blogger Unknown said...

Mantab Gan ane berhasil

 
At Wednesday, December 12, 2012 at 5:07:00 PM GMT+7, Blogger Unknown said...

tesst

 
At Friday, January 18, 2013 at 8:41:00 PM GMT+7, Blogger budkalon said...

test komen di postingan :)

 
At Tuesday, March 26, 2013 at 7:39:00 PM GMT+7, Blogger Irman Kurniawan said...

komen

 
At Sunday, May 12, 2013 at 9:22:00 PM GMT+7, Blogger Unknown said...

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

 
At Sunday, May 12, 2013 at 9:47:00 PM GMT+7, Blogger Kang Ismet said...

Semoga tutorial yang sudah saya buat bisa menyelesaikan masalah http://www.bloggertut.com/2012/11/mengatasi-tombol-hapus-yang-tidak.html

 
At Sunday, December 7, 2014 at 8:14:00 PM GMT+7, Blogger Tes said...

keren mas

 
At Friday, March 10, 2023 at 6:10:00 AM GMT+7, Blogger Admin said...

Hai bang, mau tanya cara agar komentar blog auto link aktif False tanpa menggunakan javascript namun masih bisa berkomentar lebih dari 1000 karakter ada nggak ya caranya?

Atau misal membedakan komentar panjang dan komentar pendek, misal:

<b:if cond='tampil komentar pendek'>
<b:eval expr='data:comment.body snipper {link: false}'/>
</b:if>
<b:if cond='tampil komentar panjang'>
<data:comment.body/>
</b:if>


Nah itu kodenya tag cond nya apa ya bang.. mohon solusinya terimakasih 🙏🏻

 

Post a Comment

<< Home