Cara Membuat Kotak Komentar Unik

Seperti janji saya yang kemarin dalam postingan Cara Buat Kotak Komentar Admin Berbeda dengan sentuhan photoshop , kali ini saya coba membahas bagaimana Cara Membuat Kotak Komentar Unik dengan tambahan background yang sudah di buat sendiri, serta untuk di terapkan di blog sobat. Bagi sobat yang belum tahu cara membuat gambar backgroud untuk di terapkan di kotak komentar blog silahkan ( baca : Cara Buat Kotak Komentar Admin Berbeda dengan sentuhan photoshop ).

Penting nich harap sobat cermati, pada dasarnya gambar hasil editan photoshop akan mengalami perubahan ukuran yang cenderung besar. seperti yang kita ketahui, gambar dengan ukuran besar apabila di letakan di blog akan mempengaruhi loading blog atau memyebabkan blog kita terasa berat. Oleh karena itu pemangkasan atau pengecilan ukuran sangat penting untuk menunjang blog kita dalam kondisi load yang cepat.

Untuk mengoptimize ukuran gambar kita bisa gunakan software baik secara online maupun offline. Di sini saya masih mempercayakan Image Optimizer untuk memperkecil ukuran gambar, yang bisa sobat akses di sini ( Image Optimizer ), sobat bisa mengecilkan ukuran gambar dan download aplikasi nya di sana.

Setelah gambar sudah selesai di pangkas ukuranya, sekarang tinggal di upload gambar tersebut ke tempat penyimpanan gambar atau foto online, disni saya menggunakan Photobucket. Uke persiapan awal sudah selesai waktunya kita melaju ke blog kesayangan sobat. Berikut adalah Cara Membuat Kotak Komentar Unik diantaranya :
1. Login ke Blogger
2. Masuk menu Rancangan/ Design => edit HTML
3. Back up tamplate untuk menghindari kesalahan fatal
4. Cecklist Expand Widget Templates
5. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atasnya
.author-comments {
Color: #0000ff;
font-size: 14;
background:url(http://i1188.photobucket.com/albums/z403/pattah121/admin-1.jpg)no-repeat;
border: 2px solid #7f7f7f;
padding: 3px;
}
warna hijau adalah warna teks atau tulisan
warna merah adalah ukuran font atau tulisan
warna biru adalah warna url gambar yang sebelumya sudah di opload di photobucket
warna merah muda adalah warna garis tepi atau border
6. Kemudian langkah selanjutnya cari kode
<data:commentPostedByMsg/>
</dt> dan tempatkan kode di bawah ini tepat di bawahnya
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
7. Lalu cari lagi kode <dd class='comment-footer'> kemudian letakan </b:if> tepat di atasnya 
8. Langkah terakhir simpan tamplate

selesai lihat apa yang terjadi, selamat kotak komentar admin di blog sobat sudah berubah, lebih menarik dan lebih unik bukan? hahhahayyyy. Cukup sekian semoga postingan Cara Membuat Kotak Komentar Unik bisa menjadi manfaat.
Previous
Next Post »

75 Komentar

Write Komentar
Kang Farhan
AUTHOR
February 4, 2012 at 8:30 PM delete

ahayyy...pertama yg comment nih saya... emang maknyus tips optimasi gambar dari abang... bila mengandalkan kompresan defaultnya blog emang bikin berat karena file besar... tips abang emang mak nyusss :)

Reply
avatar
February 4, 2012 at 9:10 PM delete

Wah muda2an yg pertamax,,,,
mantabs sob saya coba praktekkan buat begadang mlm mingguan...

happy blogging

Reply
avatar
Kang Asep
AUTHOR
February 4, 2012 at 9:27 PM delete

mantabs sob tutorialnya...

saya coba ah buat begadang malam mingguan,,,

happy weekend

Reply
avatar
February 4, 2012 at 9:34 PM delete

@Kang Asep
silahkan kang asep di coba, moga berhasil, ahahhahhayyyy

Reply
avatar
corolla78
AUTHOR
February 4, 2012 at 10:41 PM delete

mantap gn kpn2 mu di coba

Reply
avatar
February 4, 2012 at 10:49 PM delete

@corolla78
hehehhe...iya bang, selamat mencoba n moga berhasil, ahahhhayyy

Reply
avatar
February 5, 2012 at 12:00 AM delete

wah makasih sob... izin nyoba :)
Absen malam

Reply
avatar
February 5, 2012 at 12:19 AM delete

