ඔබේ බ්ලොගයටත් ලස්සන කොම්මෙන්ට් බොක්ස් එකක්

ඔන්න යාලුවනේ මම අද ගෙනාව පොඩි සෙල්ලමක් ඔයාලගේ බ්ලොග් එකට කොමෙන්ට් බොක්ස් එකක්

වැඩේ මෙහෙමයි

හැබැයි මේක කරනකොට ගොඩක් පරිස්සම් වෙන්න ඕනේ ටෙම්ප්ලේට් එකට කෙලවිලා යන්න කලින් මුලිම්ම එක බැක්අප් කරගෙන ඉන්න.

 ඊට පස්සේ මම ඔය පහලින් දීල තියන කෝඩ් එක කොපි කරගෙන ඔයාලගේ ටෙම්ප්ලේට් එක එඩිට් කර ගන්න

ඊට පස්සේ මෙන්න මෙහෙම ctrl එකයි f එකයි ඔබලා search කරන්න

 <b:includable id='threaded_comment_css'>


එතකොට පහල රූපයේ තියනවා වගේ එකක් එයි



මෙන්න කෝඩ් එක 
/* Fancy Blogger Threaded Comments by MBT starts */                
.comment-thread ol {
                counter-reset: mbt-comments;
}
            .comment-thread li:before {
            content: &quot;\25C4&quot;counter(mbt-comments) &quot;\25BA&quot;;
            counter-increment: mbt-comments;
            font-size: 16px;
            position: relative;
            top: 100px;
            font-weight: bold;
            font-family: arial, georgia;
            color: rgb(199, 199, 199);
            left: -110px;
            padding: 4px 8px;
}
            .comment-thread ol ol {
            counter-reset: mbt-comments-sub;
              padding-top: 20px!important;
              margin-bottom: 25px;
}
            .comment-thread li li:before {
            content: counter(mbt-comments) &quot;.&quot; counter(mbt-comments-sub);
            counter-increment: mbt-comments-sub;
            font-size: 14px;
            position: relative;
            top: 100px;
                left: -80px;
}
             
          .comments .comments-content .comment-thread ol ol {
                padding: 0px 10px 40px 40px;
                border: 1px solid #ddd;
                box-shadow: 3px 4px 9px rgb(218, 218, 218);
                margin-top: 10px;
                  }
                .comments .comments-content .comment-thread ol ol li {
                    margin-bottom: -40px;
}
             
                  .comments {
                    clear: both;
                    margin-top: 10px;
                    margin-bottom: 0px;
                    line-height: 1em; border:0px !important;
                  }
                  .comments .comments-content {
                    font-size: 12px;
                    margin-bottom: 16px;
                    font-family: Verdana;
                    font-weight: normal;
                    text-align:left;
                    line-height: 1.4em;
                    width:88%; margin-left:70px;
                  }
                    .comment-form {
                    max-width: 100%;
                    clear: both;
}
             
                  .comments .comments-content .comment-thread ol li {
                    margin-top: -30px;
}
             
             
                  .comments .comment .comment-actions a {
             
                    cursor: pointer;
                    color: rgb(46, 46, 46);
                    padding: 2px 3px 2px 30px;
                    Position: RElative;
                    -moz-border-radius: 6px;
                    -webkit-border-radius: 6px;
                    border-radius: 6px;
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
                    font-size: 12px;
                    font-weight: 700;
                    margin-right: 15px;
                    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJOrLpjer1VdEgxh0K3Qqw_grSDe4s9g1iSbehPgowOFAWBm1kgAOMu3se5hbXbLjHWGe992bS4jlHdQj30AyZSdWOwNnYldO0I4_a6aCfl7DljZN_7PhPfWsl4X11r_jKquObbM9Mt0WA/s1600/reply.png) no-repeat 9px 0px;
                    float:right;
                  }
             
            
           
             
                  .comments .comment .comment-actions a:hover {
                    text-decoration: underline;
               
                  }
                  .comments .comments-content .comment-thread ol {
                    list-style-type: none;
                    padding: 0;
                    text-align: none;
                  }
             
                  .comments .comments-content .comment-thread ol li {
                  border-bottom: 0px dashed rgb(196, 196, 196);
                    margin-bottom:25px
                  }
             
                  .comments .comments-content .inline-thread {
                    padding: 0.5em 1em;
                  }
                  .comments .comments-content .comment-thread {
                    margin: 8px 0px;
                  }
                  .comments .comments-content .comment-thread:empty {
                    display: none;
                  }
                  .comments .comments-content .comment-replies {
                    margin-top: 1em;
                    margin-left: 40px;
                    font-size:12px;
               
                  }
                  .comments .comments-content .comment {
                    margin-bottom:16px;
                    padding-bottom:8px;
                  }
                  .comments .comments-content .comment:first-child {
                    padding-top:16px;
                  }
                  .comments .comments-content .comment:last-child {
                    border:0px;
                    padding-bottom:0;
                  }
                  .comments .comments-content .comment-body {
                    position:relative;
                  }
                  .comments .comments-content .user {
               
                    font-weight: 700;
                     font-size: 14px;
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
                    color: #333!important;
                  }
           
             
                  .comments .comments-content .icon.blog-author{
                    position: absolute;
                    top: 52px;
                    right: -36px;
                    margin: 5px 0px 0px 0px !important;
                    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQc9VD_ohI7iiTxMiewX2l_OZqZlp-fH-LA53JBGkjBRhnZ04F0nZQFFzmFbBGvDZHBBKUprntopkbNqRbPcqcGsy9Ww_8GnTJhjd4-S5nh37QmFZcpHyeleDAk0LiXH-sAVFD828Wpk6I/s320/aDMIN.png&quot;) no-repeat scroll 0% 0% transparent;
                    width: 90px !important;
                    height: 90px !important; }
             
             
                  .comments .comments-content .datetime, .comments .comments-content .datetime a {
                    margin:0px;
                    display: block;
                    line-height: 30px!important;
                    font: italic 11px georgia;
                    width:180px;
                  }
             
                  .comments .comments-content .datetime a {
                    text-decoration:none;
                  }
                  .comments .comments-content .comment-header
                  {
                    margin:0 0 15px 10px;
                  }
             
                  .comments .comments-content .comment-content {
                    margin: 0 0 10px -50px;
                    }
             
                  .comment-header a {
                    color:#333;
                  }
             
                  .comment-header a:hover {
                    color:#666;
                  }
             
             
                  .comments .comments-content .comment-content {
                    text-align:justify;
                    text-align: justify;
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
                    font-size: 13px;
                    border: 1px solid #ddd;
                    padding: 20px;
                  }
                  .comments .comments-content .owner-actions {
                    position:absolute;
                    right:0;
                    top:0;
                  }
                  .comments .comments-replybox {
                    border: none;
                    height: 250px;
                    width: 100%;
                  }
                  .comments .comment-replybox-single {
                    margin-top: 5px;
                    margin-left: 48px;
                  }
                  .comments .comment-replybox-thread {
                    margin-top: 5px;
                  }
                  .comments .comments-content .loadmore a {
                    display: block;
                    padding: 10px 16px;
                    text-align: center;
                  }
                  .comments .thread-toggle {
                    cursor: pointer;
                    display: inline-block;
                  }
                  .comments .continue {
                    cursor: pointer;
                  }
                  .comments .continue a {
                    display: none;
                    padding: 0.5em;
                    font-weight: bold;
                  }
                  .comments .comments-content .loadmore {
                    cursor: pointer;
                    max-height: 3em;
                    margin-top: 3em;
                  }
                  .comments .comments-content .loadmore.loaded {
                    max-height: 0px;
                    opacity: 0;
                    overflow: hidden;
                  }
                  .comments .thread-chrome.thread-collapsed {
                    display: none;
                  }
                  .comments .thread-toggle {
                    display: inline-block;
                  }
                  .comments .thread-toggle .thread-arrow {
                    display: inline-block;
                    height: 6px;
                    width: 7px;
                    overflow: visible;
                    margin: 0.3em;
                    padding-right: 4px;
                  }
                  .comments .thread-expanded .thread-arrow {
                    background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
                  }
                  .comments .thread-collapsed .thread-arrow {
                    background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
                  }
                  .comments .avatar-image-container {
                    float: left;
                    width: 36px;
                    max-height: 36px;
                    margin-top: 15px;
                    overflow: hidden;
                  }
                  .comments .avatar-image-container img {
                    width: 36px;
                     box-shadow: 2px 2px 0px rgba(0,0,0,0.13)
                  }
                  .comments .comment-block {
                    margin-left: 48px;
                    position: relative;
                  }
             
                  .comments .comments-content .comment-replies {
                        margin-top: 3em;
                        margin-left: 40px;
                        font-size: 12px;
                            }
             
                  .comments .comments-content .comment-replies a {
                    color: #333;
                        }
