recent
أخبار ساخنة

طريقة سهل جدا لدمج التلعيقات المستخدمه على بلوجر Facebook blogger disque

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


شرح التركيب


  • قم بالبحث عن الوسم ]]></b:skin> فى مدونتك وقم بوضع الكود التالى فوقه.



    .cmm-tabs-header {
    overflow: hidden;
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23);
    margin-bottom: 10px;
    }
    .cmm-tabs-header ul li a {
    float: right;
    width: 33.33333%;
    text-align: center;
    display: inline-block;
    background: #EF5350 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WduVNmDqxCYOR6OA5dcFAJEesK167vMwOSdCiguMtl0SBxcx_44XjlW530KZnfREBH40pCSzkgt8JNpagjn3ZASR9hfLSfrAu8FCKptIR7sBKwq0tCrRLJInZw0voKJAoVRRxvTo6fLP/s1600-r/comments.png) no-repeat;
    padding: 20px 0;
    background-position: center -32px;
    background-color: orange;
    border: 5px solid #FFF;
    }
    .facebook-tab {
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23);
    margin-bottom: 10px;
    }
    .disqus-tab {
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23);
    margin-bottom: 10px;
    }
    ul.wrap-tab li:nth-child(1) a {
    background-position: center -32px;
    background-color: orange;
    }
    ul.wrap-tab li:nth-child(2) a {
    background-position: center -66px;
    background-color: #2e9fff;
    }
    ul.wrap-tab li:nth-child(3) a {
    background-position: center 3px;
    background-color: #3b5998;
    }



    • الان مع الكود الثانى الخاص بالتعليقات وهذا الكود يتم وضعها اسفل المواضيع مثل ما فى الصورة التالية






      • كود التعليقات هو المحدد باللون الاحمر فى الصورة انت سوف تقوم بوضعه اسفل نهاية اكواد المواضيع مثل ما فى الصورة تمام

          <div class='clear'/>
      <b:section id='facebook.disqus.blogger' showaddelement='no'>
      <b:widget id='HTML901' locked='true' title='Comments system' type='HTML' version='1'>
      <b:widget-settings>
      <b:widget-setting name='content'>[blogger][disqus][facebook]</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
      <b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
      <b:if cond='data:content == &quot;[blogger]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab='بلوجر'><div class='blogger-tab'/></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[facebook]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab='facebook'><div class='facebook-tab'/></div>
      </div>
      <script type='text/javascript'>
      //<![CDATA[
      $('#comments').remove();
      //]]>
      </script>
      </b:if>
      <b:if cond='data:content == &quot;[disqus]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      </div>
      <script type='text/javascript'>
      //<![CDATA[
      $('#comments').remove();
      //]]>
      </script>
      </b:if>
      <b:if cond='data:content == &quot;[blogger][facebook]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='blogger-tab'/></div>
      <div data-tab=''><div class='facebook-tab'/></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[blogger][disqus]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='blogger-tab'/></div>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[facebook][blogger]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='facebook-tab'/></div>
      <div data-tab=''><div class='blogger-tab'/></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[facebook][disqus]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='facebook-tab'/></div>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      <script type='text/javascript'>
      //<![CDATA[
      $('#comments').remove();
      //]]>
      </script>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[disqus][blogger]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      <div data-tab=''><div class='blogger-tab'/></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[disqus][facebook]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      <div data-tab=''><div class='facebook-tab'/></div>
      </div>
      <script type='text/javascript'>
      //<![CDATA[
      $('#comments').remove();
      //]]>
      </script>
      </b:if>
      <b:if cond='data:content == &quot;[blogger][facebook][disqus]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='blogger-tab'/></div>
      <div data-tab=''><div class='facebook-tab'/></div>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[blogger][disqus][facebook]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='blogger-tab'/></div>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      <div data-tab=''><div class='facebook-tab'/></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[facebook][blogger][disqus]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='facebook-tab'/></div>
      <div data-tab=''><div class='blogger-tab'/></div>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[facebook][disqus][blogger]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='facebook-tab'/></div>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      <div data-tab=''><div class='blogger-tab'/></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[disqus][blogger][facebook]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      <div data-tab=''><div class='blogger-tab'/></div>
      <div data-tab=''><div class='facebook-tab'/></div>
      </div>
      </b:if>
      <b:if cond='data:content == &quot;[disqus][facebook][blogger]&quot;'>
      <div class='cmm-tabs'>
      <div data-tab=''><div class='disqus-tab'><div id='disqus_thread'/></div></div>
      <div data-tab=''><div class='facebook-tab'/></div>
      <div data-tab=''><div class='blogger-tab'/></div>
      </div>
      </b:if>
      <div id='fb-root'/><script>(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = &quot;//connect.facebook.net/ar_AR/sdk.js#xfbml=1&amp;version=v2.0&quot;;fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>&lt;script&gt;$(&quot;.facebook-tab&quot;).append(&quot;&lt;div class=&#39;fb-comments&#39; data-href=&#39;<data:blog.canonicalUrl/>&#39; data-width=&#39;100%&#39; data-numposts=&#39;5&#39; data-colorscheme=&#39;light&#39;&gt;&lt;/div&gt;&quot;);&lt;/script&gt;
      </b:if>
      </b:includable>
      </b:widget>
      <b:widget id='HTML902' locked='true' title='Disqus Shortname' type='HTML' version='1'>
      <b:widget-settings>
      <b:widget-setting name='content'>wdbloog</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
      <b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
      &lt;script type=&#39;text/javascript&#39;&gt;
      var disqus_shortname = &#39;<data:content/>&#39;;
      (function() {
      var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
      dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
      (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
      })();
      &lt;/script&gt;
      </b:if>
      </b:includable>
      </b:widget>
      </b:section>
      <div class='clear'/>




      • يجب ان تتاكد من وضع الكود فى مكانه المناسب كما فى الصورة
      • الان بعد وضع الاكواد قم بحفظ القالب وانتقل الان الى التخطيط
      • سوف تجد قم تم اضافة إضافتين اسفل رسائل المدونة الإلكترونية كما بالصورة








      • الإضافة الاول توقم بوضع بها احد الاكواد التاليه ليظهر التلعيقات




        [blogger][disqus][facebook]

        [blogger][facebook]

        [blogger][disqus]

        [disqus][facebook]

        [facebook]

        [blogger]

        [disqus]





        1. اختار نظام التعليقات الذى سوف يظهر فى المدونة كما تريد
        2. وفى اللإضافة الثانية يتم وضع بها معرف تعليقات ديسكس 
        3. ولمعرف معرف تعليقات ديسكس ادخل الى هنا
        4. قم بالذهاب إلى هذا الرابط disqus
        5. اضغط على "Edit Settings" وقم باختيار قناة مدونتك الحاليه .













        • سوف تجده كما هو فى الصورة التالية






          • وانقل معرف التعليقات فى اللإضافة الثانية وسوف تعمل معك
          • الان قم بوضع الكود التالى فوق الوسم </body>

          <script type='text/javascript'>
          /*<![CDATA[*/
          // by wdbloog.blogspot.com
          (function(a){a.fn.simplyTab=function(b){b=jQuery.extend({active:1,fx:null,showSpeed:400,hideSpeed:400,showEasing:null,hideEasing:null,show:function(){},hide:function(){},change:function(){}},b);return this.each(function(){var e=a(this),c=e.children("[data-tab]"),d=b.active-1;e.addClass("simplyTab").prepend('<ul class="wrap-tab"></ul>');c.addClass("content-tab").each(function(){a(this).hide();e.find(".wrap-tab").append('<li><a href="#">'+a(this).data("tab")+"</a></li>")}).eq(d).show();e.find(".wrap-tab a").on("click",function(){var f=a(this).parent().index();a(this).closest(".wrap-tab").find(".activeTab").removeClass("activeTab");a(this).addClass("activeTab");if(b.fx=="slide"){if(c.eq(f).is(":hidden")){c.slideUp(b.hideSpeed,b.hideEasing,function(){b.hide.call(e)}).eq(f).slideDown(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(b.fx=="fade"){if(c.eq(f).is(":hidden")){c.hide().eq(f).fadeIn(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(b.fx=="fancyslide"){if(c.eq(f).is(":hidden")){c.slideUp(b.hideSpeed,b.hideEasing,function(){b.hide.call(e)}).eq(f).delay(b.hideSpeed).slideDown(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(c.eq(f).is(":hidden")){c.hide().eq(f).show()}}}}b.change.call(e);return false}).eq(d).addClass("activeTab")})}})(jQuery);
          // by wdbloog.blogspot.com
          $(document).ready(function(){$(".cmm-tabs").simplyTab({active:1,fx:"fade",showSpeed:400,hideSpeed:400});$('.blogger-tab').append($('#comments'));$(".cmm-tabs.simplyTab .wrap-tab").wrap("<div class='cmm-tabs-header'/>");$('.cmm-tabs-header').prepend('')});$(document).ready(function(e){e("abbr.timeago").timeago()});$(document).ready(function(){$("ul#sub-menu").parent("li").addClass("hasSub");(jQuery)});$(document).ready(function(){$('a[name="ads-post-in"]').before($('#ads-post10').html());$('#ads-post10').html('')});$(document).ready(function(){$(".sidebar-wrapper .widget h2").wrap("<div class='widget-title'/>");$(".footer-sections .widget h2").wrap("<div class='widget-title'/>");$("#menu ul li").each(function(){$(this).hoverTimeout(0,function(){$(this).children("ul").slideDown()},0,function(){$(this).children("ul").hide()})});$(".index .post-outer,.archive .post-outer").each(function(){$(this).find(".block-image .thumb a").attr("style",function(e,t){return t.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(e,t){return t.replace("s72-c","s1600")})});$(".widget-content").each(function(){var e=$(this).text();if(e.substr(0,10).match("page")){e=e.replace("page/","");$(this).html('<center><div id="fb-root"></div><div class="fb-page" data-href="'+e+'" data-width="300" data-height="230" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></center>')}});$(window).scroll(function(){if($(this).scrollTop()>200){$('#back-to-top').fadeIn()}else{$('#back-to-top').fadeOut()}});$('#back-to-top').hide().click(function(){$('html, body').animate({scrollTop:0},1000);return false});var search=$('.search');search.click(function(e){e.preventDefault();if(search.is('.active')&&$(e.target).is(search)){search.removeClass('active')}else{search.addClass('active');search.find('input').focus()}});$('body').click(function(e){if(search.is('.active')&&!$(e.target).is('.search, .search form, .search input')){search.removeClass('active')}});var e="[";var t="]";$(".social-widget").each(function(){var e=$(this);var t=$(this).find(".sw-item");if(t.length===0){e.remove()}$(this).find(".widget").removeClass("LinkList");$(".social-widget .sw-item.facebook").find(".sw-desc").text("Likes");$(".social-widget .sw-item.rss,.social-widget .sw-item.youtube").find(".sw-desc").text("Subscribes");var n="[";var r="]";$(".social-widget *").replaceText(n,'<span class="sw-counter">');$(".social-widget *").replaceText(r,"</span>");$(".sw-item").each(function(){var e=$(this).find(".delete-count");var t=$(this).find(".sw-counter");$(e).before($(t));$(e).remove()})});var n=$("#sidebar_tabs #tab1 .widget h2").text();$(".tab-opt .opt-1 a").text(n);var r=$("#sidebar_tabs #tab2 .widget h2").text();$(".tab-opt .opt-2 a").text(r);var i=$("#sidebar_tabs #tab3 .widget h2").text();$(".tab-opt .opt-3 a").text(i);$("#tab1 .widget h2,#tab2 .widget h2,#tab3 .widget h2,#tab1 .widget-title,#tab2 .widget-title,#tab3 .widget-title").remove();$(".sidebar_tabs").tabslet({mouseevent:"click",attribute:"href",animation:true});if($(".sidebar_tabs .widget").length===0){$(".sidebar_tabs").remove()}var s="[full_width]";var o="[right_sidebar]";var u="[left_sidebar]";$(".post *").replaceText(s,"<style>@media screen and (min-width: 980px){.item #main-wrapper{width:100% !important;float:none!important;border-left:0!important;border-right:0!important}.item .sidebar-wrapper{display:none;}.item #main-wrapper #main{margin-right:0!important;margin-left:0!important}.related li {width: 31.655%;}.related-thumb,.related li .related-img{height: 150px;}}</style>");$(".post-body *").replaceText(o,"<style>@media screen and (min-width: 980px){.item #main-wrapper{float:left!important;border-left:0!important;margin-left: 0px !important;}.item .sidebar-wrapper{float:right!important;padding-right:0!important;}}</style>");$(".post-body *").replaceText(u,"<style>@media screen and (min-width: 980px){.item #main-wrapper{float:right!important;border-left:0!important;margin-left: 0px !important;}.item .sidebar-wrapper{float:left!important;padding-right:0!important;}}</style>");(function(e){var t=e("a.newer-link");var n=e("a.older-link");e.get(t.attr("href"),function(n){t.html('<span>'+e(n).find(".post h1.post-title").text()+"</span>")},"html");e.get(n.attr("href"),function(t){n.html('<span>'+e(t).find(".post h1.post-title").text()+"</span>")},"html")})(jQuery)});
          /*]]>*/
          </script>



          • الان احفظ القالب ومبروك عليكم

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

          google-playkhamsatmostaqltradent