اضافة خيارات التنقل مع أسماء وصور المواضيع

اضافة خيارات التنقل مع أسماء وصور المواضيع - بالطبع شاهدت هذه الاضافة فى المدونات والقوالب التى تستخدمها، ومما لا شك فيه انك تعرف وظيفة هذه الاداة، وهى التنقل بين المواضيع مع خيارات التنقل مع اسماء الموضوع، ولكن الاضافة اليوم مختلفة وجديدة الشكل وهى خيارات التنقل اسفل المواضيع وبها اسماء المواضيع وصورها.

اضافة خيارات التنقل مع أسماء وصور المواضيع

1. اذهب الى لوحة التحكم > القالب > تحرير HTML

2. ابحث عن </head> ، وضع الكود التالي فوقه

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-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}
.halaman-kiri{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.current-pageright,.current-pageleft,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageright,.current-pageleft{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{right:10px}
.panahkanan,.halaman-kanan a div:before{left:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isihalaman-kanan img{left:0}
.isihalaman-kiri img{right:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageright,.current-pageleft {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageright{right:0;padding-right:40px;}
.halaman-kiri a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageleft  {left:0;padding-left:40px}
.halaman-kanan a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-right{font-weight:light}
.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}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

3. ابحث عن الكود التالى او عن نصفه

<b:includable id='nextprev'>...</b:includable>

4. استبدل الكود التالى بالكود السابق

<b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-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-pageright'><i class='fa fa-chevron-right panahkiri'/><span class='pager-title-right'>التالى</span><br/>هذا احدث موضوع بالمدونة</span>
</b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-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-pageleft'><i class='fa fa-chevron-left panahkanan'/><span class='pager-title-right'>السابق</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>

5. انسخ الكود التالى وضعه فى المكان المناسب داخل المواضيع

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

6. مثال على مكان وضع الكود السابق داخل جزء المواضيع

<b:includable id='post' var='post'>
<article class='post hentry'.............
..........
..........
..........
</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
</b:includable>

7. ضع الكود التالى فوق </body>

<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>

7. احفظ القالب، انتهى شرح اضافة خيارات التنقل مع أسماء وصور المواضيع، شكرا لكم على الزيارة.