/* For Animating Comment Header*/
.trigger {
margin-top: 3px;
font-weight: bold;
color: #A1A1A1;
cursor: pointer;
float: right;
font-size: 12px;
margin-right: 10px;
}
.triggeractive {
color:rgb(255, 5, 5);
}
.toggle_container {
overflow: hidden;
clear: both;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin-top: 10px;
}

              
              
                  /* Responsive styles. */
                  @media screen and (max-device-width: 480px) {
                    .comments .comments-content .comment-replies {
                      margin-left: 0;
                    }
                  }
/* Fancy Blogger Threaded Comments by MBT  ENDS*/
සැලකිය යුතුයි.


කහ පාටින්  දාල තියෙන්නේ  ඊතල දෙකක් සඳහා hexadecimal  කේතය.  content property එක අවුලක්   නැතිව එඩිට් කර ගන්න දන්නවා නම් එක එඩිට් කර ගන්න 



දුඹුරු පාටින් ලියලා තියෙන්නේ  ඔයාලගේ බ්ලොග් එකට් එන ය  ඊ-මේල් මගින් පිලිතුරු දෙන්න සහ ඔයාට පුළුවන් ඒවා මකන්න  ඔයාල කැමතිනම් , ඔයාල කැමති විදියක් වෙනස් කරන්න පුළුවන් .




