Tutorial : Customize Comment box

Tuesday, September 09, 2014






Assalamualaikum,

Hey guys :)


Harap korang semua sihat . Harinih CM nak update tutorial . Ada tak yang nak comment box macam CM ? If ada korang boleh guna tuto nih :)







Step 1
Dashboard > Template > Edit HTML
Step 2
Copy code bawah nih and paste bawah  <head>
<link href='http://fonts.googleapis.com/css?family=Sue+Ellen+Francisco|Raleway' rel='stylesheet' type='text/css'/> 
Step 3 CTRL + F search /* Comments dan tukar kepada code dibawah
/* ============================= Comment ============================= */ .comments .comments-content {   font:normal 14px Century Gothic;   text-align:left;   line-height:1.4em;   margin-bottom:16px; border-bottom: 1px solid #eee; } .comments .comment-block { margin-left: 48px; position: relative; border: 1px solid #eee; margin-bottom: 48px; background:#fff; } .comments .comments-content .user { text-align: center; font: 200 25px 'Sue Ellen Francisco', cursive; letter-spacing: 2px; padding: 4px; } .comments .comments-content .comment-content { text-align: justify; padding: 15px; border-top: 1px solid #eee; } .comments .comments-content .user a{ color:#828081; margin-left: 6px; } .comments .comments-content .datetime {   margin-left:10px; font-family: 'sdkwangsoo_b'; font-size :16px; color :#e0b05d; } .comment-replies{   background:#fff;   box-shadow:inset 0 0 0 0px #f2f2f2;   border-radius:3px; } .comments .comment .comment-actions a {   background:#color code;   color:#fff;   padding:2px 5px;   margin-right:10px;   font:18px 'sdkwangsoo_b';   border-radius:3px;   -moz-border-radius:3px;   -webkit-border-radius:3px;   transition:.2s linear;   -moz-transition:.2s linear;   -webkit-transition:.2s linear; } .comments .comment .comment-actions a:hover {   background:#color code;   text-decoration:none;   transition:.2s linear;   -moz-transition:.2s linear;   -webkit-transition:.2s linear; } .comments .avatar-image-container { } .comments .thread-toggle a {   color:#828081; font-size:20px; font: 200 25px 'Sue Ellen Francisco', cursive; } .comments .thread-toggle a:hover {   padding-left:10px;   color:#a47;   text-decoration:none; } .comments .thread-toggle a:hover, .comments .thread-toggle a {   transition:.2s linear;   -moz-transition:.2s linear;   -webkit-transition:.2s linear; } #comments h4 { padding: 9px 3px 10px; margin: 0 0 0px; letter-spacing: 3px; border-bottom: 1px solid #eee; color: #545454; text-transform: uppercase; font: 200 25px 'Sue Ellen Francisco', cursive; text-align: center; margin-top: 5px; } #comments-block{ margin:0; padding:0; } #comments-block .comment-author { border:1px solid #eee; font-size: 12px; margin:6px 0px; border-radius:10px 10px 0px 0px; padding:10px; } #comments-block .comment-body{ margin:0; font-size: 14px; font-family: Century Gothic; font-family: ; border-left: 1px solid #eee; border-right: 1px solid #eee; margin-top: -7px; padding: 20px; } #comments-block .comment-footer{ margin: 0; font-size: 11px; font-weight: normal; margin-bottom: 20px; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: -12px; padding: 5px; border-radius: 0px 0px 10px 10px; background: #fff; padding: 25px; } #comments-block .deleted-comment{ font-style:italic; color:gray; } #comments-block .comment-author a{font: 200 25px 'Sue Ellen Francisco', cursive;color:#828081 !important;} #comments-block .comment-footer a, .comment-body a{color: #fff !important; font-size: 16px; font-family: Century Gothic; float: right; margin-top: -120px; background: #color code; padding: 5px; font-family: 'sdkwangsoo_b';} .comments .continue a { display: block; background:#color code; font-weight:normal; padding: 4px; color: #fff; padding: 5px; width: 50px; font-family: 'sdkwangsoo_b'; font-size: 18px; text-align:center; } .deleted-comment {   font-style:italic;   color:gray; } .avatar-image-container{float:left;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;background:#fff;padding:3px;border: 1px solid #eee;} .avatar-image-container img{ border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .avatar-image-container img:hover{ border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px; transform: rotate(360deg) ; -webkit-transform: rotate(360deg) ; -moz-transform: rotate(360deg) ; -o-transform: rotate(360deg) ; -ms-transform: rotate(360deg) ;}
Step 4 CTRL + F search ]]></b:skin> Step 5 Copy code dibawah nih dan paste atas ]]></b:skin>
@font-face{font-family:sdkwangsoo_b; src:url('http://static.tumblr.com/8uo0l3u/Sqgn6v3py/sdkwangsoo_b.ttf')}
Step 6 Preview. If semua okay and then save :) color code boleh amik di sini # Kalau tak jadi or ada masalah boleh contact CM yer . Roger je okay ^_^ Pecah kaca pecah gelas, Sudah baca harap balas .

6 comments

Hey ! Jangan Lupa Tinggalkan Komen Tau ♥

Latest Instagrams

© CikkMiraDotCom. Design by FCD.