Membuat Style Pengantar Komentar

Pengantar komentar adalah kata-kata yang dipasang sebelum form komentar. Ngerti maksudnya kan? kalau bingung yang dimaksud pengantar komentar coba lihat form komentar dibawah artikel ini, sebelum kotak dimana sobat blogger bisa membuat komentar, ada kumpulan kata-kata yang memberi petunjuk bagaimana berkomentar, itulah maksudnya.

Semua pasti tahu bagaimana membuat pengantar komentar pada blogspot. Karena memang sudah disediakan dalam dashboard blogger.com dibagian pengaturan. Tinggal mengisinya dan tampillah pengantar komentar yang sudah dimasukkan. Tapi sayangnya fasilitas ini hanya memperbolehkan memasukkan text dan sedikit tag HTML saja sehingga tag style tidak akan bisa diterima.

Perhatikan keterangan dibawah kotak pesan formulir komentar, tag HTML yang diterima terbatas pada bold, italics dan anchor. Jika sobat blogger menambahkan tag tersebut dalam pesan komentar sobat blogger maka style akan mengikuti pengaturan pada area content-wrapper atau main-wrapper. Bagaimana jika kita ingin tampilan yang berbeda? Sebagai contoh coba sobatblogger perhatikan pesan komentar yang ada di blog ateonsoft. Coba juga bagaimana efek pada anchor text-nya (link yang ada di pesan komentar) lain dengan yang ada di content bukan? itu karena pengaturannya memang saya lainkan. Contoh style komentar yg ada di ateonsoft.com:

Terlihat bahwa Pengantar kotak komentar nya dapat di sisipkan gambar, diberi marquee dan link, yang jika tidak diberi style CSS maka hal ini tidak bisa dibuat. Untuk lebih jelasnya silahkan buka ateonsoft.com.

Caranya adalah dengan memaksa style dari CSS dan sedikit mengedit template pada kode XML-nya. Sebenarnya bagi yang memiliki pengetahuan tentang HTML dan CSS bukan suatu yang sulit, tapi bagi yang belum tahu silahkan ikuti petunjuk saya dibawah ini, dan tentunya saya
gunakan style pada blog ini. Jadi kalau kurang sesuai dengan template sobat blogger silahkan saja diedit. Mari kita mulai..

Pada edit template blogger silahkan dicari kode ]]></b:skin> dan kalau sudah
ketemu letakkan kode dibawah ini diatasnya. O iya jangan lupa centang pilihan Expand Widget Templates

/*-- Form Comments style by ateonsoft.com--*/

#pra-comment{clear:both;padding:10px;font:normal 9px
sans-serif;text-align:justify;border:1px solid #EFF0F1;margin:0 10px 5px 0;
line-height: 1.1em;}

#pra-comment a{ font-weight:bold;}

#pra-comment a:hover{letter-spacing:1px; text-decoration:none;}

#pra-comment b{color: #000000;}

#pra-comment em b{Color:#ff0000;}

Kalau sudah silahkan cari barisan kode seperti dibawah ini:

<b:includable id='comment-form' var='post'>

<div class='comment-form'>

<a name='comment-form'/>

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

<p><data:blogCommentMessage/></p>

<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0'
height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

<data:post.iframeColorizer/>

</div>

</b:includable>

Bisa jadi barisan kode pada template sobat blogger tidak sama persis dengan diatas, tapi yang perlu diperhatikan hanya kode berwarna merah saja. Kalau sudah ketemu silahkan kode berwarna merah diganti dengan kode dibawah ini:

<div id='pra-comment'><data:blogCommentMessage/></div>

Sekarang simpan template sobat blogger. Sampai disini Sebenarnya sudah selesai. Hanya tinggal memasukkan pesan komentar pada menu pengaturan-komentar (lihat gambar diatas). Agar maksimal pengaturan yang sudah dibuat coba sobat blogger masukkan text yang dilengkapi tag HTML dibawah ini pada pesan formulir komentar sobat blogger, edit belakangan saja yang penting tahu akibat efeknya dulu.

