اضافة مشاركات ذات صلة عائمة في المدونة

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

لمعاينة هاته الاضافة من هنا

طريقة التركيب

شرح طريقة التركيب 

1 . توجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>

3. ضع الكود التالي فوقه.

#boxar1web{background:#fff;border: 1px solid #EAEAEA;;width:320px;height:260px;position:fixed;overflow:hidden;border-right: none;;left:-360px;z-index:9999;text-align:right!important;letter-spacing:0;}
.boxar1web-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:droid arabic kufi;text-transform:capitalize;font-weight:bold;padding-left:25px}
.boxar1web-title span a{float:left;height:35px;width:25px;}
a#boxar1web-close, a#boxar1web-close {margin-left:15px;}
.boxar1web-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.boxar1web-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.boxar1web-container{border:none;float:right;width:100%;height:auto;margin:3px}
.boxar1web-container > div{border:none;height:40px;margin:3px;padding:10px;}
.boxar1web-container > div > span {font-size:14px;}
.boxar1web-container img{float:right;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-ar1web {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-ar1web h4 {font-size:150%;margin:0 0 .5em;}
.related-ar1web-style-2 {border: 1px dashed #eee;;margin-top:-20px;padding-top:15px;list-style:none;font-family: cursive;background: #F9F9F9;}
.related-ar1web-style-2 li {margin-right:-35px;style:none;}
.related-ar1web-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-ar1web-style-2 li:first-child {border-top:none}
.related-ar1web-style-2 .related-ar1web-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:right;margin:2px 10px 0 0;border:1px solid #ccc;  margin-left: 13px;}
.related-ar1web-style-2 .related-ar1web-item-title {font-weight:bold;font-size:113%;text-transform:capitalize;  font-family: droid arabic kufi;}
a.related-ar1web-item-title {color :#333 !important;}
a:hover.related-ar1web-item-title {color :#0491ea !important;text-decoration:none;}
.related-ar1web-style-2 .related-ar1web-item-summary {display:block;overflow:hidden;}

4 . ابحث عن </head>

5  . ضع الكود التالي فوقه مباشرة.

<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#boxar1web&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#boxar1web&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });
  
$(document).ready(function(){
 var boxar1web      = $(&#39;#boxar1web&#39;);
    var closed      = $(&#39;#boxar1web-close&#39;);
    var minimize    = $(&#39;#boxar1web-minimize&#39;);
    var maximize    = $(&#39;#boxar1web-maximize&#39;);
  
    maximize.hide();
  
    closed.click(function(){
        boxar1web.css({&#39;right&#39;:&#39;-350px&#39;});
        boxar1web.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        boxar1web.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        boxar1web.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>

6 .  ابحث عن <div class='post-footer'> وضع الكود التالي أدناه ستجد الكود متكرر الآخير هو المقصود.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='boxar1web'>
    <div class='boxar1web-title boxar1web-www'>
      <span style='float: right;margin:10px 40px 0 15px;'>أيضاً إقرأ هذا المقال</span>
        <span><a href='javascript:void(0);' id='boxar1web-close' title='close'><img alt='close button' class='a' src='https://ar1web-com.googlecode.com/svn/trunk/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='boxar1web-minimize' title='minimize'><img alt='minimize button' src='https://ar1web-com.googlecode.com/svn/trunk/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='boxar1web-maximize' title='maximize'><img alt='maximize button' src='https://ar1web-com.googlecode.com/svn/trunk/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='boxar1web-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-ar1web' id='sliding-tab'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
      numPosts: 3,
      summaryLength: 35,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 45,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;sliding-tab&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle:2,
      callBack: function() {}
  };
  </script><script src='https://ar1web-com.googlecode.com/svn/trunk/rd-ar1web.js' type='text/javascript'/>
</b:if>       
    </div>
</div>
</b:if>

* غير أيضاً إقرأ هذا المقال بما يناسبك

ارجو ان تكون الاضافة قد اعجبتكم

مصدر الاضافة مدونة عرب ويب