الرئيسية
أولا عليك التركيز لأنك سوف يكون عليك أستبدال أكواد من مدونتك
وعليك أن تقوم بأخذ نسخة من مدونتك أولا
الأن قم بأستبدال كود أستايل التعليقات الخاص بمدونتك
بهذا الكود الخاض بالتعليقات css
او بامكانك وضعه فوق
=============================================================
]]></b:skin>
=============================================================
مباشرة
<b:includable id='comment_picker' var='post'>
ثم تقوم بتحديد الكود كامل كما فى الصورة التالية
ثم تقوم بأستبدال الكود فى مدونتك بالكود التالى
<b:includable id='comments' var='post'>
الأن تقوم ايضا بتحديد الكود كامل كما فى الصورة أعلى
ثم تقوم بوضع بدل منه الكود هذا
تقوم بالبحث عن هذه الكود
وتقوم بوضع بدل منه الكود التالى
اتمنى ان الدرس نال اعجابكم
ساهم بنشر المدونة اكثر واكثر
الى
وعليك أن تقوم بأخذ نسخة من مدونتك أولا
الأن قم بأستبدال كود أستايل التعليقات الخاص بمدونتك
بهذا الكود الخاض بالتعليقات css
او بامكانك وضعه فوق
=============================================================
]]></b:skin>
=============================================================
مباشرة
الأن عليك التركيز فى الأكواد الأتيةعليك الأن أن تقوم بالبحث عن هذا الكود فى مدونتك#comments{
margin-top:15px;
padding:15px;
background-color:#fff;
margin-bottom:30px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);}
#comments h4{text-align: right;font-weight: 500;font-size: 16px;padding-bottom: 10px;border-bottom: 2px solid #ccc;line-height: 24px;position: relative;color: #0099ff;margin-bottom: 20px;}
#comments h4::before {content: "";position: absolute;height: 2px;width: 32px;background-color: #0099ff;bottom: -2px;left: initial!important;right: 0;}
#comments h4:after {content: "\f0e5";display: block;background-color: #0099ff;font-family: FontAwesome;height: 28px;width: 32px;line-height: 28px;font-size: 14px;text-align: center;border-radius: 2px;float: right;margin-right: 0;margin-left: 10px;color: #FFF;}
.paging-control-container{text-align:center;width:100%;float:right;margin-bottom:20px;margin-top:10px}
.paging-control{background-color:#3B5998;color:#fff;padding:10px;height:40px;line-height:13px;display:inline-block}
.unneeded-paging-control{color:#FFFFFF;background-color:#343434;padding:10px;height:40px;line-height:13px;display:inline-block}
.comment_inner.comment_admin{margin-top:10px}
.comment_header{float:right}
.comment_avatar{width:65px;height:65px;float:right;margin-left:15px}
.comment_avatar img{
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #0099ff;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);}
.comment_body{
overflow: hidden;
border: 1px solid #ccc;
margin-bottom: 20px;
background-color: #eee;
margin-right: 80px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);}
.comment_name{
border-bottom: 1px solid #ccc;
padding: 5px 10px 0px 5px;
background-color: #fff;
overflow: hidden;
line-height: 32px;}
.comment-content{font-size:15px;color:#555;padding:20px;text-align:justify;background-color:#ddd}
.deleted-comment{font-size:15px;color:#555;display:block;padding:10px 20px 20px 20px}
.comment_author_flag{display:inline-block;width:initial;margin:2px 12px 0 0;color:#FFF;font-size:13px;background:#DD4B39;padding:0 5px 0px 5px;border-radius:2px}
.comment_service{float:left}
.comment-delete{
padding: 2px 10px;
display: inline-block;
border-radius: 2px;
float: left;
margin-right: 5px;
margin-bottom: 10px;
color: #FFFFFF;
background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);
line-height: 26px;
margin-top: 2px;
font-size: 13px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);}
#comments .comment_reply{
font-size: 18px;
display: inline-block;
margin-top: 10px;
padding: 0;
color: #fff;
text-align: center;
width: 100%;
border-radius: 30px 30px 30px 30px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);
background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);}
.comment_avatar_wrap{width:65px;background:#fcfcfc;text-align:center}
#comments .comment-form p{background:#ddd;padding:0 15px 10px 15px;margin:5px 0 15px;color:rgba(0,0,0,.;font-size:15px;line-height:normal;border-radius:3px;position:relative;max-width:100%;border:1px solid #ccc}
#emo-box,#hide-emo{display:none}
.small-button a,.small-button1 a{
background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);
color:#fff;font-size:13px;cursor:pointer;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:3px;display:inline-block;padding:5px 10px;box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.comment_emo_list .item{
float:right;
display:block;
text-align:center;
margin:5px 5px 0 0;
width:50px;
border-radius:2px;
height:65px
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1);
-moz-transition: -moz-transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1);
transition: transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1);
background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);}
.comment_emo_list span{display:block;margin:5px 0 5px 0;letter-spacing:1px;color:#fff}
.comment_emo{width:25px;height:25px;margin-bottom:-10px}
.comment_wrap{
background: #fafafa;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #0099ff #0099ff #0099ff #0099ff;
padding: 10px;
margin-bottom: 10px;}
.comment_wrap:before {
text-align: center;
position: relative;
content: 'الردود';
left: 8px;
top: -6px;
font-size: 18px;
padding: 5px 20px;
padding-left: 8px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent;}
#comment_block {
overflow: auto;
background: #f5f7f7;
overflow-x: hidden;}
.comment_inner.comment_admin {
margin-top: 10px;}
.comment_date {
font-size: 14px;
color: #555;}
.comment_inner.comment_admin .comment_avatar img {
border-radius: 0;
border: 3px solid #375e97;}
.comment_inner.comment_admin .comment_reply {
background: #375e97!important;}
.comment_inner.comment_admin .comment_body {
border: 1px solid #fff;}
.comment_inner.comment_admin .comment_name {
border-bottom: 0 solid #ccc;
background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);}
.comment_inner.comment_admin .comment_name a {
color: #fff;}
.comment_inner.comment_admin .comment_author_flag {
background: #385e95;}
.comment_inner.comment_admin .comment-delete {
background: #375e97;}
.comment_inner.comment_admin .comment-content {
color: #fff;
background: -webkit-linear-gradient(left, rgba(45, 69, 98, 0.65) 0%, #2d4562 100%), -webkit-linear-gradient(left, #4d90fe 0%, #666 100%);}
<b:includable id='comment_picker' var='post'>
ثم تقوم بتحديد الكود كامل كما فى الصورة التالية
ثم تقوم بأستبدال الكود فى مدونتك بالكود التالى
الأن قم بالبحث عن الكود التالى هذا<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:elseif cond='data:post.showThreadedComments'/>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
الأن تقوم ايضا بتحديد الكود كامل كما فى الصورة أعلى
ثم تقوم بوضع بدل منه الكود هذا
الان مع اخر كود وهو نفس ما سبق<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href=post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href=post.olderLinkUrl'><data:post.olderLinkText/></a>
<data:post.commentRangeText/>
<a expr:class='data:post.newLinkClass' expr:href=post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href=post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div id='comment_block'>
<b:loop values='data:post.comments' var='comment'>
<div class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/> <div class='comment_inner'>
</b:if>
<div class='comment_header'>
<div class='comment_avatar_wrap'>
<div class='comment_avatar'>
<img alt='avatar' expr:src=comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='رد'>رد</a>
</div>
<div class='clear'/>
</div>
<div class='comment_body'>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href=comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<b:if cond='data:comment.author == data:post.author'>
<span class='comment_author_flag'> الكاتب <i class='fa fa-check-circle' title='Verified Author'/></span>
</b:if>
<span class='comment_service'>
<a class='comment-delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
حذف
</a>
<span class='comment_date'><a expr:href=comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
</span>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p class='comment-content'>
<data:comment.body/>
</p>
<div class='clear'/>
</b:if>
</div>
<div class='clear'/> </div>
<div class='clear'/>
<div class='comment_child'/>
<div class='comment_reply_form' expr:id='"r_f_"+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=post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href=post.olderLinkUrl'><data:post.olderLinkText/></a>
<data:post.commentRangeText/>
<a expr:class='data:post.newLinkClass' expr:href=post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href=post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='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=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='http://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 = {'maxThreadDepth':'0'};
</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 = [
'' ,'https://2img.net/i/fa/twemoji/36x36/1f600.png',
'' ,'https://2img.net/i/fa/twemoji/36x36/1f615.png',
'hihi' ,'https://2img.net/i/fa/twemoji/36x36/1f601.png',
':-)' ,'https://2img.net/i/fa/twemoji/36x36/1f60f.png',
'' ,'https://2img.net/i/fa/twemoji/36x36/1f603.png',
'=D' ,'https://2img.net/i/fa/twemoji/36x36/1f62c.png',
':-d' ,'https://2img.net/i/fa/twemoji/36x36/1f604.png',
';(' ,'https://2img.net/i/fa/twemoji/36x36/1f61e.png',
';-(' ,'https://2img.net/i/fa/twemoji/36x36/1f62d.png',
'@-)' ,'https://2img.net/i/fa/twemoji/36x36/1f616.png',
'' ,'https://2img.net/i/fa/twemoji/36x36/1f62e.png',
':>)','https://2img.net/i/fa/twemoji/36x36/1f606.png',
'(o)' ,'https://2img.net/i/fa/twemoji/36x36/1f609.png',
':p' ,'https://2img.net/i/fa/twemoji/36x36/1f614.png',
':-?' ,'https://2img.net/i/fa/twemoji/36x36/2753.png',
'(p)' ,'https://2img.net/i/fa/twemoji/36x36/1f619.png',
':-s' ,'https://2img.net/i/fa/twemoji/36x36/1f625.png',
'8-)' ,'https://2img.net/i/fa/twemoji/36x36/1f60e.png',
':-t' ,'https://2img.net/i/fa/twemoji/36x36/1f624.png',
':-b' ,'https://2img.net/i/fa/twemoji/36x36/1f634.png',
'b-(' ,'https://2img.net/i/fa/twemoji/36x36/1f635.png',
'(y)' ,'https://2img.net/i/fa/twemoji/36x36/1f44d.png',
'x-)' ,'https://2img.net/i/fa/twemoji/36x36/1f60d.png',
'(h)' ,'https://2img.net/i/fa/twemoji/36x36/1f44f.png',
'(:V)' ,'https://static.xx.fbcdn.net/images/emoji.php/v7/ef4/1/24/PACMAN.png',
];
//Config Force tag list, define all in lower case
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
'<pre class="brush: plain; title: ; notranslate" title="">','<code>',
'</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(
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)?\//,"/s45-c/"));});
//]]>
</script>
</b:includable>
تقوم بالبحث عن هذه الكود
وايضا تقوم بتحديده كامل كما فى الصورة فوق<b:includable id='threaded-comment-form' var='post'>
وتقوم بوضع بدل منه الكود التالى
الأن تقوم بحفظ القالب ومبرووووك عليك<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href=post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/><br/>
<span class='small-button1'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none'' title='الأبتسامات'>الأبتسامات</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block'' title=' أخفاء الأبتسامات'>أخفاء الأبتسامات</a></span>
</span>
</p>
<div id='emo-box'><div class='comment_emo_list'/></div>
<data:blogTeamBlogMessage/>
<a expr:href=post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
اتمنى ان الدرس نال اعجابكم
ساهم بنشر المدونة اكثر واكثر
الى