Silahkan menuliskan komentar anda pada opsi <b>Google/Blogger</b><br />untuk anda yang memiliki akun <b>Google/Blogger</b>.<br /><br />Silahkan pilih account yang sesuai dengan <b>blog/website</b> anda<br />(<b>LiveJournal, WordPress, TypePad, AIM</b>).<br /><br />Pada opsi <b>OpenID</b> silahkan masukkan <b>URL blog/website</b> anda pada kotak<br />yang tersedia.<br /><br />Atau anda bisa memilih opsi <b>Nama/URL</b>, lalu tulis nama anda dan <b>URL<br />blog/website</b> anda pada kotak yang tersedia.<br /><br /><br />Jika anda tidak punya <b>blog/website</b>, kolom <b>URL</b> boleh dikosongi.<br /><br /><br />Gunakan opsi '<em><b>Anonim</b></em>' jika anda tidak ingin mempublikasikan data anda. (<em><b>sangat tidak<br />disarankan</b></em>). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik<br />anda gunakan pilihan dibawah ini: <br /><br /><br />Jika ingin komentar anda tidak dipublikasi, silahkan <a title="Kirim pesan pada ateonsoft.com" href="http://www.ateonsoft.com/2008/01/email-me.html">klik<br />disini</a><br /><br />Masih kesulitan juga membuat<br />komentar? silahkan <a title="Ke Buku Tamu" href="http://www.ateonsoft.com/2008/08/guest-book-shoutmix.html">klik<br />disini</a><br /> <br /> <br />

Sumber: ateonsoft.com

read more “Membuat Style Pengantar Komentar”

Mempercantik Kotak Komentar

Cara mempercantik area kotak komentar ini saya dapatkan dari blog milik Jaloe (Catalog-Tutorial). Oke kita langsung olah TKP saja:
Kode untuk mengatur kotak komentar di template minima ada di tag :

<div class="comment-form">

kotak komentar

</div>



Oleh karena itu, untuk mempercantik kotak komentar tersebut saya tambahkan kode CSS.

Cari kode]]></b:skin>. Copy kode dibawah ini diatas kode]]></b:skin>

.comment-form {

background:#DCC4DE;

border:5px solid #8C748F;

}

Untuk mengatur warna background silahkan ganti background sesuai warna selera sobat blogger, atau atur border sesuai selera sobat blogger (silahkan diotak atik sendiri). Hasilnya seperti ini

Jika tampilan di sobat blogger seperti ini

Kalau kita perhatikan tanda panah, maka yang terlihat:

Pertama kotak text area yang menempel pada border dan kedua background warna yang jaraknya terlalu dekat dengan tulisan bawah. Keliatannya kurang sedap di pandang dan tidak enak di lihat. Maka solusinya saya menambahkan kode yang mengatur jarak antara text area dan background, yakni sebuah margin dan padding.

.comment-form {

background:#DCC4DE;

border:5px solid #8C748F;

margin:0 10px 20px 10px;

padding:0 0 0 15px;

}

karena kotak komentar bisa kita tambahkan sebuah background warna maka kita pun bisa menambahkan background berupa gambar seperti di bawah ini

Caranya seperti ini:

.comment-form {



background:transparent url

(http://lh4.ggpht.com/jaloee/SJ3vZ2an3LI/

AAAAAAAACYY/pIG3okitsFY/kataku_form02.jpg)

no-repeat left top;

border:0px solid #8C748F;

margin:10px 10px 20px 10px;

padding:65px 0 0 20px;

}

Sumber: Jaloe

read more “Mempercantik Kotak Komentar”

Membuat Komentar Pemilik Blog Beda (2)

