19‏/06‏/2015


من هذا المنبر أتمنى لكم رمضان مبارك سعيد و أسأل الله لكم حسنات تتكاثر وذنوب تتناثر وهموم تتطاير وأن يجعل بسمتكم سعادة وصمتكم عبادة وخاتمتكم شهادة ورزقكم فى زيادة و أدعو الله أن يتقبل صالح العمل منكم و منا.

سأتطرق اليومإلى تغيير شكل صندوق تعليقات البلوجر إلى شكل جذاب و إحترافي .معظم المدونات تحتوي على صندوق تعليقات مقدم من بلوجر، إفتراضي رغم أن نسبة إستعماله قلّت في الآونة الآخيرة حيث بدأت معضم المدونات بإستعمال تعليقات ديسكس لكن ما علينا لأنه يوجد أيضاً مدونات تحبذ الصندوق لهذا فقد خصصت هذه التدوينة لأحد أشكال الصناديق لأنه وبإذن الله سأوفر لكم أشكال آخرى فيما نخوضه من تدوينات.
مميزات الصندوق أنه له شكل بسيط وجذاب وكذلك يحتوي على إبتسامات لتعبير عن التعليق


شرح  طريقة التركيب
* الكود هو فقط لإظهار أيقونة الإبتسامة إذا كنت تتوفر عليه فلا داعي لإضافته ضعه فوق </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
1 . توجه لقالب >> تحرير 
2.  ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style>   </style> فوق </head>
 
