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:
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.
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:
30 Comments:
awesome !!!
By Bayu, at Sunday, August 7, 2011 at 2:40:00 PM GMT+7
ebusseeh.. bisa banget ya.. wkwkwkwk.. mantep bro
By Andi AF Studio, at Monday, August 8, 2011 at 2:01:00 AM GMT+7
Gan kalo bikin kolom komentar tersembunyi kaya blog agan nih gimana caranya, tolong ajarin dong gan, hehe..!!
Makasih..
By Admin 3, at Tuesday, August 9, 2011 at 3:13:00 PM GMT+7
mantaapppp....mass
By Aeferes / Al Firous, at Sunday, September 25, 2011 at 10:35:00 AM GMT+7
kerennn banget ni blogg :)
By newbie blogger, at Monday, November 21, 2011 at 5:29:00 AM GMT+7
coba test jalan ngga nih -__-
By Anonymous, at Sunday, February 12, 2012 at 2:36:00 AM GMT+7
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....???
By Unknown, at Friday, March 9, 2012 at 7:35:00 PM GMT+7
@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
By Taufik Nurrohman, at Saturday, March 10, 2012 at 12:02:00 AM GMT+7
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....??
By Unknown, at Sunday, March 11, 2012 at 7:29:00 AM GMT+7
@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
By Taufik Nurrohman, at Sunday, March 11, 2012 at 8:28:00 AM GMT+7
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??
By Unknown, at Tuesday, May 8, 2012 at 6:43:00 PM GMT+7
@Luthfi All Cari di Google: http://www.google.co.id/search?q=modifikasi+tampilan+komentar+blogger
By Taufik Nurrohman, at Thursday, May 17, 2012 at 10:45:00 AM GMT+7
Wahahaha keren ...
By Id Bloger, at Saturday, May 19, 2012 at 9:23:00 PM GMT+7
lalu keluarnya di...
By Sixrone 609 Community, at Thursday, July 26, 2012 at 5:30:00 AM GMT+7
sudah di terapkan!trik sakses,yang jadi pertanyaanya adalah: kenapa frame tidak bisa mengikuti komentar Thread?
By PRADANA TEKNIK AC, at Saturday, July 28, 2012 at 10:21:00 PM GMT+7
Mungkin karena beda prinsip dan keyakinan hidup.
By Taufik Nurrohman, at Sunday, July 29, 2012 at 10:12:00 AM GMT+7
ooooooooooooooo
By Rayen Hendra, at Thursday, August 23, 2012 at 7:08:00 PM GMT+7
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??
By Unknown, at Saturday, September 1, 2012 at 7:25:00 PM GMT+7
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.
By Taufik Nurrohman, at Sunday, September 2, 2012 at 4:10:00 PM GMT+7
makasih jawabannya mas..
jadi tdak bsa yah..
By Unknown, at Sunday, September 2, 2012 at 8:33:00 PM GMT+7
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:)
By tes, at Saturday, October 27, 2012 at 3:58:00 PM GMT+7
.blok-komentar,
.comment-form {display:block}
By Taufik Nurrohman, at Saturday, October 27, 2012 at 9:15:00 PM GMT+7
Mantab Gan ane berhasil
By Unknown, at Monday, November 19, 2012 at 10:53:00 AM GMT+7
tesst
By Unknown, at Wednesday, December 12, 2012 at 5:07:00 PM GMT+7
test komen di postingan :)
By budkalon, at Friday, January 18, 2013 at 8:41:00 PM GMT+7
komen
By Irman Kurniawan, at Tuesday, March 26, 2013 at 7:39:00 PM GMT+7
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
By Unknown, at Sunday, May 12, 2013 at 9:22:00 PM GMT+7
Semoga tutorial yang sudah saya buat bisa menyelesaikan masalah http://www.bloggertut.com/2012/11/mengatasi-tombol-hapus-yang-tidak.html
By Kang Ismet, at Sunday, May 12, 2013 at 9:47:00 PM GMT+7
keren mas
By Tes, at Sunday, December 7, 2014 at 8:14:00 PM GMT+7
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 🙏🏻
By Admin, at Friday, March 10, 2023 at 6:10:00 AM GMT+7
Post a Comment
<< Home