cara modifikasi komentar blog
Bagi yang ingin mempunyai komentar admin berbeda seperti pada blog wordpress yang menjorok ke dalam, maka pada pagi hari ini saya persembahkan tutorialnya.

Tutorial ini saya dapat dari beberapa sumber, dan pada posting saya yaitu cara membuat komentar blogspot seperti wordpress sudah saya sebutkan satu persatu sumbernya disana, dan saya salin ulang kesini dengan maksud hanya ingin berbagi / sharing saja kepada sobat blogger supaya mempunyai tampilan kotak komentar seperti wordpress ini.

Karena template hack seperti ini memerlukan banyak penghapusan pada bagian - bagian penting blog, saran saya adalah untuk back-up template dulu, jika belum tau caranya silahkan baca posting saya yang ini : Cara aman mengedit template blog.

Baiklah langsung saja kita kepada cara membuat nya.

Login blogger, masuk ke rancangan . Edit HTML, centang Expand template widget dan temukan kode ]]></b:skin> lalu paste kode ini di atasnya:
/* Main Comment
-----------------------------------------------*/

#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: white;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

CAUTION : Setelah anda paste kode diatas, anda juga harus menghapus section css comments di blog anda. biasanya mempunyai kode awalan seperti ini #comments

Selanjutnya cari kode </body> dan paste kode ini tepat di atasnya:

<script src='http://caraonline.googlecode.com/files/caraonline.blogspot.com.js' type='text/javascript'/>

Sekali lagi saya ingatkan untuk back-up template anda sebelum terjadi hal-hal yang di inginkan.

Baca baik-baik langkah terkhir ini, cari kode <b:includable id='comments' var='post'> dan hapus kode di bawahnya sampai menemukan kode </b:includable> yang kira-kira terletak diatas kode <div id='backlinks-container'> atau dekat dengan <div id='sidebar-wrapper'> ( ini struktur kode di blog saya ya ). kode yang di hapus ini adalah kode HTML untuk komentar. dan ganti seluruh kode yang di hapus tadi dengan kode di bawah ini:

div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>
       
        <div id='cm_reply_css'></div>
       
        <div class='cm_pagenavi' id='cm_page'></div>
       
        <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=478857210420619544&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=600,height=500&quot;); return false;'>Reply</a>
                                </div>
                            </div>

                            <div class='cm_entry'>
                                <span class='cm_arrow'></span>
                                <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>
                            </div>
                        </div>
                    </div>
                </b:if>             
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'></div>
       
    <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>

NB: Ganti blog ID yang saya tandai dengan warna merah.

Save template dan lihat hasilnya.

Semoga berhasil :)

Jika anda masih belum juga berhasil atau ingin memberi warna yang berbeda pada komentar seperti wordpress ini, silahkan baca posting saya yang yang sudah saya sebutkan diatas tadi berjudul Cara membuat komentar blogspot seperti wordpress, dari sana mungkin anda akan mendapatkan pencerahan dari para ahlinya langsung.

Selamat mencoba dan semoga impian anda mempunyai komentar admin seperti di wordpress tercapai.


Review:

Judul Komentar admin menjorok ke dalam seperti wordpress
Deskripsi Bagi yang ingin mempunyai komentar admin berbeda seperti pada blog wordpress yang menjorok ke dalam, maka pada pagi hari ini saya persemba...
Author
Author Rating
4/ 5 Suara Dari 1001 Ulasan

Dapatkan artikel menarik lainnya : Klik disini
35 komentar sudah masuk. Silahkan menambahkan tanggapan lain...
Komentari


September 21, 2011 at 11:45 AM  
Like

Ajarkan ngai..
Cz ngai cobe kok dk bs?!



September 21, 2011 at 8:26 PM  
Like

Wah kodenya panjang banget,,, sayang sy ngblog pke hp, kode sebnyak itu klo di copy malah jadi malah jd bnyak spasinya, cb klo kodenya di dldm kolom textarea, pasti gmpang untuk di copas dan tidak error...

But, makasih infonya dan mkasih kunjunganya..Wah kodenya panjang banget,,, sayang sy ngblog pke hp, kode sebnyak itu klo di copy malah jadi malah jd bnyak spasinya, cb klo kodenya di dldm kolom textarea, pasti gmpang untuk di copas dan tidak error...

But, makasih infonya dan mkasih kunjunganya..



September 21, 2011 at 8:46 PM  
Like

@Uc Herawati: panjang skrip nye, harus hati2 waktu ngehapus..
bawa tenang, smbl rilexs..baru lancarr...hehee



September 21, 2011 at 10:11 PM  
Like

@Yusup Laskar: sebenaernya emang mau pake text area yg highlight mas, biar gampang di copy. tapi ntar deh betulinnya. utk sekarang cm mau menekankan aja bhw banyak penghapusan kode di template. thx ya sharing nya...



September 23, 2011 at 1:24 AM  
Like

Wah karen mas!! bisa ngak ajarin gimana buat fan page facebooknya float kayak blog mas ini. Mekasih ya pencerahan mas



September 23, 2011 at 6:55 AM  
Like

@Teknik Seo
itu sebenarnya cuma skrip iklan melayang yang saya ubah sedikit dan tambahkan CSS, hehee...sebenarnya malu sih buat di bahas :malu:



September 23, 2011 at 7:32 AM  
Like

hahhaa ya faham..... saja aja canda silaturahim gitu :D

kang linknya juga udah di pasang pada footer..

Mau request ni. bisa ngak tukar anchor thext shahblogger itu kepada

Teknik Seo


(hihi mekasih ya mas. mau nyedut popularity anchor text link ni haha)



September 23, 2011 at 6:57 PM  
Like

Teknik Seo: kakakaaa...gapapa, santai aja..

oh iya, ntar saya ubah. saya juga setuju kalau anchor text nya Teknik Seo dari pada nama pribadi. lebih sinkron sama tema, hehee...



September 24, 2011 at 12:25 AM  
Like

:2thumbup



September 24, 2011 at 12:27 AM  
Like

ada yang kurang tuh
comments' id='comments'>
<
:cendolnya



September 27, 2011 at 1:57 PM  
Like

@Beben Koben: oke deh sob, ntar di betulin. hehee...thanks



September 30, 2011 at 10:49 AM  
Like

ribet ya...



September 30, 2011 at 1:38 PM  
Like

DuniaPiyen: lumayan mas, tp sesuai kok dengan yg kita dapatkan. (klo benar2 pngen style kotak komentar yg kek gini sih..hehee)



October 22, 2011 at 2:41 PM  
Like

saya ada pesan seperti ini :
"Widget dengan id "Blog1" tidak dapat mengandung elemen "#text". Sebuah widget hanya dapat mengandung elemen b:includable.
Error 500"

aduh gmn tuh -___-



October 25, 2011 at 1:15 PM  
Like

Mr. Curiosity: wah barusan kmrn saya ketemu juga kasus sperti ini wkt edit di template ini. saya betulinnya dengan copas kode b:includable dan div nya kesana sini di area bawah dari kumpulan kode. sbenernya ini tergantung kode template masing2 sih mas, terbukti waktu saya kmrn coba di blog saya yg satunya. coba deh di teliti dari 3 blog yang saya rekomendasikan di atas. mungkin disana mas bisa dapat pencerahannya.



November 3, 2011 at 5:11 PM  
Like

tES BANG
:ultah



November 3, 2011 at 5:12 PM  
Like

@Mr. CuriositysELAMAT MALAM



November 4, 2011 at 12:51 PM  
Like

Alamtoliz: testnya sukses..hehee



November 30, 2011 at 8:50 AM  
Like

ini yang kucari dari tadiii.
oke deh. langsung coba. makasih yaaa :)



December 7, 2011 at 5:01 PM  
Like

Bang, semuanya ya yang berawalan #comments ?



December 9, 2011 at 2:56 AM  
Like

Apa Kabar Sobat? Sehat kan?
Sukses selalu ya....



December 9, 2011 at 6:45 AM  
Like

Masama armae, thx juga kunjungan dan koment nya. he2..



December 9, 2011 at 6:47 AM  
Like

Dhicomp: Oh baik aja sob, sehat2 aja nih..semoga sebaliknya yah. Sip, terus semangat ngeblognya. walaupun saya akhir2 ini agak kurang aktif ngeblognya krn disibukkan kuliah dan cari duit..he2



December 9, 2011 at 8:34 AM  
Like

Arga Wijaya Hardy: maksudnya? tag CSS nya gitu...



December 23, 2011 at 2:46 PM  
Like

makasih gan, komentar di blog ane jadi lebih keren, btw kalo dikasih comments' id='comments'> malah nongol di blog (di atas tulisan misal: 1 comments gitu), di blog ane kode itu ane hapus



January 4, 2012 at 1:53 PM  
Like

Gagal gan...
coba lagi dh...



January 30, 2012 at 8:23 PM  
Like

Syukur banget gan.. akhirnya saya bisa juga udah nyoba, boleh di liat

thanks gan

mantap ;)

Anonymous


February 16, 2012 at 10:16 PM  
Like

:malu



March 16, 2012 at 10:15 PM  
Like

Alhamdulillah, ketemu juga solusinya di sini. Dari tadi udah hampir putus asa gimana caranya ngilangin komentar yang ganda kalo pake cara dari artisteer. ternyata musti diilangin dulu kode di antara dan -nya ya. TFS bro



April 8, 2012 at 3:20 AM  
Like

mantap



April 23, 2012 at 2:09 PM  
Like

Yan Muhtadi Arba: seep, semoga bermanfaat bro. TFS kembali...



April 23, 2012 at 2:13 PM  
Like

Akhmad Zulkarnain: yup, sbenernya gak perlu terlalu monoton jg ngikutin kode yg ada di atas. toh struktur template kita berbeda2 khn. yg penting ngerti struktur utama dr template blogspot..



May 7, 2012 at 11:43 PM  
Like

terima kasih... dari sekian macam cara sy coba ini yang berhasil tenks banyak deh



October 1, 2012 at 10:31 PM  
Like

sepertinya keren nih .. adminnya jaditampil beda. saya coba dulu ah .



April 26, 2013 at 4:39 AM  
Like

thank sob, sukses ni tutorialnya...hehe

Tuliskan komentar pada form ini :

Adsense Indonesia
Template design by Armin | Cara Online
Powered by Blogger