Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

64
Tgl. 01 Juli 2012

Mempercantik Kolom Kotak Komentar Standar Pada Blogspot Dengan Bingkai Dan Warna Latar

Apabila mencermati model kolom kotak komentar pada setiap blog yang kita kunjungi, maka tidak jarang kita akan mendapati kolom kotak komen...

Modifikasi Kolom Komentar Blogger
Apabila mencermati model kolom kotak komentar pada setiap blog yang kita kunjungi, maka tidak jarang kita akan mendapati kolom kotak komentar yang telah dimodifikasi dengan model kustom sehingga tampilannya menjadi lebih menarik bila dibandingkan dengan tampilan kolom kotak komentar yang diberikan oleh Blogger (termasuk kolom kotak komentar yang saya gunakan pada blog ini). Namun tahukah Anda, bahwasanya kita juga dapat melakukan modifikasi model kolom kotak komentar standar yang diberikan oleh Blogger, sehingga tampilannya tidak kalah menarik apabila dibandingkan dengan model kustom.

Seperti yang kita tahu, bahwasanya selain dengan menggunakan model kustom untuk mempercantik tampilan kolom komentar, selama ini yang sering dilakukan hanyalah sebatas menambahkan scroll untuk kolom komentar sehingga jika jumlah komentar cukup banyak, maka tampilan halaman tidak terlalu panjang. Namun demikian tidak jarang pula pengelola blog yang kurang memperhatikan tampilan kotak komentar (membiarkan apa adanya sesuai dengan desain tampilan yang diberikan oleh Blogger). Padahal dengan hanya menambahkan sedikit kode CSS tertentu ke dalam template, maka desain tampilan kolom kotak komentar akan menjadi lebih menarik (seperti halnya bila kita menggunakan model kustom).

