تغير شكل التعليقات لشكل احترافى V1

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


1- خذ نسخة احتياطية من القالب لتجنب حدوث اى مشاكل او اخطاء (لوحة التحكم => قالب => نسخ احتياطى / استعادة => تنزيل النموذج الكامل)
2- افتح القالب من تحرير html
3- إبحث عن <b:includable id='comments' var='post'>...</b:includable> ثم غيره بالكود التالي 

* ملاحظة : إذ لم تجده إبحث عن <b:includable id='comments' var='post'>

4- ابحث عن <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/>
<style>.comment-msg{padding:8px 6px 8px}.comment-msg b{background:#e83e3b;color:#fff;float:right;font:bold 12px/16px tahoma;height:16px;margin-left:10px;margin-top:2px;text-align:center;width:16px;position:relative}.comment-msg b:before{content:&#39;&#39;;position:absolute;top:3px;right:15px;border:5px solid transparent;border-right-color:#e83e3b}</style>
<span class='comment-msg'><strong>يسعدنا تفاعلكم بالتعليق&#1548; لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق</strong><br/>
<b>1</b>أن يكون التعليق خاص بمحتوى التدوينة<br/>
<b>2</b>أن لا تضع أي روابط خارجية<br/>
<b>3</b>لاضافة كود حوله اولا بمحول الاكواد <br/>
<b>4</b>أي سؤال خارج محتوى التدوينة يرجى استخدام <a href='http://web3-night.blogspot.com/p/blog-page_29.html' rel='nofollow' target='_blank'>ركن الأسئلة</a></span>
<span class='small-button' style='    margin-top: -13px;'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;' title='إظهار محول الأكواد'>محول الأكواد</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;inline-block&apos;' title='إخفاء محول الأكواد'>محول الأكواد</a></span>
</span>
<span class='small-button'>
<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='إظهار الإبتسامات'>الإبتسامات</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='إخفاء الإبتسامات'>الإبتسامات</a></span>
</span>
</p>
<div id='konversi-box'>
<textarea id='codes' placeholder='Write/paste the code here then click &apos;Conversion&apos;' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>تحويل</button>
<button onclick='cdClear();'>مسح</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
</div>
<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>

5- ابحث عن ]]></b:skin> وضع هذا الستايل قبله

* ملاحظة : تاكد اولا من حذف ستايل التعليقات القديم

/*================================
              التعليقات
================================*/
#comments{background:url(http://champion.stylemixthemes.com/wp-content/themes/champion/assets/images/pre_footer_bg.jpg);clear:both;margin:20px auto 0;line-height:1em;padding:20px;width:93%;background-size:cover;background-position:center top;background-repeat:no-repeat;background-attachment:fixed!important}#comments h3{background:#EBB409;display:inline;line-height:20px;margin-bottom:20px;margin-top:0;font-family:Electrolize,ge_ss_threeregular;font-size:14px;position:absolute;color:#fff;font-weight:500;text-transform:uppercase;padding:10px 50px 10px 20px}#comments h3:before{font-family:fontawesome;content:"margin-left:10px;font-size:20px;padding:10px 15px;position:absolute;right:0;top:0}#comments .click-comment{float:left;text-decoration:none;display:inline;line-height:20px;margin-bottom:20px;margin-top:0;font-family:Electrolize,ge_ss_threeregular;font-size:14px;color:#FFF;font-weight:500;text-transform:uppercase;background:#3D4D65;padding:10px 20px}#comments .click-comment:hover{background:#444;color:#fff;border-color:#fff}.comment_avatar_wrap{width:0;height:42px;border:none;background:none;text-align:center;padding:0}#comments .comment_avatar{display:non;width:42px;height:42px;max-width:42px;max-height:42px;padding:4px;text-align:center;position:absolute;top:5px;left:32px;border-radius:50%}#comments .comment_admin .comment_avatar{display:non;width:42px;height:42px;max-width:42px;max-height:42px;padding:4px;text-align:center;position:absolute;top:4px;left:80px;border-radius:50%}#comments .comment_avatar img{width:42px;height:42px;max-width:42px;max-height:42px;background:url(http://1.bp.blogspot.com/-SL82Yj_MkdE/VCNlr5Q1nWI/AAAAAAAAGf8/xzhe3TPouok/s1600/anonim.png) no-repeat;border-radius:50%;margin-top:-5px}.comment_avatar img{width:42px;height:42px;background:url(http://1.bp.blogspot.com/-SL82Yj_MkdE/VCNlr5Q1nWI/AAAAAAAAGf8/xzhe3TPouok/s1600/anonim.png) no-repeat;border-radius:50%}.comment_name a{font-family:Electrolize,ge_ss_threeregular;font-weight:500;font-size:15px;padding:5px 0;color:#fff;text-decoration:none}.comment_name a:hover{color:#f9f9f9}.comment_child .comment_name a{color:#fff}.comment_child .comment_name a:hover{color:#e6ae48}.comment_admin .comment_name{font-weight:500;font-size:16px;font-family:Electrolize,ge_ss_threeregular;text-decoration:none;background:none;padding:5px 0}.comment_admin .comment_date{right:10px;font-weight:500;font-size:11px}.comment_name{font-size:16px;font-family:Electrolize,ge_ss_threeregular;font-weight:400;padding:0 10px;position:absolute;right:5px;top:5px;display:inline;line-height:35px;transition:all .3s ease-in-out}.comment_name:hover{color:#f9f9f9}.comment_admin .comment_name{padding:0 10px;right:5px;top:5px;display:inline}.comment_service{position:absolute;bottom:8px;right:8px}.comment_date a{right:0;font-size:11px;font-weight:400;text-transform:none;color:#aaa;text-decoration:none}.comment_body{margin:20px 0;background:#fff;padding:0;position:relative;border-radius:4px}.comment_body p{line-height:1.6em;color:#000;font-size:14px;font-family:Electrolize,ge_ss_threeregular;word-wrap:break-word;padding:20px;background:url(http://3.bp.blogspot.com/-OyzQu9koSfM/VWjkGeFqzwI/AAAAAAAAAUM/9eOOIv2I61I/s1600/pattern-bg%2B%25281%2529.png)}.comment_child .comment_body p{color:#444}.comment_body p img{vertical-align:middle;margin:0 5px;width:20px}.comment_inner{padding-bottom:5px;margin:5px 0}.comment_child .comment_wrap{padding-right:7%}.comment_child .comment_body{margin-top:-15px;background:#fafafa}a:visited{color:#fff;text-decoration:none}.comment_reply{float:left;display:inline;color:#FFF!important;text-align:center;text-decoration:none;background:#1AAF46;font:11px/18px Electrolize,ge_ss_threeregular;padding:3px 11px;margin:10px 5px 10px 10px;border:double #DFDFE1}.comment_reply:hover{text-decoration:none!important;background:#e6ae48;color:#fff!important;text-shadow:none}.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0}.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:500;font-family:Electrolize,ge_ss_threeregular;font-size:15px;color:#444}#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;max-height:211px;margin-top:-15px}.comment-form p{background:#2c3135;color:#fff;font-size:14px;font-family:Electrolize,ge_ss_threeregular;line-height:1.5em;margin-bottom:20px;padding:15px}.comment_reply_form{padding:0 7% 0 0}.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 .item img{width:auto}.comment_emo_list span{display:block;font-weight:400;font-size:11px;color:#fff}.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}.comment-delete{position:absolute;display:none;top:0;left:-25px;color:red!important;text-align:center;text-decoration:none;font-family:Electrolize,ge_ss_threeregular;font-size:16px;font-weight:500;padding:0;opacity:.7;transition:all .3s ease-in-out}.comment_body:hover .comment-delete{display:none!important}.comment-delete:hover{color:#444!important}.unneeded-paging-control,.comment_author_flag{display:none}.comment_admin .comment_author_flag{display:inline;background:rgba(0,0,0,0.2);font-family:Electrolize,ge_ss_threeregular;font-size:12px;font-weight:700;width:42px;height:15px;left:6px;bottom:0;color:#fff;text-align:center;padding:3px 10px;margin-right:10px;border-radius:2px;text-transform:uppercase}.comment_child .comment_admin .comment_author_flag{background:rgba(0,0,0,0.2);color:#fff}.spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px;display:inline-block;padding:10px 15px!important}.deleted-comment{display:table;color:#444;word-wrap:break-word;background:transparent;padding:20px 0;font-size:13px;font-family:Electrolize,ge_ss_threeregular;font-style:normal;text-align:center;margin:0 auto 20px}iframe{border:none;overflow:hidden}.paging-control-container{text-align:center;margin:0 25% 0 0}.paging-control-container a{text-align:center;margin:0 auto;background:#444;padding:5px 10px;color:#fff;transition:all .3s ease-in-out}.paging-control-container a:hover{background:#e6ae48;color:#fff}.comment_header{background:#CF4140;padding:2px 0;border:2px dashed;box-shadow:0 0 0 2px #cad3df}a:hover{color:#d84747!important;text-decoration:none}.comment_child .comment_header{background:#1AAF46;padding:2px 0}#konversi-box,#hide-konversi,#emo-box,#hide-emo{display:none}#konversi-box{width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:right}.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee}#codes{border:none;width:98.5%;height:200px;display:block;background-color:#444;color:#eee;font:normal 12px 'margin:7px 0 10px;padding:8px;transition:all .5s linear}#codes:focus{background-color:#444;color:#fff;border:none;outline:none;transition:all .3s linear}.button-group{float:left;text-align:right;margin:0 auto}button,button[disabled]:active{border:none;font-size:12px;font-family:Electrolize,ge_ss_threeregular;font-weight:400;padding:4px 10px;text-decoration:none;background:#4288cc;color:#fff;display:inline-block;transition:all .5s linear;cursor:pointer;border:1px solid #4084c5}button:hover{background:#fff;color:#4288cc;transition:all .2s linear}button:active{background:#fff;color:#4288cc}button[disabled],button[disabled]:active{color:#fff;cursor:default}#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 0 0 10px}.small-button a,.small-button1 a{font-size:12px;font-family:Electrolize,ge_ss_threeregular;cursor:pointer;font-weight:400;margin:10px 0 5px 5px;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;background-color:#fff;padding:4px 10px;cursor:pointer;transition:all .5s linear}.small-button:hover a,.small-button1:hover a{text-shadow:none;display:inline-block;background-color:#fff;color:#666;transition:all .2s linear}span.small-button{text-align:right;display:inline-block}

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

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

7- احفظ القالب

اذا واجهتك مشكلة او للاستفسار فباب التعليقات مفتوح وكذلك ركن الاسئلة للطلبات والشات

facebook

twitter

Tweet

google+

تابعونا على