@Kang Farhan
sama2 bang, senang bisa memakyooskan abang dengan trik yang saya shere, ahhahahhayyyyy

Reply
avatar
February 5, 2012 at 1:36 AM delete

Sob, requestnya sudah saya publish tuh,,,,
Segera jemput tutorialnya .....

happy blogging

Reply
avatar
February 5, 2012 at 1:39 AM delete

@Sakahayang Kang Asep
mank kang asep sobat terbaik, saya minta langsung di kasih cepet g pakek lama bin expres... hahahhayyy langsung ke tkp bang, :)

Reply
avatar
corolla78
AUTHOR
February 5, 2012 at 6:26 AM delete

trik yang bagus ...mu ikutan nyoba.
follow balik ya..

happy blogging

Reply
avatar
February 5, 2012 at 6:28 AM delete

@corolla78
mkasih bang, silahkan di coba, moga berhasil, hahhhayyy

Reply
avatar
Windows Blog
AUTHOR
February 5, 2012 at 7:52 AM delete

iya nih, boring dengan komentar blogger yg kayak gini terus, pgen ngerubah...

Reply
avatar
February 5, 2012 at 9:19 AM delete

mantap nih sobat..? pakabar sob..saya bru bs ol nih,tp cm bentar ol nya.? sekalian post Award dari sobat.? cekibroot sob hahahayyyy

Reply
avatar
February 5, 2012 at 11:27 AM delete

@Windows Blog
dan yang pasti dengan koment blog kita berbeda dengan orang lain sudah menjadi nilai tambah tersendiri, hhahhahhayyy

Reply
avatar
February 5, 2012 at 11:49 AM delete

@MASNADY-BLOEGREEN
hehhehe... alhamdulilah baik selalu menyertai dan menaungi setiap langkah perjaanan hidup. hahhahhayyyyy

Reply
avatar
duniasharing
AUTHOR
February 5, 2012 at 1:30 PM delete

wah cakep bang hehe.. ane udah ganti warna aja nih bang, tapi blm coba pake gambar . insya allah ntr ane cobain bang, hahahay juga bang :P

Reply
avatar
February 5, 2012 at 1:40 PM delete

Wahhh...asyik nih bang...coba dulu ah buat blog dummy aku...hahahyyy

Reply
avatar
February 5, 2012 at 2:08 PM delete

@duniasharing
hhehehhe...thanks bang, moga berhasil aja dech, :)

Reply
avatar
February 5, 2012 at 2:08 PM delete

@ICAH BANJARMASIN
hehhehe... silahkan di coba, smoga berhasil bang :)

Reply
avatar
Albab
AUTHOR
February 5, 2012 at 2:45 PM delete

wah, boleh dicoba ini, biar kotak komentar pemilik jadi lebih ekslusif, hehe

Reply
avatar
February 5, 2012 at 2:49 PM delete

@Albab
bener bgt bang, silahkan di coba moga berhasil, ahahhhayyy

Reply
avatar
momod
AUTHOR
February 5, 2012 at 2:59 PM delete

jadi tambah berat ga sob loading websitenya kalo dipasang beginian?

Reply
avatar
February 5, 2012 at 3:06 PM delete

@momod
sebelum di upload di blog, hendaknya gambar di optimaze dlu bang biar g berat

Reply
avatar
sabana web
AUTHOR
February 6, 2012 at 10:11 AM delete

nitip link gan....mo jualan..hok hok hok....
pesen domain hosting murah sama ane gan...:)

Reply
avatar
February 6, 2012 at 10:57 AM delete

@sabana web
hahahhayyyy... uke2 pak, ada pikiran pingin ganti domain, tunggu tanggal mainya aja, ahahhhhayyyy

Reply
avatar
Arick's Zone
AUTHOR
February 6, 2012 at 2:31 PM delete

mantap euy...pengen nyoba tapi bingung desainnya kaya gimana dlu..hehe

Reply
avatar
February 6, 2012 at 2:59 PM delete

@Arick's Zone
desain yang sudah aja bang, trus di edit dikit, ahahhahyayyyy

Reply
avatar
February 6, 2012 at 8:10 PM delete

wah boleh nih dicoba, maksih sharing ilmunya bang...

Reply
avatar
February 6, 2012 at 8:28 PM delete

@souvenir tasbih cantik
sama2 bang moga berhasil dach bang, ahhahahhayyy

Reply
avatar
February 6, 2012 at 8:31 PM delete

bagus tutornya...kunjungi balik brow....http://pembuatandesign.blogspot.com

Reply
avatar
February 6, 2012 at 8:41 PM delete