Nah, untuk keperluan ini maka terlebih dulu yang perlu diperhatikan adalah setelan untuk “Pos dan Komentar’ pada blog yang Anda kelola, karena teknik ini hanya dapat diterapkan dalam setelan ‘Tersemat’. Sehingga jika saat ini Anda belum menggunakan setelan ini untuk ‘Pos dan Komentar’ blog yang Anda kelola, maka ubah terlebih dulu setelanya dengan cara klik menu ‘Setelan>Pos dan Komentar> kemudian pada pilihan ‘Lokasi Komentar’ gunakan pilihan ‘Tersemat’, seperti yang tampak pada gambar di bawah ini.
Lokasi Komentar Tersemat
Sumber gambar: blogger.com
Apabila setelan untuk lokasi komentar telah diubah menjadi ‘Tersemat’, maka langkah berikutnya buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan’. Kemudian untuk mempermudah proses, cari kode ]]></b:skin> dan sisipkan kode berikut ini tepat di atasnya.
/*--------------------------------------------------------------
Kustomisasi Kolom Komentar Blogspot
Oleh: Semar Bingung
Blog: http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.comments {
  padding: 4px;
  background: #eeeeee;
  border: 1px solid #999999;
  -moz-border-radius: 5px 5px 5px 5px;
}

.comments-content .comment-thread {
  padding: 4px;
  background: #ffffff;
  border: 1px solid #cccccc;
}

.comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;
}

.comments .comments-content .comment:first-child {
  padding-top: 0px;
}

.comments .avatar-image-container {
  height: 36px;
  padding-left: 4px;
  background: #ffffff;
  border: 1px solid #cccccc; 
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comment-block {
  padding-top: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  background: #fcfcfc;
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comments-content .inline-thread {
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .comments-content .comment-replies {
  margin-left: 48px;
}

.comments .comment .comment-actions a {
  margin-right: 4px;
  padding: 2px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
  -moz-border-radius: 3px 3px 3px 3px;
}

.comments .continue a {
  padding: 2px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
}

.comments .comments-content .datetime {
  float: right;
  margin-right: 4px;
}

.comments .comments-content .icon.blog-author {
  float: right;
  margin-right: 3px;
}

.comment-form {
  max-width: 100%;
  width: 100%;
}


Setelah kode tersebut disisipkan dalam template, langkah berikutnya simpan template Anda sehingga akhirnya model kolom komentar standar Blogger tampilannya akan berubah menjadi seperti yang tampak pada gambar di bawah ini.
Model Kolom Komentar Blogger Yang Telah Dimodifikasi

Kemudian apabila Anda ingin menyesuaikan warna garis dan warna latar yang digunakan pada kolom komentar tersebut dengan desain halaman blog yang Anda kelola, maka Anda tinggal mengganti kode warna yang terdapat pada kode border: dan background:, sebagai contoh misalnya yang terdapat dalam kode border: 1px solid #999999; dan background: #eeeeee;.

Semoga berguna dan bermanfaat.
Salam.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 64 komentar pada artikel ini ▶
05/07/12 09.14 O

bagus nih tipsnya...akan saya coba, jangan lupa kunjungi blogku yah ..trims

13/07/12 07.44 O

Terima kasih gan artikelnya, lagi butuh nih buat referensi

15/07/12 14.19 O

makasih sob .. saya berhasil ..

Anonim
15/07/12 23.49 O

@All: Sama-sama.

Silakan apabila ingin mencoba mengimplementasikannya. :)

Nice info..., kunjungan..., mampir ke http://plustutorial.blogspot.com/ dan http://yuzsite.blogspot.com/ , Thanks...

04/08/12 19.11 O

sukses saya praktekan gan... :D cara yang simpel tapi langsung sukses...

Anonim
05/08/12 02.45 O

@CERITA-CERITAIya Sob. Kebetulan tadi saya juga lihat langsung ke blog yang Sobat kelola. Dan syukurlah apabila dapat diimplementasikan. :)

Anonim
05/08/12 02.49 O

@Yusril IbnuSaya udah kunjung ke sana Sob. Tapi kolom komentar sepertinya dinonaktifkan ya? Karena setelah saya buka artikel, kolom komentarnya tidak muncul sama sekali.

@eltelu ya ??, disaya gak kok ?? kenapa ya ?? , tapi thanks sudah mampir, bila berkenan mari kita bertukar link and follow :D , btw blog ini keren dan gesit.. :D

Anonim
22/08/12 18.35 O

Saya ingin bertanya, bagaimana mendesain comment form blogspot? Kalau mendesain komentarnya saya sudah paham. Terima kasih :)


25/08/12 03.07 O

@Yusril IbnuTerimakasih Sob. Silakan pasang link blog ini bila Sobat bermaksud untuk tukar link. Dan apabila telah terpasang, silakan Sobat beritahu saya agar secepatnya bisa memasang balik link blog Sobat. :)

25/08/12 03.08 O

@ifaniqbal.comUntuk mendesain comment form, jujur saja saya belum pernah mencobanya Sob. Jadi mohon maaf apabila untuk saat ini saya belum dapat membantu memberikan solusi atas pertanyaan yang Sobat ajukan.

Salam.

03/09/12 20.32 O

Wah ini yang saya cari cari sob.
ternyata ada di blog sahabat terimaksih ya sobat.

04/09/12 01.57 O

@Herman sahSama-sama Sobat. Terimakasih balik atas kunjungan dan berkenannya memberikan komentar dalam artikel ini.

11/09/12 16.57 O

salam kenal.
Betul-betul mantap triknya bro, saya dari tadi pusing cari modifikasi kommen yang cocok dengan template blog saya, untungnya saya dapat yang benar-benar pas disini, thank's so much, and sukses selalu.
salam.

12/09/12 05.24 O

@Ahmad BakriTerimakasih dan salam kenal balik Sobat.

Saya turut senang apabila artikel ini dapat berguna dan bermanfaat bagi Sobat.

21/10/12 14.20 O

MANTAB... dicoba langsung cocok dengan template saya. T O P dah eltelu.
salam blogger

21/10/12 14.27 O

oia, kenapa di template saya kok muncul kata 'Tambahkan komentar' di bagian paling bawah sendiri...
mohon pencerahannya dan bantuannya, untuk lebih jelasnya silahkan kunjungi di rumahexcel dot com

21/10/12 17.02 O

@Anto RamanaTerimakasih Sobat.

Oh ya, di bagian paling bawah muncul kata 'Tambahkan komentar', karena secara default setelan komentar 'Tersemat' memang akan menjadikan desan tampilan kolom komentar menjadi seperti itu. :)

26/10/12 07.26 O

wah bagus nih gan thanks buat infonya

26/10/12 12.39 O

@hot suryaSama-sama Sobat. :)

02/11/12 15.56 O

waw sangat sangat menarik dan bagus blognya sob,dan jangan lupa yah berkunjung kembali
:D

03/11/12 10.57 O

@suhendarOke... Terimakasih Sobat.

Blog yang Sobat kelola posting artikelnya juga keren-keren kok.

03/11/12 19.48 O

kode template yg lama di hapus gak mas..?

04/11/12 00.04 O

@mariyanto widodoSobat tinggal mengerjakannya sesuai dengan langkah-langkah yang terdapat dalam artikel tersebut dan tidak perlu melakukan penghapusan kode apapun. :)

07/11/12 11.08 O

Keren mas, lama aku nyari kolom komentar kayak gini, makasih ya mas.
Salam dari Manado.

07/11/12 13.26 O

@manadoparabolaTerimakasih dan salam balik Sobat. :)

17/11/12 12.37 O

Selalu mantap Postingya .. Thanks sob ..
Salam ..

18/11/12 21.28 O

@bu punsuSama-sama Sobat.

tersemat apaan boss ??

29/11/12 13.29 O

@====startzoom=======Tersemat sama dengan Embedded

11/12/12 08.56 O

Makasih sob atas tutorialnya , mantap nih tips

Anonim
12/12/12 15.22 O

mantap nih.. makasih ya tipsnya gan..
d tunggu kunjungan baliknya

14/12/12 16.31 O

@Muhamad Hasan Ali Abdurohman MasSama-sama dan terimakasih balik Sobat. :)

14/12/12 17.25 O

@desainfarhanOke Sobat. :)

26/12/12 09.49 O

Maaf mazz,,, kok qk fungsi ya di blog ku...udah tak coba 6x...tetap qk bisa

27/12/12 02.27 O

@JokoRowoTlogoRejoKalau boleh tahu di blog yang mana ya Sob? Sebab ternyata blog yang Sobat kelola banyak banget.

Anonim
05/01/13 14.45 O

saya bookmark artikel nya nya mas, dan jika boleh, saya terapkan dan saya modifikasi untuk kemudian saya publikasikan ulang, insya Allah dengan anchor link ke artikel ini tentunya, semoga tidak keberatan.

10/01/13 02.09 O

@theseoartSilakan Sob. :)

01/02/13 07.44 O

Mau tanya kak, di dalam template blog kita kan juga ada tuh kede yang *//Comment...dst. Itu perlu dihapus gak? siapa tau kode yang kakak kasih fungsinya sama. dari pada gak berguna mending yang lama di hapus kan...

