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

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

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

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

1. إبحث على </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>

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

<b:if cond='data:view.isPost'><script type='text/javascript'>/*<![CDATA[*/ var next_text ='الموضوع التالي'; var prev_text='الموضوع السابق'; var noimg ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEkjizGohINU7Mf4sxwtitaJGCp7bjxCOhIswAS9JfXQuTfHxbKzh_LWJR8k0Tv108JPwHt0wckvtDCZJJ-iSzqYPEmkEePuUGgfPAsL1Bsh6Q5qeScP4B4N2qT8PnQ0ocNZ39w4C4Q/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>

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

<b:if cond='data:view.isPost'><div class="topic-nav"><div class="topic-nav-wrap"><div class="topic-nav-cont"><b:if cond='data:newerPageUrl'><a class="next" expr:href='data:newerPageUrl'><span class="next-txt">الموضوع التالي</span><h4><data:newerPageTitle/></h4></a><b:else/></b:if><b:if cond='data:olderPageUrl'><a class="prev" expr:href='data:olderPageUrl'><span class="prev-txt">الموضوع السابق</span><h4><data:olderPageTitle/></h4></a><b:else/> </b:if></div></div></div></b:if>


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