Selamat Idul Fitri 1432 H

Mohon Maaf Lahir dan Batin. Selamat Idul Fitri, Kawan...

- YauNi.4ever

Pesan •"̮• ♈ǎυ иȋ •"̮•

Sunday, July 31, 2011

Membuat Kotak Komentar Lebih Menarik

Membuat kotak komentar menjadi lebih menarik, contoh nya dapat dilihat pada blog ini. Cara membuat meng-edit kotak komentar tersebut sangat mudah. Tidak percaya?

Alasan kenapa saya meng-edit kotak komentar menjadi lebih menarik:
- Bawaan kotak komentar blog aslinya kurang menarik/bosan dengan tampilan yang standar.
Mungkin sobat-sobat lainnya punya alasan tersendiri kenapa ingin meng-edit kotak komentar agar menjadi lebih menarik..

Ini contoh kotak komentar saya:

Kalau cursor diarahkan ke kotak komentar maka akan berubah.



Kalau sobat tertarik untuk membuat Kotak Komentar ini, langsung saja..
Langkah-langkah nya:
1. Login Blog kamu.


Klik Design/Rancangan, kemudian pilih edit HTML
2. Centang Expand Widget Template (Jangan lupa backup Template)
Tambahkan kode CSS berikut ini, diatas kode ]]></b:skin>

/* BG Kotak Komentar */
#comment-form iframe{
background:transparent ;
border:5px solid #33f;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
height:230px;
}

#comment-form iframe:hover{
background:#000; opacity:0.8; font-size:16px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;
border:5px solid #8086FE;
}
<-- BG Kotak Komentar END -->
3. Selanjutnya cari kode yang agak mirip seperti:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>

4. Kemudian pastekan kode <div id='comment-form'> dan </div> diantara kode tadi sehingga menjadi:
<div id='comment-form'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
</div>

5. Simpan Template/SAVE TEMPLATE.


Jika kamu mempunyai kendala/masalah saat mengikuti cara ini.. Jangan malu ataupun sungkan untuk meninggalkan komen dibawah.


Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!

2 comments:

Anonymous said...

mantap gan.. langsung praktek en sukses.
tutornya mudah dipahami.

thank gan.

YauNi said...

@Anonymous
Okeh., sama-sama. Seneng bisa membantu. ^_^

Post a Comment

Silahkan tinggalkan komentar sebagai respon atau untuk bertanya.
Jangan SPAM ya, No SARA, No P0RNo!
Mohon tidak meninggalkan link di dalam comments.
Komentar berisi LINK & tidak sesuai judul akan segera dihapus!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Template by Premium Blogger Themes | Modified and Enhanced by YauNi
Related Posts Plugin for WordPress, Blogger...