اضافة ازرار التنقل بين المواضيع لمدونات بلوجر [ التالي

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي اقدم لكم اليوم اضافة رائعة لمدونات بلوجر وتتمثل في اورار تنقل بين المواضيع التالية و السابقة

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

شريح تركيب الاضافة

إبحث على </head> وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isPost'>
<style type='text/css'>
/*<![CDATA[*/
/* ------ Navigation ------ */
.topic-nav{clear:both;margin-top:20px;display:block;padding:20px;border:1px solid #eeeeee}
.topic-nav-wrap{position:relative}
.topic-nav-cont{overflow:hidden;font-size:0}
.topic-nav-cont a{width:50%;padding:15px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;position:relative}
.topic-nav-cont a:hover{position:static;background:-webkit-linear-gradient(45deg,#d24949,#9e44c9);background:-o-linear-gradient(45deg,#d24949,#9e44c9);background:-moz-linear-gradient(45deg,#d24949,#9e44c9);background:linear-gradient(45deg,#d24949,#9e44c9)}
.topic-nav .next{float:left;border-right:1px solid #eeeeee}
.topic-nav .prev{float:right;margin-right:-1px;border-left:1px solid #eeeeee}
.topic-nav-cont span{display:block;width:120px;margin:0 auto;font-size:12px;color:#777777;position:relative;font-weight:700;padding:5px 0;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#eeeeee}
.topic-nav-cont a:hover span{background-color:#FFF;color:#d24949}
.topic-nav-cont h4{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;font-size:16px;margin:10px 0 0;overflow:hidden;color:#222222;max-height:50px;line-height:1.5em}
.topic-nav-cont a:hover h4{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;color:#FFF}
.topic-nav .topic-img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;opacity:0;width:49.9%;height:180px;border:10px solid #9e44c9;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;position:absolute;bottom:150%;z-index:1}
.topic-nav .topic-img img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;width:100%;height:100%;margin:0}
.topic-nav-cont a:hover .topic-img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;opacity:1;bottom:120%}
.topic-nav .next .topic-img{left:0}
.topic-nav .prev .topic-img{right:0}
.topic-nav .topic-img:after{content:"";display:block;border-width:19px;border-style:solid;border-color:#9e44c9 transparent transparent;position:absolute;left:-webkit-calc(50% - 19px);left:-moz-calc(50% - 19px);left:calc(50% - 19px);top:100%}
@media screen and (max-width:480px){.topic-nav-cont a.next,.topic-nav-cont a.prev{float:none;width:100%;border:none;display:block}.topic-nav .topic-img{display:none!important}}
@media print{.topic-nav{display:none}}
/*]]>*/
</style>
</b:if>

إبحث على </body> وضع الكود التالي فوقه

<b:if cond='data:view.isPost'>
<script type='text/javascript'>/*<![CDATA[*/
var next_text ='الموضوع التالي';
var prev_text='الموضوع السابق';
var noimg ='https://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/s1600/90.jpg';
$(document).ready(function(){var t=$(".topic-nav .next"),a=$(".topic-nav .prev")
$.get(t.attr("href"),function(a){var r=$(a).find("h1.entry-title").text(),i=$(a).find(".post .separator img")
try{var n='<img src="'+i[0].src+'"  alt="'+r+'" />'}catch(c){var n='<img src="'+noimg+'" alt="'+r+'"/>'}t.html('<span class="next-txt">'+next_text+"</span><h4>
"+r+'</h4>
<div class="topic-img">
'+n+"</div>
")},"html"),$.get(a.attr("href"),function(t){var r=$(t).find("h1.entry-title").text(),i=$(t).find(".post .separator img")
try{var n='<img src="'+i[0].src+'"  alt="'+r+'" />'}catch(c){var n='<img src="'+noimg+'" alt="'+r+'"/>'}a.html('<span class="prev-txt">'+prev_text+"</span><h4>
"+r+'</h4>
<div class="topic-img">
'+n+"</div>
")},"html")})
//]]>
</script>
</b:if>

الان في الخطوة الاخيرة و هوا الكود الذي سوف يظهر في الاضافة وعادة ما تكون الاضافة فوق المواضيع ذات صلة او اسفل ازرار النشر لذا حاول البحث على هذه الاضافات ووضع الكود التالي فوقها او اسفلها

مستر سيف - Mr seif 18 نوفمبر 2018 في 9:24 ص

اخى عبدو هل اشتريت هذا القالب من idblanter ام انت من صممته

وان ماكس المعلوميات 18 نوفمبر 2018 في 7:46 م

أزال أحد مشرفي المدونة هذا التعليق.

AbdoElbanaa 4 ديسمبر 2018 في 11:00 م

دى من قالب سكويز

عبدو تكنولوجي - Abdou Technologie 5 ديسمبر 2018 في 3:29 ص

نعم

maher 16 يناير 2019 في 10:56 ص

اضافة غاية في الروعة

و لكن بعد التجريب

ظهرت المستطيلات الموضوع التالي و الموضوع السابق و هي تعمل عند الضغط عليها

و لكن صور الموضوع التالي و السابق لم تظهر

و شكرا لك

Djihad Tech 29 يناير 2019 في 7:47 ص

(o)

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع