بسم الله الرحمان الرحيم
السلام عليكم أحباء ومتابعي مدونة منبع المعلوميات
اليوم إنشاء الله بنشرح طريقة إضافة 4 أنظمة تعليقات و هم :
- بلوجر
- فايسبوك
- ديسكس
- و جوجل +
أولا : نذهب للقالب
ثانيا : ثم تحرير HTML
ثالثا : ثم ctrl + F
رابعا : نقوم بالبحث عن هذا الكود
<div class='comments' id='comments'>
<b:includable id='comments' var='post'>ثم نجمع الكود لمن لا يعرف الطريقة تابعوا هنا :
ثم نحذفه و نضع مكانه تماما هذا الكود :
<b:if cond='data:blog.pageType == "item"'>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'/>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<fieldset>
<legend>
أضف تعليقا باستعمال أحد ... </legend>
<style>
fieldset {
color:#3d3d3d;
background:#ebebeb;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
width:auto;
padding:20px 3px;
cursor:pointer;
margin:0 auto;
}
.fieldset:active{
cursor:pointer;
position:relative;
top:2px;
}
}
.legend:active{
cursor:pointer;
position:relative;
top:2px;
}
legend {
font: normal 20px oswald,GESSTwoMediumRegular;
font-style: normal;
color: #000000;
background: #e0e0e0;
-moz-box-shadow: -1px 4px 7px #000000;
-webkit-box-shadow: -1px 4px 7px #000000;
-moz-border-radius: 26px 10px 26px 10px;
padding: 8px 29px;
cursor: pointer;
margin: 0 auto;
}
.legend:active{
cursor:pointer;
position:relative;
top:2px;
}
/* jQuery for Multi comment Tab */
.ui-tabs {
position: relative;/* position: relative "fixed") */
padding: 0em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: 0em 0em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: right;
position: relative;
top: 0;
margin:1px 0 0 .2em;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
float: right;
padding: .5em 1em;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
background: url("http://3.bp.blogspot.com/-2sle4bLUrxs/UremmY7_7tI/AAAAAAAAJTI/MHBNZPj-LGg/s1600/bg-tab.png") repeat-x scroll right top rgb(85, 149, 37);
color: rgb(255, 255, 255);
font-weight: bold;
border-width: 1px ;
border-style: solid solid none;
border-color: -moz-use-text-color;
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-right-colors: none;
border-image: none;
}
.ui-tabs .ui-tabs-nav li a, /* first selector... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
cursor: pointer;
color: #ffffff;
font: 14px oswald,GESSTwoLight;
}
.ui-tooltip {
position: relative;
color:#fff;
padding:0.6em 1.3em;
line-height:1em;
text-decoration:none;
text-align:center;
white-space: nowrap;
}
.ui-tabs.small span {
font-size:13px;
}
.ui-tabs.medium span {
font-size:15px;
}
.ui-tabs.large span {
font-size:29px;
}
.ui-tabs.small span {
font-size:13px;
}
.ui-tabs.medium span {
font-size:15px;
}
.ui-tabs.large span {
font-size:29px;
}
.ui-tabs.black {
background-color: #333333;
}
.ui-tabs.gray {
background-color: #666666;
}
.ui-tabs.white span{
color: #666666;
}
.ui-tabs.red {
background-color: #e62727;
}
.ui-tabs.orange {
background-color: #ff5c00;
}
.ui-tabs.magenta {
background-color: #3b5998;
}
.ui-tabs.yellow {
background-color: #ffb515;
}
.ui-tabs.blue {
background-color: #00ADEE;
}
.ui-tabs.pink {
background-color: #e22092;
}
.ui-tabs.green {
background-color: #91bd09;
}
.ui-tabs.rosy {
background-color: #F16C7C;
}
.ui-tabs.brown {
background-color: #804000;
}
.ui-tabs.purple {
background-color: #FE2E2E;
}
.ui-tabs.cyan {
background-color: #46C7C7;
}
.ui-tabs.gold {
background-color: #D4A017;
}
</style>
<div id='tabs'>
<ul>
<li>
<a class='ui-tabs small orange' href='#tabs-3'>
تعليقات البوجر </a>
</li>
<li>
<a class='ui-tabs small magenta' href='#tabs-1'>
تعليقات الفايس بوك </a>
</li>
<li>
<a class='ui-tabs small blue' href='#tabs-2' id='disqus-comments' onclick='load_disqus()'>
تعليقات Disqus </a>
</li>
<li>
<a class='ui-tabs small purple' href='#tabs-4'>
جوجل +GOOGLE </a>
</li>
</ul>
<div id='tabs-1'>
<fb:comments expr:href='data:post.url' num_posts='10' style='' width='585'/>
</div>
<div id='tabs-2'>
<br/>
<div id='disqus_thread'/>
<div id='disqus_loader' style='text-align: center'>
<script>
function load_disqus() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = "http://hukmat.disqus.com/embed.js"; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); var ldr = document.getElementById('disqus_loader'); ldr.parentNode.removeChild(ldr); } </script>
</div>
</div>
<div id='tabs-3'>
<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' href='#comment-form' title='اضافة تعليق'>
اضافة تعليق
</a>
<div class='clear'/>
</b:if>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
 
<a expr:class='data:post.newLinkClass' expr:href='data: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='data: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'>
<span class='comment_arrow'/>
<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>
<b:if cond='data:comment.author == data:post.author'>
<span class='comment_author_flag'/>
</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'>
<img alt='delete' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='حذف التعليق'/>
</a>
<span class='comment_date'>
<a expr:href='data: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>
<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='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
 
<a expr:class='data:post.newLinkClass' expr:href='data: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'>
<div class='comment_emo_list'/>
<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>
</div>
<div id='tabs-4'>
<script src='https://apis.google.com/js/plusone.js'/>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='585' expr:data-href='data:post.url'>
</div>
</div>
</div>
</fieldset>
</b:if>
هنا يكون درسنا قد إنتها أتمنى تكون الإضافة قد أعجبتكم و نجحتم في تركيبها و إلى اللقاء
شكرا اخى
ردحذفالعفو يا غالي
حذفشكرا أخي
ردحذفالشكر لك على مرورك
حذفشكرالكم
ردحذفالعفو يا غالي
حذف