إضافة مواضيع ذات صلة منزلقة الشكل الرابع

عدنا لكم بالجديد والجميل والمفيد من إضافات خاصة بقوالب بلوجر،  نقدم لكم إضافة بصندوق منزلق عمل هذه الإضافة هي طرح مقالات تتكون من نفس التسمية المرتبطة بالموضوع تماماً مثل عمل مقالات ذات صلة إلى أنّ هذه الأخيرة جد مميزة، خفيفة، تظهر بعد الدخول للموضوع والنزول قليلاً، بها زري الإغلاق و الإخفاء عدلت عليها بلمسات طفيفة يمكنك إضافة عدد لا متناهي من ظهور المواضيع، لكن أنصح بإستعمال ثلاثة على الأكثر كما سنشاهد بالمعاينة الحية... سبق وقدمت هاته الإضافة منذ مدة طويلة وتم تجديدها بأبهى حلة.

معاينة

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

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>

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

* المحدد بالأصفر numPosts هو عدد ظهور المواضيع غير 3 إلى الرقم المناسب لك

تنويه: إذا غيرت عدد المواضيع التي ستظهر فينبغي التعديل على طول الصندوق ويوجد بالكود الأول محدد باللون الأصفر