SEMUA BERAWAL DARI... (kata itu diberi nama CINTA)

DIsarankan ...

aaaku. Powered by Blogger.

PROLOG

Tri Sulistyo Sebelumnya aku sampekan maap se-gede2-nya, kalo mungkin aja tulisan ato postingan banyak dari copas punya senior2 dan aku lupa ambilnya. Hingga gak aku cantumin sumbernya. Cuman satu yang aku yakinin bila bila senior semua ikhlas...
Showing posts with label Tip dan Trik Bloger. Show all posts
Showing posts with label Tip dan Trik Bloger. Show all posts

Dibawah Posting ada Kotak Komentar

Tips Kuno lagi.... hahahahaha gpp deh... yang penting posting.... lagian saya cuma pengen ngasih tau sobat" yang belum tau, tapi klo udah pada tau... ya gpp deh.. buat saya sendiri aja...hehehehehe

Ok langsung aja deh Cara Menampilkan Kotak komentar Dibawah Postingan

langkah-langkahnya :
  • Login ke Blogger

  • Pilih link Pengaturan -> Komentar . dan pilih radio button " Di semat di bawah entry.


Jika sudah, simpan dan coba mengklik salah satu judul postingan kita, apakah sudah ada kotak komentar di bawahnya apa belum? Jika belum kita harus melakukan langkah-langkah berikut.
1. Pilih Tata Letak ( edit layout ) - > Edit HTML.
2. Tandai/centang Expand Template Widget.
3.

Cara Pertama


  • Cari kode berikut ini
<b:include data='post' name='comments'/>
  • Setelah ketemu, taruh kode berikut ini di bawahnya
<b:include data="post" name="comment-form">
  • Kemudian Simpan Perubahan, lihat hasilnya jika belum berhasil lakukan
Cara Kedua
  • Cari kode berikut ini
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/></a>
</p>
  • Setelah ketemu ganti dengan kode ini
<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a> </b:if> </b:if> </p>

  • Setelah itu, Simpan Perubahan


Kotak Komentar Berada Di Atas Komentar Pengunjung

Membuat komentar blogspot yang unik. Trik lain yang membuat komentar blog kita unik salah satunya membuat kotak komentar berada di atas komentar pengunjung. Apa maksud Kotak Komentar Berada di Atas Komentar Pengunjung? Berikut ini penjelasannya. Secara default kotak komentar berada di bawah komentar pengunjung. Sebagai urutannya adalah
Judul Posting > Komentar Pengunjung > Kotak Komentar 

maka kita ganti dengan urutan

Judul Posting > Kotak Komentar > Komentar Pengunjung


Dari posting saya tersebut terlihat kotak komentar yang lain dari yang lain yaitu kotak komentarnya berada di atas pengunjung. Lantas bagaimana membuatnya? Caranya cukup mudah kok. Ikuti langkah-langkahnya dengan cermat. he2.

1. Loging Blogger

2. Klik Design

3. Klik Edit HTML

4. Centang    Expand Widget Templates nya.

5. Jangan lupa Download full Template agar bisa di kembalikan jika terjadi kesalahan.

6. Siapkan air putih agar tidak pusing melihat kodenya.

7. Jika sudah semua silakan cari kode yang mirip seperti milik saya berikut ini :

<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>
    </b:if>

8. Jika sudah COPY dan CUT semuanya seperti kode di atas mulai dari <p class='comment-footer'> sampai </b:if>. 
Cara ini dimaksudkan untuk memindah form kotak komentar agar berada di atas komentar pengunjung.

9. Buka NOTE PAD dan PASTE semua kode no 7 tadi.

10. Sekarang penempatan kode yang sudah di pindah ke notepad tadi di pindah ke atas. Caranya:
Cari lagi code yang seperti ini: <dl expr:class='data:post.avatarIndentClass' id='comments-block'> jika tidak ketemu coba yang ini <dl id='comments-block'> atau yang ini <div id='comments-block'>.

11. Pastekan semua kode yang sudah kita pindah di notepad tadi di atas salah satu kode no. 10.

12. Klik simpan template menyimpan pekerjaan sobat.

TAMPILAN KOMENTAR BLOGSPOT