01/02/13 08.13 O

@Yudi SutopoKode CSS sebelumnya (yang sudah ada) tidak usah dihapus, Sob.

Jadi Sobat tinggal menambahkan kode CSS di atas dan kemudian menyimpannya.

15/02/13 08.38 O

dicoba dulu gan, keren nic lo dipasang diblog

15/02/13 08.55 O

@fajar budimanSilakan Sob. :)

25/02/13 00.37 O

ya lebih bagus ada ng?

02/03/13 09.52 O

@Garda CntBila Sobat menghendaki desain yang lebih bagus, maka silakan dilakukan kustomisasi pada CSS di atas sesuai dengan desain yang Sobat kehendaki. :)

29/03/13 13.56 O

Bagus Tips nya mas. apa lagi seperti saya yang masih newbie.

Jangan Lupa Berkunjung Diblog saya juga ya mas

11/04/13 08.18 O

@adi muhammadOke, terimakasih Sob. :)

16/06/13 13.39 O

Bisa dicoba nih .. hihihihi
Kunjungi blog baru saya ya mas :)

16/06/13 19.34 O

@Fahmi Hardian SuhermanOke, saya pasti akan berkunjung ke blog Sobat. :)

25/06/13 10.04 O

Artikel yang Keren nikh Mas..Idzin di coba Terima kasih yah Mas ELTELU
Salam sukses..kapan-kapan mampir juga di blog saya kalau ada waktu karristaent.blogspot.com

25/06/13 18.57 O

Artikel yang bagus Mas berguna sekali buat saya yang masih pemula di blogging.terima kasih atas artikel dan ilmu nya salam kenal...Buat Mas ADMIN Dan Teman semua..kunjungi juga blog saya kalau ada waktu. http://karristaent.blogspot.com

26/06/13 06.27 O

@Saud KarrystaOke, terimakasih Sobat. Silakan bila ingin mencoba menerapkan teknik yang saya uraikan dalam artikel di atas. :)

BERHASILL..... dan cocok untuk template blog saya...........

30/06/13 00.15 O

@inspirasi ,dedikasiSyukurlah bila demikian Sob. :)

30/06/13 00.15 O

@Saud KarrystaTerimakasih Sobat.

15/08/13 09.08 O

makasih gan salam kenal....mampir ea

15/08/13 22.06 O

@adi purnamaTerimakasih dan salam kenal balik Sob.

Tapi ngomong-ngomong, saya mesti mampir ke mana nih. Sebab pada info profil Google Plus Sobat tidak saya temukan informasi apapun tentang blog yang Sobat kelola. Disamping itu Sobat juga belum pernah berbagi apapun dalam Google Plus sehingga akhirnya saya pun tidak dapat mengetahui tautan yang berhubungan dengan postingan Sobat.

29/08/13 21.31 O

I Like.!!
dan f0r Artikel nye Nice g0od end like daah..
thank u.!

Hormat Kami:
http://blankblanko.blogspot.com

02/09/13 10.13 O

@Blank BlankTerimakasih dan semoga dapat diambil guna serta manfaatnya Sob.

11/11/13 17.28 O

Wah, mantab Sob. Izin coba pasang. Terima kasih sharenya.

12/11/13 12.42 O

@Uda AwakSilakan Sob. Sama-sama dan terimakasih juga atas pos komentarnya.

Anonim
16/12/13 21.08 O

Pak diblog saya kok tidak bisa ? freedownload-movi.blogspot.com,mohon pencerahannya.

thanks
Hairi

17/12/13 01.53 O

@Hairi JrHanya berlaku pada template standar Sob. Jadi tentu saja tidak bisa karena yang Sobat gunakan adalah custom template.

25/01/14 03.24 O

manthap

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog