Toturial : Kotak komen comel bawah post (Blogskin)

Assalamuailaikum 
   
Apa khabar anda semua.  Agak lama rasanya saya tidak berblogging..kesihatan tidak berapa mengizinkan. he he..tapi tak mengapa. Untuk mengubat rasa rindu pada dunia blogging ni..saya dengan rasa rendah dirinya nak kongsi satu toturial yang pada asalnya saya juga berminggu-minggu dok godek-godek coding, macam mana nak buat kotak komen kat bawah post kita.

sebenarnya ini pertama kali saya guna BLOGSKIN sebagai template blog saya. So agak terkial-kial sikit bila guna benda baru. Tapi, usaha tangga kejayaan tak gituu??ha ha..

hah!! pe lagi jom kita toturial bersama-sama yer..muahhhhh   

Pe pun tolong backup atau copy code blog korang dulu sebelum ianya jadi ntah apa-apa plak nanti. Kekadang code skin kita tak sama.



1.Dashboard > Settings > Posts and comments > Comments > Embedded > Save settings!




2.Selesai save yang tadi , korang pergi template dan search code
 
</style>
 
3.selesai? Copy & paste code bawah ni sebelum code yang korang cari tadi
 
/* Comments
 ----------------------------------------------- */
 #comments h4 {
margin:1.8em 0; 
font-size:10px; 
text-transform:uppercase; 
color: #aaaaaa
line-height:10px; 
border-bottom: 1px dashed #dedede; background: ; 
font-weight:normal;
}
 #comments h4 strong {
font-size:8pt verdana;
}
 #comments-block {
background: ; 
font:normal 8pt arial; 
line-height:1.2em; 
padding:4px;
}
 #comments-block dt { 
margin:.5em 0;
}
 #comments-block dd { 
margin:.25em 0 0;
}
 #comments-block dd.comment-timestamp {
margin:-.25em 0 2em; 
font:10px verdana; 
text-align:right; 
text-transform:normal; 
letter-spacing:.0em;
}
 #comments-block dd p {
margin:0 0 .75em; 
padding:4px; 
background:#FFF4D1
border:2px solid #F7CBB0
border-radius:5px;
}
 .deleted-comment { 
font-style:italic; 
color:grey;
}
 .paging-control-container { 
float: right; 
margin: 0px 0px 0px 0px; 
font-size: 80%;
}
 .unneeded-paging-control { 
visibility: hidden;
}
4.Seterusnya, search code ini pula
 
 <$BlogItemBody$>
 
5.Delete code <$BlogItemBody$> dan gantikan dengan code bawah ni
 
<$BlogItemBody$>

 <center><br><MainPage>
 <BlogItemCommentsEnabled>
 <BlogItemCommentsEnabled><a href="<$BlogItemCommentCreate$>"
 <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$>
 Orang Mengomel <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>></a>
 </BlogItemCommentsEnabled>
 </BlogItemCommentsEnabled>
 </MainPage>
 <br>
 <div style="text-align:right;" ">
 <!-- Begin #comments -->
 <ItemPage>
 <div id="comments">
 <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 -->
6.selesai semua dah kan???Periksa dulu kalau-kalau code <$BlogItemBody$> ada dua , so korang kena gantikan kedua-duanya sekali tau

7.Then Preview, kalau perfect menjadi. Terus save template!
 
Kalau tak keluar ERROR, kira jadila tu..hehe. Selamat mencuba!



Catat Ulasan

0 Comments

Borang Maklumat Hubungan