اضافة التالي والسابق مع عنواين و صور المواضيع بشكل احترافي

تركيب الإضافة

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.technomee-kanan,.technomee-kiri{transition:all .3s ease-in-out}
.technomee{margin:0;padding:0;min-height:170px;height:auto}
.technomee-kanan,.technomee-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.technomee-kiri{height:auto;float:right;padding:20px 10px 20px 40px;text-align:right;box-sizing:border-box}
.technomee-kanan,.technomee-kiri{-webkit-box-sizing:border-box}
.technomee-kanan{height:auto;float:left;padding:20px 40px 20px 10px;text-align:left;box-sizing:border-box}
.current-pageright,.current-pageleft,.technomee-kanan a,.technomee-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.technomee-kanan a,.technomee-kiri a,.current-pageright,.current-pageleft{color:#fff;}
#blog-pager,.isitechnomee-kanan,.isitechnomee-kiri{margin:0!important}
.panahkanan,.panahkiri,.technomee-kiri a div:before,.technomee-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.isitechnomee-kanan h5 {font-weight: 400;color: #ffffff;margin:0;font-size: 15px;}
.technomee-kiri h5 {font-weight: 400;color: #ffffff;margin:0;font-size: 15px;}
.panahkiri,.technomee-kiri a div:before{right:10px}
.panahkanan,.technomee-kanan a div:before{left:10px}
.technomee-kanan a:hover,.technomee-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isitechnomee-kanan img,.isitechnomee-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isitechnomee-kanan img{left:0}
.isitechnomee-kiri img{right:0}
.technomee-kiri a div, .technomee-kanan a div,.current-pageright,.current-pageleft {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 35px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.technomee-kiri a div,.current-pageright{right:0;padding-right:40px;}
.technomee-kiri a div:before{content:'\f054';font-family: FontAwesome;}
.technomee-kanan a div,.current-pageleft  {left:0;padding-left:40px}
.technomee-kanan a div:before{content:'\f053';font-family: FontAwesome;}
.technomee-kiri a div h6,.technomee-kanan a div h6,.pager-title-right{color: #fff;font-size: 13px;font-weight: 900;margin: 0;}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.technomee-kanan a:hover:after,.technomee-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.technomee-kiri,.technomee-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

<b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='technomee'>
  <div class='blog-pager' id='blog-pager'>
<div class='technomee-kiri'>
<div class='isitechnomee-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171;  رسالة أحدث</a>
      </span>
<b:else/>
      <span class='current-pageleft'><i class='fa fa-chevron-right panahkiri'/><span class='pager-title-left'>التالي</span><br/>هذه أحدث تدوينة</span>
    </b:if>
<div class='clear'/>
</div>
</div>
<div class='technomee-kanan'>
<div class='isitechnomee-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>رسالة أقدم &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-left panahkanan'/><span class='pager-title-left'>السابق</span><br/>هذه أقدم تدوينة</span>
    </b:if>
<div class='clear'/>
</div>
</div>
  </div>
<div class='clear'/>
</div>
</b:if>
            </b:includable>
            <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
    </div>
  </div>
  </b:if>
  <div class='clear'/>
</b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:include name='nav-post'/>
        </b:if> 

<script type='text/javascript'>
//<![CDATA[
(function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) { var thumb = $(data)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data)
            .find('.post-title')
            .text() + "' src='" + $(data)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        newerLink.html(thumb + '<div><h6>التالي</h6><h5>' + $(data)
            .find('.post-title')
            .text() + '</h5></div>') }, "html");
    $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data2)
            .find('.post-title')
            .text() + "' src='" + $(data2)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        olderLink.html(thumb2 + '<div><h6>السابق</h6><h5>' + $(data2)
            .find('.post-title')
            .text() + '</h5></div>') }, "html") })(jQuery);
//]]>
</script>