කොළ පටින් Admin Ribbon එක තියෙන්නෙ . ඔයාල කැමති එකත් වෙනස් කරන්න පුළුවන්


ඔයාලගේ බ්ලොග් එක කලුපාටයි නම්,මේක වෙනස් කරන්න,නැත්නම් ලස්සන පසුබිමක් තියන නිසා වෙනස් කරන්න අවශ්‍ය නැ.



#comments h4 කියන එක search කරන්න එතන replace කරන්න CCS ID එක



පහල තියනවා කෝඩ් එක



#comments h4{
color: #4E555A;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif!important;
line-height: 1.6em !important;
font-weight: bold;
margin: 20px 0 50px 0px;
padding: 5px 0 5px 55px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA0SK84B6MtfJ4FDtd8lYvEf6uy8WdBuSGYt917QUTeLmYkn6G9Yoc8fJm-BKCeMSpZn8H8fjnq5r4bXCqY8cK67KlBi81kJWd4iIH9btBUQDbom0VO905bHMW0sEsZsJHtJk80ClOBeZR/s1600/mbt-postcomment.png) no-repeat 5px 10px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.13);
border: 2px dashed #DDD;
border-radius: 4px;
}



මෙතනදි පරිස්සම් වෙන්න
ටෙම්ප්ලේට් එකේ මේක SEARCH කරන්න
<b:if cond='data:post.numComments == 1'>
<h4>
                   <b:if cond='data:post.numComments == 1'>
                     1
                     <data:commentLabel/>
                     :
                     <b:else/>
                     <data:post.numComments/>
                     <data:commentLabelPlural/>
                     :
                   </b:if>

</h4>


ඉහතින් මම දීලා තියන කොඩ් එක ඔයාලගේ </4> ඔයාලගේ HTML එකේ  තියන එකට ගැලපෙනවා නම් පමණක් පහත කොඩ් එක පේස්ට් කරන්න.

 <a href='#comment-form'>Post Yours!</a> <span class='trigger'>Read Comment Policy &#9660;</span> 
<div class='toggle_container'>
<div class='block'>
<font style='color:rgb(255, 0, 0); font-weight:bold;'>PLEASE NOTE:</font>

  <br/>
<b><u>We have Zero Tolerance to Spam.</u></b>  Chessy Comments and Comments with <b>Links</b>  will be deleted immediately upon our review.
</div>
</div>

කහපාටින් දක්වලා තියන කෝඩ් එක එඩිට් කර ගන්න ඔයාලගේ පාටකයන්ට පෙන්න පින්තුර සහ වීඩියෝ උනත් දාන්න පුළුවන්.

කොම්මෙන්ට් එක ඇනිමෙට් වෙන්න හදන්න පුළුවන් 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(document).ready(function(){

    $(&quot;.toggle_container&quot;).hide();

    $(&quot;.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;triggeractive&quot;).next().slideToggle(&quot;slow&quot;);
    });

});

</script>


තද පාටින් දාල තියන කෝඩ් එක ඔයාලගේ එකේ තියනවනම්   ඒ කියන්නේJQuery library source link එක තියාව නම් එක දාන්න එපා.
ඊට පස්සේ ටෙම්ප්ලේට් එක සෙව් කරන්න 
සැයු: පෙර    දැනුමක් නොමැතිව මේවා කරන්න යන්න එපා කරත් කමක් නැ වතුරේ ජබුර බලන්න වතුරට බහින්නම ඕනේ නේ නේද ?හැබැයි මොන්නවා හරි කර ගත්තොත් අපි වග නැ යාලුවේ.හදා ගන්න කරන්න පුළුවන් උදුවක් කරන්නම්.එහෙනම් ඔයාලට ජය

 එහෙනම් හරි නේ මොකක් හරි ප්‍රශ්නයක් තිබුනොත් කොම්මෙන්ට් කරන්නකෝ 

ආ පුළුවන් නම් කොම්මෙන්ට් එකක් දාලා ෂෙයාර් කරගෙන යන්න 

එහෙනම් මම ගියා.


















Comments

Popular Posts