;

Menambahkan Style Unik untuk Kotak Komentar

Kali ini saya akan share tentang bagaimana menambahkan style atau merubah tampilan pada kotak komentar Blogspot.

Sebelum kita mulai:
  1. Anda harus berhati-hati saat mengganti template Anda. 
  2. Sebelum Anda membuat perubahan, Cadangkan/pulihkan template Anda dan simpan di drive anda terlebih dahulu. Ini untuk memudahkan anda jika terjadi kesalahan dalam pengeditan nanti.

Sekarang ikuti langkah-langkah dibawah ini untuk mengedit kotak komentar anda dengan tampilan yang berbeda.
1. Login ke dashboard Anda -> Desain--> Edit HTML 
2. Klik pada "Expand Template Widget"
3. Cari "Ctrl + F" dan cari kode berikut atau yang serupa:
  • <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
           <b:loop values='data:post.comments' var='comment'>
           <dt expr:class='&quot;comment-author &quot; + 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>
    Ganti kode atas dengan yang berikut ini:
<ol class='commentlist'>
        <b:loop values='data:post.comments' var='comment'>
          <b:if cond='data:comment.adminClass == data:post.adminClass'>
          <li class='comment odd'>
            <div class='comment-body'>
            <div class='comment-author vcard'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <cite class='fn'>
              <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>
              </cite> <span class='says'>says:</span>
            </div>
            <div class='comment-meta commentmetadata'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </div>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p>
                <data:comment.body/>
                <span class='interaction-iframe-guide'/>
                </p>
            </b:if>
            </div>
          </li>
          <b:else/>
          <li class='comment even'>
            <div class='comment-body'>
            <div class='comment-author vcard'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <cite class='fn'>
              <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>
              </cite> <span class='says'>says:</span>
            </div>
            <div class='comment-meta commentmetadata'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </div>

           <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p>
                <data:comment.body/>
               </p>
            </b:if>
            </div>

          </li>
          </b:if>
        </b:loop>
      </ol>
4. Berikutnya cari kode ]]> </ b: skin> dan paste kode 
    dibawah ini sebelum kode ]]> </ b: skin>:
/*----------------------------------------------------
          {--------}  Comment {--------}
----------------------------------------------------*/
#commentsbox {

margin-left:5px;
padding:10px;

}
/*----------------------------------------------------------
     {--------}  Comment Answer Box Title {--------}
-----------------------------------------------------------*/
h3#comments{
    font-weight: bold;
    font-size: 20px;
    padding: 0;
    margin: 0 0 15px 0;
    padding: 10px;
    display: block;
    background: #fff;
    border: 1px solid #DFDFDF;


}

/*----------------------------------------------------------
     {--------}  Comment Answer Box Ordered  {--------}
-----------------------------------------------------------*/
ol.commentlist {
 margin:0px 0 0;
 clear:both;
 overflow:hidden;
 list-style:none;


}
/*----------------------------------------------------------
     {--------}  Comment Answer Box  {--------}
-----------------------------------------------------------*/
ol.commentlist li {
 margin:5px 0;
 line-height:18px;
 padding:10px;
 border: 1px solid #dfdfdf;
        background:#fff;
      
}

ol.commentlist li:hover {
background: #fcf4e8;

}

/*---------------------------------------------------------------
     {--------}  Comment Answer Box List Author Fn {--------}
----------------------------------------------------------------*/
ol.commentlist li .comment-author .fn {
 }


/*----------------------------------------------------------
     {--------}  Comment Answer Box Cite Fn {--------}
-----------------------------------------------------------*/
cite.fn{
 color:#555;
 font-style:normal;
}

/*-----------------------------------------------------------------------------
     {--------}  Comment Answer Box Comment Author{--------}
-------------------------------------------------------------------------------*/
ol.commentlist li .comment-author {
 color:#555;
}

ol.commentlist li .comment-author:hover {
color: red;
}
/*----------------------------------------------------------------------------------
 {--------}  Comment Answer Box Comment Author Link A Visited{--------}
----------------------------------------------------------------------------------*/
ol.commentlist li .comment-author a:link,ol.commentlist li .comment-author a:visited{

 color: red;
 font-weight:bold;
 text-decoration:none !important;
}

/*-------------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Avatar  {--------}
--------------------------------------------------------------------------*/
ol.commentlist li .comment-author .avatar{
 float:right;
 border:1px solid #413E45;
 background:#413E45;
 padding:2px;
}

/*--------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Mata {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta{
 font-size:10px;

}
/*--------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Commentmata Data {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta .commentmetadata{

 color:#000;
}
/*--------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Mata A {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta a {
 color:red;
 text-decoration:none !important;
}

/*------------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Paragraph {--------}
--------------------------------------------------------------------------*/
ol.commentlist li p {
 line-height:22px;
 margin-top:5px;
 color:#999;
 font-size:12px;

}

/*----------------------------------------------------------------------
     {--------}  Comment Answer Box Avatar Image Container  {--------}
------------------------------------------------------------------------*/
.avatar-image-container {
        float:right;
        border: 1px solid #ddd;
        padding: 4px;
        height:48px;
        width:48px;
}
/*----------------------------------------------------------------------
     {--------}  Comment Answer Box Image Container Image  {--------}
-----------------------------------------------------------------------*/
.avatar-image-container img {
       background:url('#') no-  repeat;
       height:48px;
       width:48px;
}

/*----------------------------------------------------
          {--------}  Clearing  {--------}
----------------------------------------------------*/
.clearfix:after {
    content: ".";
    display:block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
 display: block;
}
/*----------------------------------------------------
          {--------}  Hides From IE Mac  {--------}
----------------------------------------------------*/
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*----------------------------------------------------
          {--------}  Clear {--------}
----------------------------------------------------*/
.clear {
 clear: both;
}
/*----------------------------------------------------
          {--------}  No Clear  {--------}
----------------------------------------------------*/
.noclear {
 clear: none;
}
 5. Simpan template dan Anda sudah selesai.
NB:
Anda dapat mengubah latar belakang, ukuran perbatasan,warna dan pilihan lain pada tampilan kotak komentar anda dengan mengganti  kode-kode yang dapat anda temukan di langkah 4, sesuai keinginan Anda.

Related Posts Plugin for WordPress, Blogger...

27 comments

4 Oktober 2012 pukul 11.55

http://curhatz.blogspot.com/ : nice info ... nyoba dulu Om

6 Oktober 2012 pukul 01.46

@zifa niaThanks sobat...

8 Oktober 2012 pukul 11.59

sangat bermanfaat sob...lanjutkan....

Anonim
9 Oktober 2012 pukul 06.15

It's a shame you don't have a donate button! I'd most certainly donate to this brilliant blog! I guess for now i'll settle for
bookmarking and adding your RSS feed to my Google account.
I look forward to brand new updates and will talk about
this blog with my Facebook group. Chat soon!
My website ; nexusatv.com

12 Oktober 2012 pukul 09.52

tambah ilmu..thx for share..

kunjungan pertama..salam kenal :)

12 Oktober 2012 pukul 23.51

@bali backpackerTrima kasih sobat. salam kkenal...

12 Oktober 2012 pukul 23.53

@Enny MamitoTrima kasih sobat.
Salam kembali sobat...

13 Oktober 2012 pukul 20.13

makasih atas infonya,walau kadang-kadang pusing carinya.love,peace and gaul.

15 Oktober 2012 pukul 12.59

sore, salam blogger.

BLOGGER NTT-Kefamenanu.

http://anaktimor-17.blogspot.com/2012/10/saling-review-blog-di-alexa-anaktimor17.html

19 Oktober 2012 pukul 16.49

@saryadi nilan : ...Makasi kembali atas kunjungnnya. Silahkan dicoa so...

19 Oktober 2012 pukul 16.51

@Markus Kono : ...Salam kembali Brad
Bravo Bi'inmaffo...

Anonim
20 Oktober 2012 pukul 10.53

It's in fact very complex in this busy life to listen news on Television, therefore I only use world wide web for that purpose, and obtain the hottest news.
Here is my page ... games like runescape

22 Oktober 2012 pukul 04.41

Sangat Bermanfaat sekali untuk lebih memperdalam blog :) Thanks bro .. Forza Roma (Roma 4-2Genoa) !!

22 Oktober 2012 pukul 23.52

@Addimasyqi Thanks ya brad... FORZA ROMA

30 Oktober 2012 pukul 14.21

Selamat siang semua... semoga sukses selalu.

30 Oktober 2012 pukul 16.57

@GrafiKom Total Design Thanks sobat...

1 November 2012 pukul 17.47

@AnonimThanks for u visit. i will visit u beck...

1 November 2012 pukul 17.50

@Anonim Thanks for ur visit.
i will visit u page...

15 Februari 2013 pukul 08.20

dicoba dulu gan

16 Februari 2013 pukul 02.41

@fajar budimanSilahkan Sobat...!!!
trims bwt kunjungannya y...

24 Februari 2013 pukul 21.07

thanks tutornya sob

26 Februari 2013 pukul 10.39

meluuuuuuuuuuncuuuuuur

27 Februari 2013 pukul 22.14

@w0ngsimp4ng Thanks kembali sobat...

27 Februari 2013 pukul 22.17

@ace maxs Thanks atas kunjungannya kawan...

21 Maret 2013 pukul 23.41

.: berlaku untuk semua templates tidak kawan?

22 Maret 2013 pukul 01.48

@IQ Online Mart Uda pernah saya coba di template bawahan blogger dan template buatan artisteer. Semua sukses sobat. Coba saja sobat....

Thanks ya...

Posting Komentar

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Popular Posts

Postingan Terbaru

Diberdayakan oleh Blogger.
Social Bookmarking