/* CSS Comments Style1 Ar1web.com */
#comments{background:#fff;clear:both;margin:20px 10px;line-height:1em;padding:20px;border:1px solid #e9e9e9;}
#comments h3{line-height:20px;margin-bottom:20px;margin-top:-20px;  margin-left: 485px;;font-family:cursive,droid arabic kufi;font-size:14px;position:absolute;background:#fff;color:#999;font-weight:700;text-transform:uppercase;padding:10px 20px 10px 50px;border:1px solid #e9e9e9;border-top:none;}
#emo-box {clear: both;margin: 0 30px;}
#comments h3:before {  font-family: fontawesome;content: "\f086";font-size: 18px;position: relative;left: 0;top: 0;font-weight: normal;}
#comments .click-comment{background:#fff;color:#fff;float:left;text-decoration:none;display:inline;line-height:20px;margin-bottom:20px;margin-top:-20px;margin-left:-20px;font-family:'Open Sans',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;padding:10px 0;border:1px solid #e9e9e9;border-top:none;border-left:none;}
.fa-arrow-circle-down:before {content: "\f0ab";color: #999999;margin-left: 35px;font-size: 18px;}
.comment_avatar_wrap{border-radius:10%;width:46px;height:46px;border:none;background:none;text-align:center;padding:0;overflow:hidden;}
#comments .comment_avatar {border-radius:10%;width:46px;height:46px;max-width:46px;max-height:46px;background:#f9f9f9;padding:4px;text-align:center;position:absolute;top:0;right:0;overflow:hidden;}
#comments .comment_admin .comment_avatar{border-radius:10%;width:46px;height:46px;max-width:46px;max-height:46px;padding:4px;text-align:center;position:absolute;top:0;right:0;overflow:hidden;}
#comments .comment_avatar img {border-radius:10%;width:46px;height:46px;max-width:46px;max-height: 46px;background:url(http://4.bp.blogspot.com/-hLqBXiTrm0Q/VJ7pie2jM3I/AAAAAAAABwI/aHQypgTLHu8/s1600/avatwisted.png) no-repeat;overflow:hidden;}
.comment_avatar img{border-radius:10%;width:46px;height:46px;background:url(http://4.bp.blogspot.com/-hLqBXiTrm0Q/VJ7pie2jM3I/AAAAAAAABwI/aHQypgTLHu8/s1600/avatwisted.png) no-repeat;overflow:hidden;}
.comment_name a{font-family:cursive,elecrtolize;font-weight:700;font-size:15px;padding:5px 0;color:#666;text-decoration:none}
.comment_child .comment_name a{color:#666;}
.comment_child .comment_name a:hover {color:#f53b3b;}
.comment_admin .comment_name{background:#fff;padding:0 20px 0 65px;right:50px;top:10px;display:inline;font-weight:700;font-size:16px;font-family:'Open Sans',sans-serif;text-decoration:none;border-radius:3px;}
.comment_admin .comment_date{right:10px;font-weight:700;font-size:11px;}
.comment_name{font-size:16px;background:#fff;font-family:'Open Sans',sans-serif;font-weight:700;padding:0 20px 0 65px;position:absolute;right:50px;top:10px;display:inline;line-height:35px;border-radius:3px;transition:all .3s ease-out;}
.comment_name:hover,.comment_name a:hover,.comment_admin .comment_name a:hover,.comment_admin .comment_name:hover{color:#f53b3b;}
.comment_service{position:absolute;top:31px;left:0;}
.item-control {display:block;}
.comment_date a{font-size:11px;font-weight:400;text-transform:none;text-decoration:initial;
color:#666!important;text-align:center;padding:1px 6px;opacity:0.9;transition:all .3s ease-out;}
.comment_date a:hover{color:#f53b3b!important;}
.comment-delete{position:absolute;display:inline-block;top:-2px;left:50px;
color:#666!important;text-align:center;font-family:'Open Sans';font-size:11px;padding:2px 6px;opacity:0.9;transition:all .3s ease-out;}
.comment-delete:hover{color:#f53b3b!important;}
.comment_body{margin:20px 0;padding:0;position:relative;}
.comment_body p{line-height:1.6em;color:#666;font-size:13px;font-family:cursive,'Droid Arabic Naskh';word-wrap:break-word;background:#fafafa;padding:30px 20px;position:relative;margin-top:25px;box-shadow:0 0 0 1px #e9e9e9;transition:all .3s ease-out;text-align: right;}
.comment_body p:before, .comment_body p:after {bottom:100%;right:5%;border:solid transparent;
content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.comment_body p:after {border-color:rgba(255,255,255,0);border-bottom-color:#fafafa;
border-width:8px;margin-right:-8px;}
.comment_body p:before {border-color:rgba(255,225,255,0);border-bottom-color:#ddd;border-width:9px;margin-right:-9px;transition:all .3s ease-out;}
.comment_child .comment_body p{color:#666;}
.comment_body p img{vertical-align:middle;margin:0 5px;}
.comment_body p:hover{box-shadow:0 0 0 1px #ccc;}
.comment_body p:hover:before {border-bottom-color:#aaa;}
.comment_inner{padding-bottom:5px;margin:5px 0}
.comment_child .comment_wrap{padding-right:7%}
.comment_child .comment_body{margin-top:-15px;}
.comment_reply{display:inline-block;background:#3A3A3A;color:#fff!important;text-align:center;
font-family:cursive;font-size:11px;margin:10px;padding:4px 6px 6px 6px;opacity:0.9;border-radius:2px;float: right;}
.comment_reply:hover{text-decoration:none!important;background:#FC4F3F;color:#fff!important;}
.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0;}
.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#666}
#comment-editor{width:103%!important;background:url('http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif') no-repeat 50% 25%;position:relative;margin-right:-8px;margin-top:-15px}
.comment-form p{position:relative;background:#575253;color:#fff;font-size:14px;font-family:cursive,ge_ss_threeregular;line-height:1.5em;margin-bottom:20px;padding:15px;border-radius:3px;text-align: right;}
.comment-form p:after {display: inline-block;content: '';position: absolute;top: 100%;right: 20px;margin-top: 0;height: 0;width: 0;border: 9px solid transparent;border-top-color: #575253;}
.comment-form p:before {border-color:rgba(221,221,221,0);border-top-color:transparent;border-width:11px;margin-right:-11px;transition:all .3s ease-out;}
.comment_reply_form{padding:0 0 0 7%}
.comment_reply_form .comment-form{width:100%}
.comment_emo_list .item{float:right;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#666}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-right:10px;clear:both}
.unneeded-paging-control,.comment_author_flag{display:none}
.comment_admin .comment_author_flag {display: inline-block;font-family: cursive;font-size: 9px;color: #FFF;text-align: center;position: absolute;left: -3%;
top: 31%;line-height: normal;background: #FC4F3F;padding: 5px;border-radius: 2px;}
.comment_child .comment_admin .comment_author_flag {color:#fff;left:-40%;}
.spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px;
display:inline-block;padding:10px 15px!important;}
.deleted-comment{display:inline-block;color:#999;word-wrap:break-word;background:#f9f9f9;margin-top:20px;padding:10px;font-size:13px;font-family:'Open Sans',Helvetica,Arial,sans-serif;border-radius:3px;opacity:1;}
iframe{border:none;overflow:hidden}
.paging-control-container{text-align:center;margin:0 0 0 25%;}
.paging-control-container a{text-align:center;margin:0 auto;background:#666;padding:5px 10px;
color:#fff;transition:all .3s ease-out}
.paging-control-container a:hover{background:#e6ae48;color:#fff;}
.comment_header {padding:0;}
.comment_child .comment_header {padding:0;}
#emo-box,#hide-emo {display:none}
.small-button1 a {font-size: 12px;margin: 10px 5px 5px 0;display: inline-block;color: #3A3A3A;padding: 1px 6px;cursor: pointer;border-radius: 2px;background-color: rgba(255, 255, 255, 1);transition: all 0.3s ease-out;}
.small-button1:hover a{background-color:rgba(255,255,255,0.3);color:#fff;display:inline-block;}
span.small-button1 {text-align:right;display:inline-block;  margin-left: 95%;}
.fa-smile-o:before {content: "\f118";font-size: 14px;}
.fa-times:before {content: "\f00d";font-size: 14px;}
i.fa.fa-arrow-circle-down {margin-left: -70px;margin-right: 6px;}

4. إبحث عن <b:include data='post' name='threaded_comments'/> ثم غيره بالكود التالي قد تجد الكود متكرر غيرهم بأكملهم

<b:include data='post' name='comments'/>

5. إبحث عن <b:includable id='comments' var='post'>...</b:includable>  وضع الكود التالي بدله
* ملاحظة : إذ لم تجده إبحث عن نصفه

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'><i class='fa fa-arrow-circle-down'/><data:commentLabelPlural/></a>
  </b:if>
               
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                       
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                             
   <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>                                                                                      
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if>
         
    <div class='comment_body'>
    <div class='comment_header'>
     <div class='comment_avatar_wrap'>
   
     </div>
                         
     <div class='clear'/>
    </div>

     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>
<div class='comment_author_flag'>المشرف</div>
</div>
<span class='comment_service'>
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='تاريخ التعليق'>
                  <data:comment.timestamp/>
                </a></span>
<b:include data='comment' name='commentDeleteIcon'/>
  </span>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>رد</a>
                        <div class='clear'/>
                    </b:if>
                 <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>                                         
    </div>                         
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
           
    <div class='comment_child'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>              
    </div>
   </b:loop>              
   </div>    
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
     <span class='paging-control-container'>
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form' id='comment-form'>         
         

   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>   
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>                
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
     
       <script async='async' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' type='text/javascript'/>
       <script type='text/javascript'>
      
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 3;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
        Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
      
        //Pengaturan Emoticon
        Emo_List = [
        ':)'   ,'http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png',
        ':('   ,'http://4.bp.blogspot.com/-RDtah-TXteU/VJNblptXyEI/AAAAAAAAH70/GGZg4MMUVxA/s1600/sad.png',
        ' =('  ,'http://1.bp.blogspot.com/-dzENpgankUY/VJNbcfrM59I/AAAAAAAAH6A/UC7FJQwT-9E/s1600/disappointed.png',
        '^_^'  ,'http://2.bp.blogspot.com/-eeLWBWx7zaI/VJNbnR-JhoI/AAAAAAAAH8E/4vUZ3j_GoEg/s1600/shy.png',
        ' :D'  ,'http://2.bp.blogspot.com/-rvM5sSYqd2k/VJNbjkemjyI/AAAAAAAAH7k/QcT_8JETczs/s1600/noprob.png',
        '=D'   ,'http://1.bp.blogspot.com/-DB0TS3jw6n8/VJNbgab1A_I/AAAAAAAAH7I/4Cr8aYd6AmU/s1600/happy.png',
        ':p'   ,'https://i0.wp.com/i.imgur.com/nL704UD.png',
        '|o|'  ,'http://3.bp.blogspot.com/-i5w-i1jFe0U/VJNbaQxedgI/AAAAAAAAH5o/z7LK9qxEebs/s1600/clap.png',
        '@@,'  ,'http://2.bp.blogspot.com/-lbZ9iDF66F8/VJNbqSG8yNI/AAAAAAAAH9A/bnAQmQrrrZo/s1600/surprise.png',
        ' ;)'  ,'http://1.bp.blogspot.com/-Q--_b4-u1ZY/VJNbrI3A3LI/AAAAAAAAH8w/xshqjz4f3cs/s1600/trope.png',
        ':-bd' ,'http://3.bp.blogspot.com/-_lM3w2ZD7K8/VJNbiIf2PII/AAAAAAAAH7g/U5qLOVDZg8c/s1600/like.png',
        ':-d'  ,'http://4.bp.blogspot.com/-EdvYpWDdZPI/VJNbc2J75FI/AAAAAAAAH6I/kcpuLO7TXFg/s1600/dislike.png',
        ' :p'  ,'http://4.bp.blogspot.com/-Y2KF1cqsEiQ/VJNbolnNw1I/AAAAAAAAH8Y/mzpdmmt9lp4/s1600/sigh.png',
        ':ng'  ,'http://2.bp.blogspot.com/-A_W5lI-_J8I/VJNbi2oXwjI/AAAAAAAAH7c/wlxM7CETbhI/s1600/love.png',   
        ];
      
                             
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
    
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))   
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s100-c/"));
});      
    //]]>
</script>
</b:includable>

6. إبحث عن <b:includable id='threaded-comment-form' var='post'>...</b:includable> وضع الكود التالي بدله
* ملاحظة : إذ لم تجده إبحث عن نصفه
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
<div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>
    <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button1'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='إظهار'><i class='fa fa-smile-o'/></a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='إخفاء'><i class='fa fa-times'/></a></span>
</span>
  </p>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
      
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>
      </div>
    </b:if>
</div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
تم الإنتهاء ويمكنك حفظ القالب. أي إستفسار بشأن التدوينة فباب التعليقات مفتوح، أراكم في التدوينة المقبلةإن شاء الله

من هذا المنبر أتمنى لكم رمضان مبارك سعيد و أسأل الله لكم حسنات تتكاثر وذنوب تتناثر وهموم تتطاير وأن يجعل بسمتكم سعادة وصمتكم عبادة وخاتمتكم شهادة ورزقكم فى زيادة و أدعو الله أن يتقبل صالح العمل منكم و منا.

سأتطرق اليومإلى تغيير شكل صندوق تعليقات البلوجر إلى شكل جذاب و إحترافي .معظم المدونات تحتوي على صندوق تعليقات مقدم من بلوجر، إفتراضي رغم أن نسبة إستعماله قلّت في الآونة الآخيرة حيث بدأت معضم المدونات بإستعمال تعليقات ديسكس لكن ما علينا لأنه يوجد أيضاً مدونات تحبذ الصندوق لهذا فقد خصصت هذه التدوينة لأحد أشكال الصناديق لأنه وبإذن الله سأوفر لكم أشكال آخرى فيما نخوضه من تدوينات.
مميزات الصندوق أنه له شكل بسيط وجذاب وكذلك يحتوي على إبتسامات لتعبير عن التعليق


شرح  طريقة التركيب
* الكود هو فقط لإظهار أيقونة الإبتسامة إذا كنت تتوفر عليه فلا داعي لإضافته ضعه فوق </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
1 . توجه لقالب >> تحرير 
2.  ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style>   </style> فوق </head>
 
/* CSS Comments Style1 Ar1web.com */
#comments{background:#fff;clear:both;margin:20px 10px;line-height:1em;padding:20px;border:1px solid #e9e9e9;}
#comments h3{line-height:20px;margin-bottom:20px;margin-top:-20px;  margin-left: 485px;;font-family:cursive,droid arabic kufi;font-size:14px;position:absolute;background:#fff;color:#999;font-weight:700;text-transform:uppercase;padding:10px 20px 10px 50px;border:1px solid #e9e9e9;border-top:none;}
#emo-box {clear: both;margin: 0 30px;}
#comments h3:before {  font-family: fontawesome;content: "\f086";font-size: 18px;position: relative;left: 0;top: 0;font-weight: normal;}
#comments .click-comment{background:#fff;color:#fff;float:left;text-decoration:none;display:inline;line-height:20px;margin-bottom:20px;margin-top:-20px;margin-left:-20px;font-family:'Open Sans',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;padding:10px 0;border:1px solid #e9e9e9;border-top:none;border-left:none;}
.fa-arrow-circle-down:before {content: "\f0ab";color: #999999;margin-left: 35px;font-size: 18px;}
.comment_avatar_wrap{border-radius:10%;width:46px;height:46px;border:none;background:none;text-align:center;padding:0;overflow:hidden;}
#comments .comment_avatar {border-radius:10%;width:46px;height:46px;max-width:46px;max-height:46px;background:#f9f9f9;padding:4px;text-align:center;position:absolute;top:0;right:0;overflow:hidden;}
#comments .comment_admin .comment_avatar{border-radius:10%;width:46px;height:46px;max-width:46px;max-height:46px;padding:4px;text-align:center;position:absolute;top:0;right:0;overflow:hidden;}
#comments .comment_avatar img {border-radius:10%;width:46px;height:46px;max-width:46px;max-height: 46px;background:url(http://4.bp.blogspot.com/-hLqBXiTrm0Q/VJ7pie2jM3I/AAAAAAAABwI/aHQypgTLHu8/s1600/avatwisted.png) no-repeat;overflow:hidden;}
.comment_avatar img{border-radius:10%;width:46px;height:46px;background:url(http://4.bp.blogspot.com/-hLqBXiTrm0Q/VJ7pie2jM3I/AAAAAAAABwI/aHQypgTLHu8/s1600/avatwisted.png) no-repeat;overflow:hidden;}
.comment_name a{font-family:cursive,elecrtolize;font-weight:700;font-size:15px;padding:5px 0;color:#666;text-decoration:none}
.comment_child .comment_name a{color:#666;}
.comment_child .comment_name a:hover {color:#f53b3b;}
.comment_admin .comment_name{background:#fff;padding:0 20px 0 65px;right:50px;top:10px;display:inline;font-weight:700;font-size:16px;font-family:'Open Sans',sans-serif;text-decoration:none;border-radius:3px;}
.comment_admin .comment_date{right:10px;font-weight:700;font-size:11px;}
.comment_name{font-size:16px;background:#fff;font-family:'Open Sans',sans-serif;font-weight:700;padding:0 20px 0 65px;position:absolute;right:50px;top:10px;display:inline;line-height:35px;border-radius:3px;transition:all .3s ease-out;}
.comment_name:hover,.comment_name a:hover,.comment_admin .comment_name a:hover,.comment_admin .comment_name:hover{color:#f53b3b;}
.comment_service{position:absolute;top:31px;left:0;}
.item-control {display:block;}
.comment_date a{font-size:11px;font-weight:400;text-transform:none;text-decoration:initial;
color:#666!important;text-align:center;padding:1px 6px;opacity:0.9;transition:all .3s ease-out;}
.comment_date a:hover{color:#f53b3b!important;}
.comment-delete{position:absolute;display:inline-block;top:-2px;left:50px;
color:#666!important;text-align:center;font-family:'Open Sans';font-size:11px;padding:2px 6px;opacity:0.9;transition:all .3s ease-out;}
.comment-delete:hover{color:#f53b3b!important;}
.comment_body{margin:20px 0;padding:0;position:relative;}
.comment_body p{line-height:1.6em;color:#666;font-size:13px;font-family:cursive,'Droid Arabic Naskh';word-wrap:break-word;background:#fafafa;padding:30px 20px;position:relative;margin-top:25px;box-shadow:0 0 0 1px #e9e9e9;transition:all .3s ease-out;text-align: right;}
.comment_body p:before, .comment_body p:after {bottom:100%;right:5%;border:solid transparent;
content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.comment_body p:after {border-color:rgba(255,255,255,0);border-bottom-color:#fafafa;
border-width:8px;margin-right:-8px;}
.comment_body p:before {border-color:rgba(255,225,255,0);border-bottom-color:#ddd;border-width:9px;margin-right:-9px;transition:all .3s ease-out;}
.comment_child .comment_body p{color:#666;}
.comment_body p img{vertical-align:middle;margin:0 5px;}
.comment_body p:hover{box-shadow:0 0 0 1px #ccc;}
.comment_body p:hover:before {border-bottom-color:#aaa;}
.comment_inner{padding-bottom:5px;margin:5px 0}
.comment_child .comment_wrap{padding-right:7%}
.comment_child .comment_body{margin-top:-15px;}
.comment_reply{display:inline-block;background:#3A3A3A;color:#fff!important;text-align:center;
font-family:cursive;font-size:11px;margin:10px;padding:4px 6px 6px 6px;opacity:0.9;border-radius:2px;float: right;}
.comment_reply:hover{text-decoration:none!important;background:#FC4F3F;color:#fff!important;}
.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0;}
.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#666}
#comment-editor{width:103%!important;background:url('http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif') no-repeat 50% 25%;position:relative;margin-right:-8px;margin-top:-15px}
.comment-form p{position:relative;background:#575253;color:#fff;font-size:14px;font-family:cursive,ge_ss_threeregular;line-height:1.5em;margin-bottom:20px;padding:15px;border-radius:3px;text-align: right;}
.comment-form p:after {display: inline-block;content: '';position: absolute;top: 100%;right: 20px;margin-top: 0;height: 0;width: 0;border: 9px solid transparent;border-top-color: #575253;}
.comment-form p:before {border-color:rgba(221,221,221,0);border-top-color:transparent;border-width:11px;margin-right:-11px;transition:all .3s ease-out;}
.comment_reply_form{padding:0 0 0 7%}
.comment_reply_form .comment-form{width:100%}
.comment_emo_list .item{float:right;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#666}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-right:10px;clear:both}
.unneeded-paging-control,.comment_author_flag{display:none}
.comment_admin .comment_author_flag {display: inline-block;font-family: cursive;font-size: 9px;color: #FFF;text-align: center;position: absolute;left: -3%;
top: 31%;line-height: normal;background: #FC4F3F;padding: 5px;border-radius: 2px;}
.comment_child .comment_admin .comment_author_flag {color:#fff;left:-40%;}
.spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px;
display:inline-block;padding:10px 15px!important;}
.deleted-comment{display:inline-block;color:#999;word-wrap:break-word;background:#f9f9f9;margin-top:20px;padding:10px;font-size:13px;font-family:'Open Sans',Helvetica,Arial,sans-serif;border-radius:3px;opacity:1;}
iframe{border:none;overflow:hidden}
.paging-control-container{text-align:center;margin:0 0 0 25%;}
.paging-control-container a{text-align:center;margin:0 auto;background:#666;padding:5px 10px;
color:#fff;transition:all .3s ease-out}
.paging-control-container a:hover{background:#e6ae48;color:#fff;}
.comment_header {padding:0;}
.comment_child .comment_header {padding:0;}
#emo-box,#hide-emo {display:none}
.small-button1 a {font-size: 12px;margin: 10px 5px 5px 0;display: inline-block;color: #3A3A3A;padding: 1px 6px;cursor: pointer;border-radius: 2px;background-color: rgba(255, 255, 255, 1);transition: all 0.3s ease-out;}
.small-button1:hover a{background-color:rgba(255,255,255,0.3);color:#fff;display:inline-block;}
span.small-button1 {text-align:right;display:inline-block;  margin-left: 95%;}
.fa-smile-o:before {content: "\f118";font-size: 14px;}
.fa-times:before {content: "\f00d";font-size: 14px;}
i.fa.fa-arrow-circle-down {margin-left: -70px;margin-right: 6px;}

4. إبحث عن <b:include data='post' name='threaded_comments'/> ثم غيره بالكود التالي قد تجد الكود متكرر غيرهم بأكملهم

<b:include data='post' name='comments'/>

5. إبحث عن <b:includable id='comments' var='post'>...</b:includable>  وضع الكود التالي بدله
* ملاحظة : إذ لم تجده إبحث عن نصفه

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'><i class='fa fa-arrow-circle-down'/><data:commentLabelPlural/></a>
  </b:if>
               
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
   </span>
  </b:if>
                       
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                             
   <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>                                                                                      
      <b:if cond='data:post.adminClass == data:comment.adminClass'>
       &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
       <b:else/>
                            &lt;div class=&#39;comment_inner&#39;&gt;
      </b:if>
         
    <div class='comment_body'>
    <div class='comment_header'>
     <div class='comment_avatar_wrap'>
   
     </div>
                         
     <div class='clear'/>
    </div>

     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>
<div class='comment_author_flag'>المشرف</div>
</div>
<span class='comment_service'>
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='تاريخ التعليق'>
                  <data:comment.timestamp/>
                </a></span>
<b:include data='comment' name='commentDeleteIcon'/>
  </span>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>رد</a>
                        <div class='clear'/>
                    </b:if>
                 <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>                                         
    </div>                         
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
           
    <div class='comment_child'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>              
    </div>
   </b:loop>              
   </div>    
    <div class='clear'/>
    <b:if cond='data:post.commentPagingRequired'>
     <span class='paging-control-container'>
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
     </span>
    </b:if>
    <div class='clear'/>
  <div class='comment_form' id='comment-form'>         
         

   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>   
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>                
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
     
       <script async='async' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' type='text/javascript'/>
       <script type='text/javascript'>
      
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 3;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
        Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
      
        //Pengaturan Emoticon
        Emo_List = [
        ':)'   ,'http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png',
        ':('   ,'http://4.bp.blogspot.com/-RDtah-TXteU/VJNblptXyEI/AAAAAAAAH70/GGZg4MMUVxA/s1600/sad.png',
        ' =('  ,'http://1.bp.blogspot.com/-dzENpgankUY/VJNbcfrM59I/AAAAAAAAH6A/UC7FJQwT-9E/s1600/disappointed.png',
        '^_^'  ,'http://2.bp.blogspot.com/-eeLWBWx7zaI/VJNbnR-JhoI/AAAAAAAAH8E/4vUZ3j_GoEg/s1600/shy.png',
        ' :D'  ,'http://2.bp.blogspot.com/-rvM5sSYqd2k/VJNbjkemjyI/AAAAAAAAH7k/QcT_8JETczs/s1600/noprob.png',
        '=D'   ,'http://1.bp.blogspot.com/-DB0TS3jw6n8/VJNbgab1A_I/AAAAAAAAH7I/4Cr8aYd6AmU/s1600/happy.png',
        ':p'   ,'https://i0.wp.com/i.imgur.com/nL704UD.png',
        '|o|'  ,'http://3.bp.blogspot.com/-i5w-i1jFe0U/VJNbaQxedgI/AAAAAAAAH5o/z7LK9qxEebs/s1600/clap.png',
        '@@,'  ,'http://2.bp.blogspot.com/-lbZ9iDF66F8/VJNbqSG8yNI/AAAAAAAAH9A/bnAQmQrrrZo/s1600/surprise.png',
        ' ;)'  ,'http://1.bp.blogspot.com/-Q--_b4-u1ZY/VJNbrI3A3LI/AAAAAAAAH8w/xshqjz4f3cs/s1600/trope.png',
        ':-bd' ,'http://3.bp.blogspot.com/-_lM3w2ZD7K8/VJNbiIf2PII/AAAAAAAAH7g/U5qLOVDZg8c/s1600/like.png',
        ':-d'  ,'http://4.bp.blogspot.com/-EdvYpWDdZPI/VJNbc2J75FI/AAAAAAAAH6I/kcpuLO7TXFg/s1600/dislike.png',
        ' :p'  ,'http://4.bp.blogspot.com/-Y2KF1cqsEiQ/VJNbolnNw1I/AAAAAAAAH8Y/mzpdmmt9lp4/s1600/sigh.png',
        ':ng'  ,'http://2.bp.blogspot.com/-A_W5lI-_J8I/VJNbi2oXwjI/AAAAAAAAH7c/wlxM7CETbhI/s1600/love.png',   
        ];
      
                             
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
    
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))   
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s100-c/"));
});      
    //]]>
</script>
</b:includable>

6. إبحث عن <b:includable id='threaded-comment-form' var='post'>...</b:includable> وضع الكود التالي بدله
* ملاحظة : إذ لم تجده إبحث عن نصفه
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
<div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>
    <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button1'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='إظهار'><i class='fa fa-smile-o'/></a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='إخفاء'><i class='fa fa-times'/></a></span>
</span>
  </p>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
      
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>
      </div>
    </b:if>
</div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
تم الإنتهاء ويمكنك حفظ القالب. أي إستفسار بشأن التدوينة فباب التعليقات مفتوح، أراكم في التدوينة المقبلةإن شاء الله
26 Blogger تعليقات
Disqus
26 التعليقات
المشرف
avatar

هل ستضع اضافاتك التي فيها التحميل وعدد المشاهدات كالموجودة في السيدبار

المشرف
avatar

لم يقرر بعد أخي

المشرف
avatar

شكرا ً.. قبل فتره بلوجر غيرت في حجم الرمزيات ومهما حاولت تظهر الرمزيات في التعليقات بجودة سيئة جدا ً..
لكن في هذا الكود من مدونتك تظهر الجودة الأصلية للرمزيات .. يعطيك العافية

المشرف
avatar

إني سعيد لك أخي، بصحتك

المشرف
avatar

لو سمحت حاولت اضافتها فى قالب الاندرويد ولكن ماذال تعليقات بلوجر موجوده

المشرف
avatar

اسفة تعليقات الفيس بوك موجودة

المشرف
avatar

أرسل القالب للإميل التالي : info@ar1web.com

المشرف
avatar

لقد ارسلت لك القالب امس وحتى الان لم ترد عليا

المشرف
avatar

لم يصل أعد الارسال لهذا: istoretech3@gmail.com

المشرف
avatar

ارسلتها لك مره اخرى

المشرف
avatar

تم التوصل به سيرسل إليك خلال الانتهاء منه

المشرف
avatar

اوك شكرا جزيلا

المشرف
avatar

حضرتك لم اتوصل بها حتى الان

المشرف
avatar

تفضل: http://bit.ly/1MIMCuI

المشرف
avatar

مرسى كتيييييييير على مساعدة حضرتك احسن مدونة واحسن مدون

المشرف
avatar

ايه ده حضرتك معدلتش على القالب الى انا اعطيتهولك حضرتك عدلت على قالب من عندك ارجو تعديل على القالب الذى ارسلته لك على الجى ميل

المشرف
avatar

هو نفس القالب الذي لدينا يعني انقلي التغييرات التي بقالبك وحيكون كلشي تمام لأن القالب تم حذفه عن طريق الخطأ

المشرف
avatar

حضرتك مفهمتنيش القالب انا معدله عليه فبالتالى لو نقلت جميع الاضافات ستحذف

المشرف
avatar

أرسليه مرة اخرى

المشرف
avatar

أخي شكرا لك لقد غيرتها لكن المشكل عندما غيرت التعليقات ظهرت هذه الإضافة جنب الإضافات التي في الجانب يمكنك المعاينة من هذا الرابط من الصورة
http://goo.gl/nRcJOM

المشرف
avatar

تابع التدوينة التالية لحل المشكل : http://www.ar1web.com/2014/09/blog-post_8.html

المشرف
avatar

مشكوور بارك الله فيك

المشرف
avatar

أخي رابط المعاينة لا يعمل

المشرف
avatar

نعتذر عن ذلك العطب الخارج عن إرادتنا فقد تم حذف الموقع الذي به المعاينة من طرف بلوجر... نتمنى أن تكون الصورة كفيلة بالغرض

المشرف
avatar

لم أجد و لدي تعليقات بلوجر العادية و شكرا

المشرف
avatar

^_^ لم تعمل معي اخي لا بريد حفظ القالب ؟؟ هل من حل

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة