Gratis berlangganan artikel Zykry via mail, join sekarang!

Monday, March 22, 2010

Cara Modifikasi Kotak Komentar




komentar

  1. Login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
  5. Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.

    expand widget template
  6. Tunggu beberapa saat ketika proses sedang berlangsung.
  7. Cari kode pada bagian CSS yang seperti ini :

    #comments h4 {
      margin:1em 0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: $sidebarcolor;
      }
    #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;
      }


  8. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

    #comments h4 {
      margin:0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: #000;
      }
    #bg_commentblock {
        width: 548px;
        background: #ffffff;
        float: left;
        padding:20px;
        margin:0 0 10px 0;
        border:1px solid #C0C0C0;
        }
    #commentblock {
        width: 510px;
        background: #E8E8E8;
        text-align:left;
        padding: 20px 20px 10px 20px;
        margin: 10px 0px 0px 0px;
        border-top: 2px solid #333333;
        border-bottom: 1px solid #333333;
        }
    #commentblock ol {
        list-style-type: square;
        margin: 0px 0px 0px 10px;
        padding: 0px 0px 10px 0px;
        }
    .commentdate {
        font-size: 12px;
        padding-left: 0px;
        }
    #commentlist li p {
        margin-bottom: 8px;
        line-height: 20px;
        padding: 0px;
        }
    .commentname {
        color: #333333;
        margin: 0px;
        padding: 5px 5px 5px 0px;
        }
    .commentinfo{
        clear: both;
        }
    .commenttext {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(http://3.bp.blogspot.com/_pt7i0nbIOCY/SKr0-3xHq9I/AAAAAAAAAMw/F-3qMZZGo8M/s320-R/comment.gif) no-repeat top left;
        }
    .commenttext-admin {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(http://3.bp.blogspot.com/_pt7i0nbIOCY/SKr0-3xHq9I/AAAAAAAAAMw/F-3qMZZGo8M/s320-R/comment.gif) no-repeat top left;
        }


  9. Lihat Ke bagian bawah, dan cari kode yang seperti ini :

    <b:includable id='comments' var='post'> 
    <div class='comments' id='comments'> 
    <a name='comments'/> 
    <b:if cond='data:post.allowComments'> 
    <h4> 
    <b:if cond='data:post.numComments == 1'> 
              1<data:commentLabel/>:
            <b:else/>
              <data:post.numComments/> <data:commentLabelPlural/>:
            </b:if>
          </h4>
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
              <data:post.commentRangeText/>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
            </span>
          </b:if>
          <dl 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'>
                <a expr:name='data:comment.anchorName'/>
                <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>
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                <data:post.oldestLinkText/>
              </a>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                <data:post.olderLinkText/>
              </a>
              &#160;
              <data:post.commentRangeText/>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                <data:post.newerLinkText/>
              </a>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>
          <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>
        </b:if>

  10. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

    <b:includable id='comments' var='post'>
      <div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>
    <div id='bg_commentblock'>
    <h4>
    Komentar :
       </h4>
       <div id='commentblock'><!--commentblock-->
    <strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
            <b:else/>
               <strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
            </b:if>
          <dl class='commentlist'>
            <b:loop values='data:post.comments' var='comment'>
              <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
                <a expr:name='data:comment.anchorName'/>
                <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>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
                <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></span>
              <dd class='commenttext'>
                <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:loop>
          </dl>
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                <data:post.oldestLinkText/>
              </a>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                <data:post.olderLinkText/>
              </a>
              &#160;
              <data:post.commentRangeText/>
              &#160;
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                <data:post.newerLinkText/>
              </a>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>
          <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>
        </div><!--end commentblock-->
    </div>
        </b:if>


  11. Klik tombol Simpan Template.
  12. Selesai. Silahkan lihat hasilnya.
      
Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Terutama pada bagian lebar kotak komentar, anda harus menyesuaikan dengan lebar kotak komentar template anda. Sedikit petunjuk, untuk mengubah lebar kotak koemntar di atas, anda tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.

Selamat mencoba.


Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara Modifikasi Kotak KomentarSocialTwist Tell-a-Friend

Comments :

7 comments to “Cara Modifikasi Kotak Komentar”

Nikmaya John said...
on 

Sangat bermanfaat nih tipsnya,,, thanks sob,,,

Cara Online said...
on 

wah handal euy trik2 nya. pasti bermanfaat buat orang banyak...
keep spirit sob !

Harafi Mulki said...
on 

nice info mas
blog do follow
http://harafimulki.blogspot.com

Chelsy Kho said...
on 

Numpang Promo ya

PAPADOMINO agen poker online terpercaya
judi poker
poker online terpecaya
bandar poker
domino online
agen poker online
poker online

Chelsy Kho said...
on 

Numpang Promo ya

PAPADOMINO agen poker online terpercaya
judi poker
bandar poker
domino online
agen poker online
poker online
capsa susun
poker online terpecaya

Unknown said...
on 

Numpang Promo ya

PAPADOMINO agen poker online terpercaya
judi poker
bandar poker
domino online
agen poker online
poker online
capsa susun
poker online terpecaya

Unknown said...
on 

Hai..
kita dari agen poker online papadomino mau memberitahukan bahwa sekarang sedang ada promo bonus yaitu :
* Bonus Mingguan : 0.5% (setiap senin)
* Bonus Referral : 20% (seumur hidup)

Hanya dengan minimal depo & wd Rp 20.000,-
Proses depo / wd cepat
100% PLAYER VS PLAYER Tanpa ROBOT
link pendaftaran : http://papadomino.com/?ref=jesica6413
Untuk info lebih lanjut silahkan hubungi : 2B4A514B

* Buat yang suka bermain togel silahkan kunjungi http://www.papa4d2.com/ref.php?ref=jesica
;)
judi poker
bandar poker
domino online
agen poker online
poker online
capsa susun
poker online terpecaya


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award