Tutorial Blogskin : Comment Platform.

by - 3:36 PTG


Untitled | via Tumblr
Assalamualaikum :)

Semalam kalau siapa ada tengok tuto yang arrien update malam semalam,arrien ada kata arrien akan buat kemudian kan untuk scroll bar comment platform untuk blogskin? Sebelum korang nak buat scroll bar untuk comment platform,blogskin korang mestilah kena ada comment platform dulu,right? nanty baru arrien buat tuto scroll bar comment platform :D oke follow this tuto untuk letak comment platform. Btw basecode dari unnie atiqah and full edit by me. So tolong hargai oke ^_^


1. Dashboard > Setting > Posts and Comment.
2. Kemudian scroll bawah sikit and korang akan nampak Comment Location right? Oke click Embedded > Save Settings.


3. Now go to Template.
4. Use Ctrl+F and fine code </style>
5. Copy this code ;

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1.8em 0; font-size:10px; text-transform:uppercase; color: #aaaaaa; line-height:10px; border-bottom: 1px dashed #dedede; background: ; text-align:center;
font: 15px 'ttn';}
#comments h4 strong {font-size:8pt tahoma;}
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}
#comments {
margin:5;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
.comment-icon blogger-comment-icon{display:none}
#comments-block {
margin:2px ;
}
span.comment-icon{display:none}
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0px;
}
.comment-body p {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkMSxtukiFIUOXKxEjWqHHMKGqL50fQfGoRWmzcvGDIwnx_cJdfFfLhAQRhYpUlOAgsQtJzY_W8a5qFNbpwNFLQfMHcjkA1u3LQ4Dgs6pcl4S6ElQjy_DWJn9lYwOhkKEoLdvu0Hdn5dK/s1600/tumblr_ls0w5txuft1r3vazto8_250.png);
border:3px solid #ccc;
margin:0em;
padding:5px;
color:#808080;
}
6. Paste BEFORE code  </style>
7. Next, korang cari code nie pula;
<$BlogItemBody$>
8. Copy code bawah nie dan REPLACE dekat code  <$BlogItemBody$> tadi.

<$BlogItemBody$>
<center><br><MainPage>
<BlogItemCommentsEnabled>
<BlogItemCommentsEnabled><a href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$>
comment (s) </a> | <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>>Jom comment (s) </a>
</BlogItemCommentsEnabled>
</BlogItemCommentsEnabled>
</MainPage>
<br>
<div style="text-align:right;" ">
<!-- Begin #comments -->
<ItemPage>
<div id="comments"style='overflow:auto; width:ancho;height:400px;'>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-poster" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
</dd>
<dd class="comment-timestamp"><a href="<$BlogCommentPermalinkURL$>" title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<p class="comment-timestamp">
</p>
</div>
</ItemPage>
<!-- End #comments -->
9. Save and Preview.
P/s : korang akan jumpa dua code <$BlogItemBody$> kan? so make sure korang replacekan di kedua-dua code yang korang jumpa :)

Note :
Merah : Url Background.
Biru : Code warna


You May Also Like

6 Comments