@designer Profesional
wah ada master desaun yang koment jadi malu, hahhahhayyyy

Reply
avatar
February 7, 2012 at 12:37 AM delete

Script photoshop online sudah dipublish sob,,,
Silahkan dinikmati,,,

happy blogging

Reply
avatar
February 7, 2012 at 12:50 AM delete

@Photoshop Online
hhehhe... mkasih kang, baik bgt dech, hahhayyy

Reply
avatar
February 7, 2012 at 9:46 AM delete

@sucita
sama2 mbak moga bisa menjadi manfaat, ahahhhayyy

Reply
avatar
Anonymous
AUTHOR
February 12, 2012 at 9:19 PM delete

baguss gan mkasih yaa infonya

Reply
avatar
February 12, 2012 at 9:50 PM delete

@Anonim
sama2 bang, moga bermanfaat, hahhahayyyyy

Reply
avatar
February 15, 2012 at 10:31 AM delete

Saya sudah coba engga berhasil mas..

Reply
avatar
February 15, 2012 at 6:03 PM delete

@Abu Iram Al-Atsarymungkin ada yang salah bang dengan penempatan kodenya, coba dichack lagi :)

Reply
avatar
February 17, 2012 at 12:46 PM delete

Sob, saya sdh coba lakukan langkah2 di atas tapi pas mau cari kode ini , nda ada di kode HTML blogq. Kira2 ada solusi lainkah sob. Mohon penjelasannya.....

Reply
avatar
February 17, 2012 at 1:26 PM delete

@Share With Agung Talaga Blog
coba sobat cari kode yang hampir sama dengan kode yang di cari, caranya coba delete satu persatu kode yang di pastekan di kotak pencarian...untuk mempermudah pencarian sobar bisa tekan CTRL + F pada keyboard

Reply
avatar
Jejak Puisi
AUTHOR
February 26, 2012 at 12:08 AM delete

sipp lah kang... thanks banget atas tutorny

Reply
avatar
February 27, 2012 at 10:18 AM delete

@Jejak Puisi
sama2 sob, moga bermanfaat aja dech :)

Reply
avatar
Anonymous
AUTHOR
February 28, 2012 at 11:30 AM delete

bagus kang

Reply
avatar
Lusia Yotista
AUTHOR
February 28, 2012 at 8:11 PM delete

mantab tutornya kawan.. pengen coba nih.. terus berkarya ya

Reply
avatar
February 29, 2012 at 10:43 AM delete

@Lusia Yotista
hehe.. mkasih mbak, semoga karya usang saya bisa bermanfaat buat kalian semua, hahhahahhayyy

Reply
avatar
jam tangan
AUTHOR
March 1, 2012 at 2:26 AM delete

makasih gan..tutorialny sangat membantu

Reply
avatar
March 5, 2012 at 11:47 PM delete

@jam tangan
sama2 bang, moga bisa bermanfaat aja bang :)

Reply
avatar
March 28, 2012 at 11:11 AM delete

Makasih
tutorialnya sangat membantu

Reply
avatar
tmm999
AUTHOR
April 2, 2012 at 10:15 PM delete

Pas banget gan, tombol reply saya ga bisa jalan, rencananya mau diedit sekalian,,,

Reply
avatar
April 2, 2012 at 10:50 PM delete

@tmm999
sip bang, moga bisa bermanfaat aja bang :)

Reply
avatar
April 10, 2012 at 11:43 AM delete

Terimakasih informasinya saya sangat terbantu,sangat bermanpaat dan sukses selalu .
Salam dari pengrajin Jaket Kulit broockleather Garut

Reply
avatar
April 10, 2012 at 12:56 PM delete

@Jaket kulit broock
senang bisa membantu, jaket kulit yang menawan bang, hahahhayyy

Reply
avatar
June 28, 2012 at 6:50 PM delete

Kalo di templatenya ga ada kode dd class='comment-footer' gimana mas?
Kode /b:if di taroh sebelah mana?
Mohon pencerahannya.. :)

Reply
avatar
July 2, 2012 at 8:14 PM delete

@Rif-Qee Tryananda Rulliandi
coba cari kode yang mirip dengan kode yang di cari aja sob... :)

Reply
avatar
muhammad isra
AUTHOR
March 17, 2015 at 1:53 PM delete

terima kasih mas artikelnya... tapi tes dulu ya.. moga berhasil..

Reply
avatar
Anonymous
AUTHOR
April 2, 2015 at 10:34 AM delete

josss gan..

Reply
avatar

Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon