тнɪɴκεʀʙεʟʟооɴ: Tutorial Blog

Ngoaaam nyam.. Ohayou, minna. Sebenarnya saya sedang malas saat menulis artikel ini, tapi daripada menyesal karena hal yang sama, ahirnya saya putuskan untuk menulis saja. Kali ini, saya ingin berbagi hasil modifikasi Comment Form atau Kotak Komentar.

"No bacot, Kakak."
"Oh, dengan senang hati, Kakek.."

* Seperti biasa, masuk Design, Edit HTML, lalu centang pada Expand Widget Template.
* Cari kode seperti berikut

#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;
}

* Hapus, lalu ganti dengan kode berikut

#comments h4 {
background:#000;
border:1px outset #000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin:0 0px 0 0px;
padding:5px 10px 5px 10px;
font-size:15px;
font-weight:bold;
font-family: Century Gothic;
line-height:1.1em;
color:#ffffff;
}
#bg_commentblock {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiknKp84y5QT8ntzO06B-wz6Yj6M2I82dgAGJ6orpB9Ra4gcrqWWw_6jRLoOnlMMcc300sGKdHRXzjUkd2VT_dYVCdti8yIIw7f7L51XNKxGKUOpzlM2-S_OkaI6RmLy42UXotG0pJ1zg95/s1600/9BBCA6-70.png");
margin:0px 0px 5px 0px;
padding:5px 5px 5px 5px;
border:1px outset #9BBCA6;
color:#000;
}
#commentblock {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwO2diTyiGXpX_LhmC9AGYVmTuY2vLfCzNsSQ0hviB002AfwXy0PITxLN4ts7RcTUHvoPkAhv2TM9T_QJUqMk-xuLtbOkMg9Vwbf_aiHxGMNdFYMNmkvEIILLzdbnEbSnxLRN2BvbhzWIb/s1600/black-50.png");
text-align:left;
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 40px;
border: 1px outset #000;
color:#FFFACD;
}
#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: 0px 0px 0px 0px;
padding: 0px 5px 0px 5px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwO2diTyiGXpX_LhmC9AGYVmTuY2vLfCzNsSQ0hviB002AfwXy0PITxLN4ts7RcTUHvoPkAhv2TM9T_QJUqMk-xuLtbOkMg9Vwbf_aiHxGMNdFYMNmkvEIILLzdbnEbSnxLRN2BvbhzWIb/s1600/black-50.png");
border: 1px inset #000;
color:#FFFACD;
}
.commenttext-author {
clear: both;
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 5px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwO2diTyiGXpX_LhmC9AGYVmTuY2vLfCzNsSQ0hviB002AfwXy0PITxLN4ts7RcTUHvoPkAhv2TM9T_QJUqMk-xuLtbOkMg9Vwbf_aiHxGMNdFYMNmkvEIILLzdbnEbSnxLRN2BvbhzWIb/s1600/black-50.png");
border: 1px inset #000;
color:#FFFACD;
}
.comment-form {
width: 700px;
margin: 0px 0px 0px 0px;
padding: 0;
}
.comment-editor {
margin: 0px 0px 10px 0px;
padding: 0px 5px 0px 5px;
font-size:13px;
font-family: Century Gothic;
line-height:1.1em;
color:#32f353;
}

* Cari lagi kode 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>
           
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           
          <data:post.commentRangeText/>
           
          <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>
      <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='"comment-author " + 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>
           
          <data:post.commentRangeText/>
           
          <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>

* Hapus, lalu ganti dengan kode 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
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> at “<data:post.title/>”
</b:if>
   </h4>

   <b:loop values='data:post.comments' var='comment'>
     <div id='bg_commentblock'>
           <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
              <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>
            </dt>
            <div id='commentblock'>
              <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/>
              <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>
              <span class='comment-timestamp'>on the 
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </div>
     </div>
   </b:loop>

      <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>
           
          <data:post.commentRangeText/>
           
          <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>

* Save, lihat hasilnya..

Omong - omong, kamu perlu mengatur ulang lebar yang ada pada kode di atas, karena pengaturan lebar tiap blog pasti berbeda satu sama lain [IMHO]. Tapi jika tidak bermasalah dengan hasilnya nanti, kamu boleh tidak menggantinya . Oyasuminasai..

Tulisan saya kali ini akan berbeda dengan tulisan saya sebelumnya. Dimotivasi oleh para blogger yang senantiasa berbagi pengetahuan akan blogging, saya mencoba untuk membuat tulisan tentang tutorial dalam blogging. Di tutorial pertama ini, saya membahas langkah untuk modifikasi older-link, newer-link, and home atau Next, Previous and Home.

★ Pertama, masuk Design, lalu Edit HTML, kemudian centang pada Expand Widget Templates

★ Untuk newer-link, cari kode ini <data:newerPageTitle/>

★ Ganti dengan kode berikut <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbaYIUMtY3spB2MkWYO4jB2YReXL-mNAACrtgnIQ7Wy8s73cNfl-S8TmwGLVCuavLmhx5msrSobnfRAN0Byg4GoNkbXg_g575Y38AGPMcNfPCsV9GcsuzV3sU0sSrIjsIT9j3AfWSQ2v3-/s1600/previous.png' />

★ Untuk older-link, cari kode ini <data:olderPageTitle/>

★ Ganti dengan kode berikut <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2mci6oSO8346UuD00WBMkuGRimXBzsfhpcqWyqJBSDh3ADvWoLwOmJBE0VMaplJZo9JtL4EAU7R5epkUv5VTjI1D7L9PZsM6spexMidTQC-4lbR5HoyF5QzZY_moDlmF05pqBYzRhxP-/s1600/next.png'/>

★ Untuk home, cari kode ini <data:homeMsg/>

★ Ganti dengan kode berikut <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6dBBkj_uceh-PrCm026RWmk_LdFTfLasLgR00lNrv5RgHDdCZBWJQ6U3uAtZcFcYIJHUKtvOvuUUb8vas1xjvAye1dbWX9dBPeCMDvU2imJAzkzsDdd8HopgOUj56lsPFyeDe6Th_Ae6g/s1600/home.png'/>

Tulisan berwarna merah adalah gambar pengganti older-link, newer-link, and home. Dapat kamu ganti dengan gambar lain.

Modifikasi: Comment Form

Menyembunyikan Status Message

Membuat: Search Box

Membuat: Add Widget

Modifikasi: Next, Previous, and Home

Obrolan

Teman Saya

Riwayat Komentar