Blogger new template designer telah memberikan kemudahan bagi kita dalam memodifikasi penampilan blog.  Memang kode yang ditamplikan didalamnya berbeda dengan kode html lama yang sudah biasa kita obrak-abrik.

Barangkali sudah  menjadi cirri khas blogger dalam memberikan layanan tidaklah 100% dapat kita telan begitu saja.  Salah satu contohnya yaitu fitur komentar di bawah posting masih terlihat kaku dan tidak enak dilihat.  Karena itu kita dituntut untuk berpikir bagaimana agar penampilan blog menjadi asyik untuk dilihat.  Dengan sedikit sentuhan background dan border saja pada komentar blogger maka dapat mengatasi kekesalan jika melihat kotak komentar blogspot.
Ada satu fasilitas pada menu template designer yang dapat dipergunakan dalam memodifikasi penampilan blog termasuk tampilan komentar yaitu menu Add Css.

Untuk menuju menu Add Css maka langkah yang harus ditempuh adalah :
1.    login blogger
2.    design
3.    template designer
4.    advanced
5.    Add CSS (letaknya paling bawah)
6.    tambahkan kode css pada kotak isian Add custom CSS.

CSS untuk Modif komentar New blogger:
#comments{width:551px; padding:15px 15px 0px 15px; border:1px solid #ddd; background:#f6f5f5; font-family:verdana,sans-serif; margin-bottom:10px}
#comments h4{font-family:arial,sans-serif;  margin:1em 0;  line-height:1.4em;  color:#000000;  font-size:16px; padding-left:0px}
#comments-block{ margin:1em 0 1.5em;  line-height:1.6em}
#comments-block .comment-author{ margin:.5em 0 0 0;  font-weight:bold; padding:1px}
#comments-block .comment-body{ margin:0; padding:5px}
#comments-block .comment-footer{ margin:-.25em 0 2em;  line-height:1.4em;  font-style:italic;  font-size:0.8em;    border-bottom:2px dotted #ddd; padding-bottom:25px}
#comments-block .comment-body p{ margin:0 0 .75em}
.deleted-comment{ font-style:italic;  color:gray}
.comment-form{margin:25px 0px 0px 0px; max-width:555px !important; width:555px !important}
.avatar-image-container img{background:url(http://sites.google.com/site/brugholic/avatara.png); width:35px; height:35px}
Setelah menuliskan css di Add custom CSS, kemudian :
1.    Apply to blog
2.    Back to blogger

Lihat perbedaannya:
Komentar New blogger sebelum modifikasi:


Komentar New blogger setelah modifikasi:



Demikianlah cara menambahkan css untuk Modif komentar New blogger
Catatan:
Tips ini sudah diujicoba dan berhasil pada template Awesome Inc, buatan Tina Chen, untuk template yang lain belum saya coba.

Kamu bisa kunjungi posting terdahulu tentang tampilan komentar lainnya :

Ruang Kosong di bawah Komentar Blogspot

Status YM disamping Kotak Komentar Blogspot


Ruang Kosong di bawah Komentar Blogspot

Menghilangkan ruang kosong di bawah kotak komentar. Memang hal yang satu ini tidak mengganggu. Tapi bagi sobat blogger yang ingin mengoprek abis template blogspot hal ini merupakan salah satu yang kurang sedap dipandang. Jarak antara kotak komentar dengan link beranda ini memang terlihat terlalu panjang dan terkesan memberikan ruang kosong yang sangat tidak enak dipandang mata. Tapi jangan khawatir, kita bisa mengatasinya hanya dengan sedikit merubah value yang ada.

Cara menghilangkasn ruang kosong di bawah komentar blogspot:
  • Langsung ke TKP, dashbord =>> rancangan =>> edit html, dan centang expand template widget
  • Cari kode html di bawah ini. Mengingat template yang berbeda-beda jika tidak ditemukan cari yang serupa.



 <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='' style='display: none' width='100%'/>
    <b:else/>
      <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 blogger-comment-from-post' frameborder='0' height=
'410' id='comment-editor' name='comment-editor' src='' width='100%'/>

  • Ganti value 410 pertama dan yang kedua sesuai ukuran yang anda inginkan. Idealnya menurut saya 410 pertama menjadi 50, dan 410 kedua menjadi 300
Selamat mencoba dan salam sukses

DAFTAR ISI
Widget by Putra Q-Ae