Showing posts with label komentar. Show all posts
Showing posts with label komentar. Show all posts

Wednesday, March 15, 2017

MEMBUAT KOMENTAR PENGUNJUNG BERBEDA DENGAN PEMILIK BLOG

MEMBUAT KOMENTAR PENGUNJUNG BERBEDA DENGAN PEMILIK BLOG




Biasanya komentar antara pengunjung dan pemilik blog mempunyai tampilan yang sama. Karenanya kadang si pengunjung sulit membedakan mana yang komentar pengunjung dan yang mana jawaban pemilik blog. Untuk itu biasanya pemilik blog menyiasati dengan memberi tampilan warna background yang berbeda atas jawaban untuk pengunjung. Untuk sobat yang ingin tampilan kotak komentarnya berbeda dan belum tahu caranya bisa ikuti cara di bawah ini.
Di bawah ini adalah cara membuat komentar pengunjung berbeda dengan pemilik blog (admin )
  • Login ke blog sobat.
  • Pilih tata letak.
  • Klik edit html.
  • Beri tanda centang pada Expand template widget.
  • Cari kode yang mirip di bawah ini, kemudian tambahkan kode yang berwarna merah.

    /* Comments ----------------------------------------------- */
    #comments h4 {
    margin:1em 0;
    font-weight: bold;
    line-height: 1.4em; text-transform:uppercase;
    letter-spacing:.2em;
    color: #999999;
    }
    #comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
    }
    #comments-block .comment-author {
    margin:.5em 0;
    }
    #comments-block .comment-body {
    margin:.25em 0 0;
    }
    #comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }
    #blog-pager-newer-link {
    float: left;
    }
    #blog-pager-older-link {
    float: right;
    }
    #blog-pager {
    text-align: center;
    }
    .feed-links {
    clear: both;
    line-height: 2.5em;
    }

    .admin-comments{
    background:#00CC33;
    border:3px solid #FF9966;
    padding:5px;

    Kode warna merah adalah kode yang harus sobat tambahkan.
    Kode tersebut bisa juga sobat letakkan di atas kode ]]></b:skin> tinggal terserah sobat mau meletakkannya di mana.
    Kemudian kita juga bisa mengganti warna background,sobat bisa menyesuaikan kode warnanya dengan warna template sobat. Bisa lihat Kode warna di sini
  • Setelah selesai meletakkan kode di atas tarik scroll ke bawah, cari kode seperti di bawah ini dan tambahkan juga kode yang berwarna merah.

    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <b:if cond=data:comment.author == data:post.author>
    <dd class=admin-comments>
    <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>
    <dd class=comment-footer>
  • Kode yang berwarna merah adalah kode yang harus sobat tambahkan.
  • Jangan lupa klik pratinjau terlebih dulu, jika tidak muncul peringatan baru klik simpan.

Available link for download

Read more »

Friday, March 10, 2017

MENAMBAH SCROLL PADA KOLOM KOMENTAR

MENAMBAH SCROLL PADA KOLOM KOMENTAR





Bagi sobat yang tidak ingin pada kolom komentar terlihat memanjang ke bawah karena sering kebanjiran komentar, bisa menambah fungsi scroll pada kolom komentar. Untuk membuatnya sobat cukup menambahkan sedikit kode.

Caranya:
  • Masuk ke blog sobat.
  • Pilih tata letak.
  • Klik edit HTML.
  • Beri tanta pada Expand Template Widget.
  • Ini adalah kode yang harus ditambahkan.

    <div class="scrollbox" style="overflow:auto; height:350px; width:600px;">
    .............................................
    .............................................
    .............................................

    </div>
  • Tambahkan kode di atas ke kode di bawah ini.
    Kode yang berwarna merah adalah kode di atas setelah ditambahkan.
    <div class="scrollbox" style="overflow:auto; height:350px; width:600px;">
    <dl expr_class=data:post.avatarIndentClass id=comments-block>
    <b:loop values=data:post.comments var=comment>
    <dt expr_class="comment-author " + data:comment.authorClass expr_id=data:comment.anchorName>
    <b:if cond=data:comment.favicon>
    <img expr_src=data:comment.favicon height=16px style=margin-bottom:-2px; width=16px/>
    </b:if>
    <a expr_name=data:comment.anchorName/>
    <b:if cond=data:blog.enabledCommentProfileImages>
    <data:comment.authorAvatarImage/>
    </b:if>
    <b:if cond=data:comment.authorUrl>
    <a expr_href=data:comment.authorUrl rel=nofollow>
    <data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <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>
    <dd class=comment-footer>
    <span class=comment-timestamp>
    <a expr_href=data:comment.url title=comment permalink>
    <data:comment.timestamp/>
    </a>
    <b:include data=comment name=commentDeleteIcon/>
    </span>
    </dd>
    </b:loop>
    </dl>

    </div>
  • Jangan lupa klik simpan.
  • Lihat hasilnya.
Sobat bisa menyesuaikan tinggi dan lebar kolom komentar sesuai dengan template yang sobat punya.

Semoga bermanfaat.

Available link for download

Read more »

Friday, January 27, 2017

MEMASANG EMOTICON PADA KOTAK KOMENTAR

MEMASANG EMOTICON PADA KOTAK KOMENTAR





Ada yang bilang kotak komentar tanpa emoticon membuat blog kurang hidup. Apa benar ? Yuk kita buktikan ! Siapa tahu ini memang benar.
Bagi sobat yang belum menambahkan icon dengan berbagai karakter bisa menampilkan emoticon ini pada kotak komentar yang sobat punya. Kita bisa menggunakan icon yang biasa di gunakan pada yahoo! messenger seperti contoh di bawah ini.

:) :( ;) :D ;;) :-/ :x :P :-* =(( :-o x( :(( :)) :| =)) 8-} :-L B-( ;)) :)] ~x( :-t

Bagi yang belum tahu cara memasang emoticon pada kotak komentar bisa ikuti langkah-langkahnya:
  • Masuk ke blog sobat.
  • Klik tata letak.
  • kemudian klik edit HTML.
  • Beri tanda pada Expand Template Widget.
  • Cari kode </body>
  • Letakkan kode ini di atasnya. Hingga posisinya sbb:
    <script src=http://sites.google.com/site/darmasites/my-forms/emoticon.js type=text/javascript/>
    </body>
  • Langkah selanjutnya cari kode yang mirip seperti di bawah 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/>

  • Kemudian letakkan kode emotnya di bawah kode <p class=comment-footer>
    Sehingga hasil penempatannya akan seperti di bawah ini:
    <p class=comment-footer>
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif/> :)
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif/> :(
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif/> ;)
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif/> :D
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif/> ;;)
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif/> :-/
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif/> :x
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif/> :P
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif/> :-*
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif/> =((
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif/> :-o
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif/> x(
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif/> :((<br/>
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif/> :))
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif/> :|
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif/> =))
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif/> 8-}
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif/> :-L
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif/> B-(
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif/> ;))
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif/> :)]
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif/> ~x(
    <img border=0 src=http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif/> :-t

    <b:if cond=data:post.embedCommentForm>
    <b:if cond=data:post.allowNewComments>
    <b:include data=post name=comment-form/>
    <b:else/>

  • Kemudian klik pratinjau.
  • Setelah dirasa aman baru klik simpan.
    SEMOGA BERMANFAAT
Aku juga punya di bawah .

Available link for download

Read more »