Tutorial:Comment box hover

Hye :D Dah 2 minggu tak updated blog?okays now xiao nak ajarkan tutorial comment hover cuba try tengok kat comment box xiao? hover kan?best x? jom lah buat tuto dah lama xiao tak buat tutorial 

Dashboard<Design<Edit html<Tick kotak expand widget templates ..Backup templates berjaga2 ..
dengan menggunakan ctrl+f cari kode ni ..

b:loop values='data:post.comments' var='comment'>

 jumpe x? kalau jumpe bagus .. !

<b:loop values='data:post.comments' var='comment'>            <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>          </b:loop>

Copy warna ungu tuu n replace kode xiao bagi bawah ni warna merah jangan sentuh !

 <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>

Dan save templates :D


Belum  habis lagi  tau  !!
Dashboard<design<edit html<tick expand...


dengan menggunakan ctrl+f cari kode ni

]]></b:skin>

ni untuk tak hover 

 .comment-footer{margin-bottom:0 !important;}.author-comment{background : #FFFFFF  url(LINK IMAGE KAWAN) no-repeat right top ;padding:5px;margin-bottom:1.5em;border:1px solid #FFFFFF;border-radius:10px;}.author-comment.blog-author {background: #D8D8D8 url(LINK IMAGE OWNER) no-repeat right top;}

Ni untuk hover punye  !!

.comment-footer{margin-bottom:0 !important;}.comment-body p {margin:0 0 .75em;padding: 20px 10px 10px 10px;background: transparent;-moz-border-radius: 25px 25px / 25px 25px;border-radius: 5px 5px / 5px 5px;border-left: 2px solid #000000 ;border-right: 2px solid #000000 ;}.author-comment{background : #FFFFFF url(LINK IMAGE KAWAN) no-repeat right top ;padding:5px;margin-bottom:1.5em;border:1px dashed #000000 ;border-radius:10px;-webkit-transition-duration: 1s;}.author-comment:hover{background : #FFFFFF  url(LINK IMAGE KAWAN) no-repeat right bottom ;padding-top:5px;padding-bottom:5px;margin-bottom:1.5em;border:1px dashed #000000 ;border-radius:20px;-webkit-transition-duration: 1s;}.author-comment.blog-author {background: #ffc1cf url(LINK IMAGE TUAN BLOG) no-repeat right top;padding:5px;margin-bottom:1.5em;border:1px dashed #ffc1cf;border-radius:10px;-webkit-transition-duration: 1s;}.author-comment.blog-author:hover {background: #FFFFFF url(LINK IMAGE TUAN BLOG) no-repeat right bottom;padding-top:5px;padding-bottom:5px;margin-bottom:1.5em;border:1px dashed #ffc1cf;border-radius:20px;-webkit-transition-duration: 1s;}

Paste diantara dua kode ni diatas kode korang cari tadi !! 


Yang tak hover
1.Warna purple yang tak hover korang ganti dengan tulisan korang 
boleh create kat photoshop


2.n sama je yang owner tulisan merah  ganti dengan tulisan korg sendiri
boleh create kat photoshop



3.Ganti code color kehendak korang kays n border skali :D


Yang hover 
1.Ganti je dua2 tulisan pink url image kawan ganti dengan image or tulisan kehendak
korang boleh create di ps


2.Ganti url image tuan blog warna biru dengan image korang sendiri 
boleh create sendiri


3.Ganti code color kehendak korang cun melecun boleh edit2 kk 


Bye ^_^ jadi x? korang boleh pilih diantara hover or tak hover suka hati korang lah !