Sebenarnya sangat banyak variasi kode pada template karena memang terserah pada pembuatnya mau menggunakan kode apa. Hanya saja pasti ada bagian yang sama pada tiap template blogspot sebab kode itu adalah kode pemanggilan data yang ada di database blogger. Oleh karena itu kode itulah yang harus dicari. Begitu juga dengan komentar. Nah bagian isi komentar pada kode XML blogger (template) selalu menggunakan kode dibawah ini, kode inilah yang harus dicari.

<data:comment.body/>

Silahkan cari dengan kode tadi. Jika belum disisipkan kode untuk tampilan beda komentar pemilik, biasanya kode tersebut muncul 2 kali.

Baik kita lanjutkan, setelah kode diatas ketemu perhatikan barisan kode disekitarnya (atas dan bawah kode tadi), karena bisa bervariasi. Saya tidak mungkin menuliskan disini semua variasi kode yang mungkin dipakai, tapi saya contohkan dari penggunaan variasi kode yang berbeda dengan template blogspot pada umumnya. Perhatikan barisan kode dibawah ini:

<b:loop values='data:post.comments' var='comment'>

<a expr:name='"comment-" + data:comment.id'/>

<div class='comment-top'>

<div class='message-by'>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<b:include data='comment' name='commentDeleteIcon'/>

</div>

<div class='comment-bottom'>

<div class='message-entry'>

<b:if cond='data:comment.isDeleted'>

<em><data:comment.body/></em>

<b:else/>

<p><data:comment.body/></p>

</b:if>

<div class='message-time'><span>

<data:comment.timestamp/>

</span></div>

</div>

</div>

</div>

</b:loop>

Saya tahu ini akan sulit dimengerti, tapi saya tidak punya cara lain menjelaskan jika anda tidak memiliki dasar pengetahuan HTML tentu akan sulit sekali memahami penjelasan saya ini. Hanya saja jika memang template anda memiliki barisan kode seperti diatas, maka tinggal disisipkan kode warna hijau termasuk merah yang ada didalamnya sehingga menjadi seperti dibawah ini:

<b:loop values='data:post.comments' var='comment'>

<a expr:name='"comment-" + data:comment.id'/>

<div class='comment-top'>

<div class='message-by'>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<b:include data='comment' name='commentDeleteIcon'/>

</div>

<div class='comment-bottom'>

<b:if cond='data:comment.author == data:post.author'>

<div class='komentarku-Body'>

<p><data:comment.body/></p>


<div class='message-time'><span>

<data:comment.timestamp/>

</span></div>

</div>

<b:else/>

<div class='message-entry'>

<b:if cond='data:comment.isDeleted'>

<em><data:comment.body/></em>

<b:else/>

<p><data:comment.body/></p>

</b:if>

<div class='message-time'><span>

<data:comment.timestamp/>

</span></div>

</div>

</b:if>

</div>

</div>

</b:loop>

Sama seperti pada template biasa maka perlu juga ditambahkan diatas kode ]]></b:skin> kode stylenya. Masukkan kode dibawah ini diatas kode ]]></b:skin>

.komentarku-Body {background:
#000000; color:#ffffff; font-family:arial,
"verdana";text-align:justify; margin:0;padding:0 0 0 25px;}

Sumber: ateonsoft.com

read more “Membuat Komentar Pemilik Blog Beda (2)”

Memasang Kalender di Blog

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan, seperti di situs http://www.free-blog-content.com. Silahkan coba sobat kunjungi situs tersebut ! kalender yang di sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang sobat blogger sukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti keperluan di simpan di blog.

1. Copy kode yang ada pada kolom To get this Calendar dalam notepad

2. Sign in di blogger dengan id sobat

3. Klik menu Tata Letak

4. Klik menu Elemen Halaman

5. Klik Tambah Gadget pilih widget HTML/JavaScript. Setelah itu
paste kode HTML yang di copy tadi. Selesai deh.. :)



Happy Blogging!!

