Tutorial Comment Box Macam Manja

Views

haa. . comel tak? nak buat tak macam nie?ok2. . ikut step kat bawah ok?

1) Dashboard > Design > Edit HMTL > Tick Expand Widget Templates.
2) Korang tekan CTRL+F atau F3 then cari code kat bawah:
<b:loop values='data:post.comments' var='comment'>
3) Then korank scroll ke bawah sikit n korank akan jumpe code macam kat bawah
<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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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> 

4) Padam code yang korank jumpe tu
5)Pastu korank copy code kat bawah sebagai ganti kepada code yang korank dah padam tu. . 
<b:loop values='data:post.comments' var='comment'>

<div expr:class='&quot;author-comment &quot; + 
data:comment.authorClass'>
            <dt class='comment-author' 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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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><div/></b:loop>


5) Sekarang, cari code ni pulak :
 ]]></b:skin
6) Copy code dibawah dan paste dibahagian atas code ]]></b:skin
.comment-footer{

margin-bottom:0 !important;
}
.author-comment{
background : #FFFFFF url(url gambar kawan korank) no-repeat right top ;
padding:5px;
margin-bottom:1.5em;
border:2px solid #000000;
border-radius:10px;
}
.author-comment.blog-author {
background: #D8D8D8 url(url gambar tuan blog) no-repeat right top;
}


7) Preview dulu okeyh?kalau da jadi Save jer


P/S:
A> Background comment box kawan korank. . boleyh cari disini
A> Tebal border comment box. . boleyh tukar
A> Boleyh tukar kepada solid/dashed/dotted
A > warna border
A > Background comment box korank. . boleyh cari disini
A > Url gambar kawan korank n tuan blog,korank leyh amek kat bawah


Hijau
Taiko blog
http://i1182.photobucket.com/albums/x450/Cyunk_Nor/TAIKOBLOG.png
Kawan Saya
http://i1182.photobucket.com/albums/x450/Cyunk_Nor/KAWANpng.png

Merah
Taiko Blog
http://i1182.photobucket.com/albums/x450/Cyunk_Nor/F1.png
Kawan Saya
http://i1182.photobucket.com/albums/x450/Cyunk_Nor/F2.png

Biru
Taiko Blog
http://i1182.photobucket.com/albums/x450/Cyunk_Nor/F4.png
Kawan Saya
http://i1182.photobucket.com/albums/x450/Cyunk_Nor/f3.png


SELAMAT MENCUBA!!!

6 orang duk membebel:

yana sopian said...

ahaa.. comment yana yg kt ats tue.. hee.. tengs manje.. ;)

Misz Azney said...

hahaha. . pasnieyh glemer rr yana kan?? huhu. . oke. no hal lha

yana sopian said...

ehee.. glamour kew..?? x laa.. manje lg hot kowt.. :)

yana sopian said...

i take ur banner manje..
look at this..
http://honeymiaka91.blogspot.com/p/banner.html

Misz Azney said...

haha. . hot lha sgt. . mne ad. . tade mkne nye na hot2. . cik lyssa faizureen lgi hot kowt ! tgok follower dye. . ratus riban woooo. . byk gyler

Misz Azney said...

ok. . amek lha. . thanx auu

Related Posts Plugin for WordPress, Blogger...


 
Copyright © . All Right Reserved by Mizs Nora