سلايدر منزلق لعرض المشاركات ذات صلة

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

معاينة

1 . توجه للقالب 

2 . ابحث عن  ]]></b:skin>

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

/* Related Post with Sliding CSS by Kang Ismet*/
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-10px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}
/* End CCSS Related Post with Sliding */

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

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

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

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

<!-- Related Post with Sliding by Kang Ismet -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</span>
        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwq3YRl90QaayuZt5AGgjjHAtwZ5PTJDc8Jl8iO4NaXJb0surpJpZeNtIYe2gkjAc-5uxZIFb0fdqlhY85pyBVd23nr6JmMkyI7CO9S5Oqk9JHDSiD-ExviTATu-42qvJOjWn5OZU0/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2dh-xambCt8pyfkQKuBrI2kddt4le9VvQbSYt-8wTFDI__Ex0XSqdMadwQzJ3o3XJx-nHGIYuSUHVsGZC90wEumVPQe9qR9y99YKd38RNtqONs4f9itTcBtA5T7ey3FcrS_YzGoJM/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9fWpl1DaxaVVCxyeidXu5i3VmHjyy7WHz972A5x6iejgil16unh6UFllOLKZDOXyAbJf4SThrfzPqy7D2kbV7h89dZSHbnpI5WDeCfETGsnMx7pn-YTGiXuGwQ3CUGfG0I8NuiSHg/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' 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: 2,
      summaryLength: 0,
      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='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>         
    </div>
</div>
</b:if><!-- Related Post Widget End --> 

واخيرا قم بحفظ النموذج .. إلى هنا نكون قد إنتهينا إذا اعجبتك الإضافة شاركنا برأيك