read more “Memasang Kalender di Blog”

Membuat Komentar Pemilik Blog Beda

Membedakan tampilan komentar pemilik dengan pengujung atau sering disebut Author Comment Highlight tentu akan mempermudah pengunjung lain untuk melihat mana komentar dari pengunjung blog dan mana komentar pemilik blog.

Pertama:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand
Template Widget

silahkan cari barisan kode seperti dibawah ini:

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

Jika sudah ketemu silahkan sisipkan kode warna merah seperti dibawah ini:

<b:if cond='data:comment.author ==
data:post.author'>

<dd class='komentarku-Body'>

<p><data:comment.body/></p>

</dd>

<b:else/>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

</b:if>

Kalau sudah disisipkan cari lagi kode dibagian atas yaitu kode ]]></b:skin> kalau sudah ketemu silahkan letakkan kode dibawah ini diatasnya.

.komentarku-Body {background: #000000;
color:#ffffff; font-family:arial,
"verdana";text-align:justify; margin:0;padding:0 0 0 25px;}

Pada kode diatas saya atur warna dasar hitam dan tulisan warna text putih. Silahkan disesuaikan warna pada kode yang saya tandai merah

read more “Membuat Komentar Pemilik Blog Beda”

Membuat Recent Comments pada Blogger

Recent comments atau komentar terbaru fungsinya adalah supaya kita bisa dengan mudah mengetahui siapa yang baru saja memberikan komentar pada blog kita dan di postingan mana mereka berkomentar.

Beginilah cara membuat Recent Comments (Komentar Terbaru):

CARA PERTAMA (Dengan menggunakan feed komentar)




- Buka Dashboard blog sobat blogger

- Klik Tata Letak, lalu pilih Page Elements

- Klik Tambah Gadget, lalu pilih Feed

- Pada jendela Configure Feed, masukkan feed komentar blog sobat blogger.
Contoh: http://kupas-blogger.blogspot.com/feeds/comments/default

- Klik LANJUTKAN

- Silahkan isi Judul, jumlah komentar yang ditampilkan, tanggal, sumber pemberi komentar lalu klik SIMPAN

- Selesai

CARA KEDUA (Dengan menggunakan javascript)

1. Login ke blogger lalu pilih menu "Tata Letak"

2. Kemudian copy script berikut ini :

<script style="text/javascript"
src="http://h1.ripway.com/minosgrande/comments.js"></script>

<script style="text/javascript">

var numcomments = 5;

var showcommentdate = true;

var showposttitle = true;

var numchars = 100;

var standardstyling = true;

</script>

<script src="http://kupas-blogger.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

- Angka 5 merupakan jumlah komentar yang mau ditampilkan.

- Ganti kupas-blogger.blogspot.com dengan nama blogmu.

3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript"
Lalu masukkan script diatas kedalam kotak yg disediakan. Selesai deh...

read more “Membuat Recent Comments pada Blogger”

Membuat Recent Post di Blogger

Posting terbaru atau biasa disebut Recent Post merupakan informasi singkat dari judul posting terbaru yang ditampilkan secara berurutan agar memudahkan pengunjung melihat urutan posting yang telah kita buat. Untuk membuat recent post kita bisa menggunakan source code dibawah ini.

Caranya pasang tinggal di copy saja script dibawah ini, paste code tersebut dan masukan pada halaman element blogger dan tambah gadget HTML/JavaScript.

<script style="text/javascript"
src="http://h1.ripway.com/minosgrande/recent-post.js"></script><script
style="text/javascript">var numposts = 5;var showpostdate = true;var
showpostsummary = true;var numchars = 100;var standardstyling =
true;</script><script
src="http://kupas-blogger.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Pada warna merah : Ganti dengan alamat blog mu

Angka "5" menunjukkan jumlah "Recent Post" yang ditampilkan, sobat blogger bisa menggantinya

read more “Membuat Recent Post di Blogger”