Cara Merubah Tampilan Kolom Komentar Blog Agar Lebih Menarik ~ SOFtwareTEKnologi Go 2 Blog Tutorial
Selamat datang Di Softekgoblogtutorial

Jumat, 21 Desember 2012

Cara Merubah Tampilan Kolom Komentar Blog Agar Lebih Menarik

Kolom Komentar bawaan blog cenderung membosankan, serasa tampilannya kurang menarik. Bagaimana bila sebuah kolom komentar pada blog berpenampilan berbeda, sehingga para pembaca atau pengunjung blog yang kita miliki lebih tertarik untuk berkomentar pada blog tersebut.
Tampilan blog yang menarik pun akan terasa kurang bila kolom komentar masih bawaan standar, sehingga para pengunjung blog kita kurang bergairah dalam mengirimkan komentar atas artikel yang telah kita buat. Ibarat makanan kurang garamlah...atau ibarat kopi kurang gula..dan lain sebagainya.
Kali ini kita akan membuat kolom komentar blog agar lebih menarik lagi, sehingga dapat merangsang pengunjung blog untuk berkomentar.

Langkah awal :  Seperti biasa...download terlebih dahulu template anda sebagai backup, kemudian centang expand template widget.. Anda cari script  ]]></b:skin> kemudian letakan script dibawah ini diatasnya.



Langkah selanjutnya letakan script berikut diatas script </body>



Langkah ketiga adalah menambah widget yahoo emoticon, penambahan yahoo emoticon akan lebih mempercantik tampilan kolom komentar anda. Anda dapat mengabaikan langkah ini, namun jika anda tertarik membuatnya lakukan langkah ini  ;

Letakan script berikut diatas  ]]></b:skin>  



Kemudian letakan script berikut diatas </Body>




Langkah selanjutnya adalah cari script berikut  <h4 id='comment-post-message'><data:postCommentMsg/></h4> dan letakan script berikut dibawahnya ;




Langkah terakhir...Yang ini anda harus extra hati-hati dan teliti. Anda cari script berikut <b:includable id='comments' var='post'> setelah anda menemukan script tersebut anda telusuri element dibawahnya hingga anda menemukan script berikut </b:includable>




Jadi Element-element diantara script <b:includable id='comments' var='post'> dan script </b:includable> haruslah anda ganti dengan element diatas.


Klik show untuk melihat
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
   <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='20' width='470'/>
    </b:if>
    </div>

    <div class='comments comments-page' id='blogger-comments-page'>
    <a name='comments'/>
  <b:if cond='data:post.allowComments'>
  <h4>
  <b:if cond='data:post.numComments &gt; 0'>
<a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
  <b:if cond='data:post.numComments == 1'>
  <span id='cm_total'>1</span> <data:commentLabelPlural/>
  <b:else/>
  <span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
  </b:if>
  </b:if>
  </h4>
 
  <div id='cm_reply_css'/>
 
  <div class='cm_pagenavi' id='cm_page'/>
 
  <div id='cm_block'>
  <b:loop values='data:post.comments' var='comment'>
  <b:if cond='data:comment.isDeleted'>
  <b:else/>
 
  <div expr:id='data:comment.anchorName'>
  <div class='cm_wrap'>
  <a expr:name='data:comment.anchorName'/>
  <div class='cm_head'>
  <div class='cm_avatar'>
  <b:if cond='data:blog.enabledCommentProfileImages'>
  <data:comment.authorAvatarImage/>
  </b:if>
  </div>
  <div class='cm_reply'>
  <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=__3139601324000981722__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=500&quot;); return false;'>Reply</a>
  </div>
  </div>
  <b:if cond='data:comment.author == data:post.author'>
  <dd class='cm_entry'>
 <span class='cm_arrow'/>
  <div class='cm_info_a'>
  <div class='cm_name_a'>
  <b:if cond='data:comment.authorUrl'>
  <img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXsXuGVKTJGP0zVk0-bSciOH_gpewGU4-hSGe2g42zkq7_15nof72vAS9u63hKHUhgCgl-O038JxtrHFmZodyeRjwkyCxzmAUQUZuMMi6DPlhr27OdLgNg7F7r-thHTT7nJ4mn6KSr1s/s1600/adminstar.png' title='Admin' width='20px'/>
  <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
  <data:comment.author/>
  </a>
  <b:else/>
  <b><data:comment.author/></b>
  </b:if>
  </div>
  <div class='cm_date_a'>
  <data:comment.timestamp/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </div>
  <div class='clear'/>
  </div>
 
  <div class='comment-body-author'>
  <p><data:comment.body/></p>
  </div>
  </dd>
  <b:else/>
  <dd class='cm_entry'>
  <span class='cm_arrow'/>
  <div class='cm_info'>
  <div class='cm_name'>
  <b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
  <data:comment.author/>
  </a>
  <b:else/>
  <b><data:comment.author/></b>
  </b:if>
  </div>
  <div class='cm_date'>
  <data:comment.timestamp/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </div>
  <div class='clear'/>
  </div>

 <p><data:comment.body/></p>
  <span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
  </dd>
  </b:if>
  </div>
  </div>
  </b:if>
  </b:loop>
  </div>
 <div class='cm_pagenavi' id='cm_page_copy'/>
 
  <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>
 </b:if>
  </div>

</b:includable>


 





Tulisan yang berwarna Merah disorot Orange adalah Script yang harus anda CARI. Sedangkan Script yang berwarna Biru disorot Grey adalah script pengganti. Jadi anda harus mengganti elemen-elemen diantara script <b:includable id='comments' var='post'> sampai dengan script  </b:includable>









Tulisan yang disorot hijau num_posts='20' adalah jumlah posting yang akan ditampilkan pada blog. Tulisan yang disorot kuning width='470' adalah lebar kolom komentar pada blog. Sebaiknya lebar kolom ini disesuaikan dengan main-wrapper anda. 
Jangan lupa untuk mengganti BLOGID  yang disorot Ungu, ganti dengan blogid anda.
Untuk pertanyaan dan tambahan untuk artikel ini, mohon tinggalkan komentar anda. Kami akan membantu dengan senang hati.
Semoga artikel ini bermanfaat untuk anda semua..Terima kasih telah berkunjung ke blog tutorial kami.

Comments
0 Comments

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-q =))

Be Nice to comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More