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

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

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

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

إبحث على </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU4P7CMew8pGRKmuPqZ77jl8tq5VWDhi7TDrGMnq7VdvK2bQobp4DqsXSuyXosDd3E_WKKWHtUwVO-AwAjZomG4Az8MpPRKm62hyyj5KCN9LLql7EZiKTlmzP_KAE1WZ3wvgS0CS2NZQY/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>

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

الأحد، 18 نوفمبر 2018

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

الكاتب :سيف الدين احمد

ليست هناك تعليقات:

إرسال تعليق

التسميات

المشاركات الشائعة