كيفية إضافة ترقيم الصفحات على بلوجر بطريقة احترافية..؟

mohamedelafndey أبريل 03, 2018 0 تعليق

شارك الموضوع :

Share

Tweet

Share

Share

Pin

Share

إضافة ترقيم الصفحات على بلوجر بطريقة احترافية 

إضافة ترقيم الصفحات على بلوجر بطريقة احترافية 

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

الخطوة الأولى :- وهي اختيار اللون المناسب والبحث عن ]]></b:skin> ونضع كود اللون قبلها


1- لون رصاصي وازرق

<br />#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}<br />.blog-pager {background: none;}<br />.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}<br />.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}<br />#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}<br /> .showpageOf{display:none!important}<br />#blog-pager .pages{border:none;}<br />




2- لون رصاصي و أحمر

<br />#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }<br />.blog-pager {background: none;}<br />.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}<br />.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}<br />#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}<br /> .showpageOf{display:none!important}<br />#blog-pager .pages{border:none;}<br />




3- لون اسود وبرتقالي

<br /> #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}<br />.blog-pager {background: none;}<br />.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}<br />.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}<br />#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}<br /> .showpageOf{display:none!important}<br />#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}<br />




4- لون اسود و أزرق سماوي

<br /> #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}<br />.blog-pager {background: none;}<br />.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}<br />.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}<br />.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}<br />a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}<br />#blog-pager .pages{border:none;background: none;}<br />




5- لون اسود غامق وفاتح

<br />#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}<br />.blog-pager {background: none;}<br />.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}<br />.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}<br /> .showpageOf{display:none!important}<br />#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}<br /> #blog-pager .pages{border:none;}<br />




الخطوة الثانية: نضيف كود الجافاسكربت

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



<br /><b:if cond='data:blog.pageType != "item"'><br /><b:if cond='data:blog.pageType != "static_page"'><br /><script type='text/javascript'><br /> /*<![CDATA[*/<br /> var perPage=3;<br /> var numPages=3;<br /> var firstText ='First';<br /> var lastText ='Last';<br /> var prevText ='« Previous';<br /> var nextText ='Next »';<br /> var urlactivepage=location.href;<br /> var home_page="/";<br /><br />if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}<br />pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}<br />if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}<br />if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}<br />if(pageStart>2){html+=' ... '}<br />for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}<br />if(pageEnd<lastPageNo-1){html+='...'}<br />if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}<br />var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}<br />if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}<br />var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}<br />if(pageArea&&pageArea.length>0){html=''}<br />if(blogPager){blogPager.innerHTML=html}}<br />function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}<br />function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}<br />if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}<br />document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}<br />if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}<br />document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}<br />function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}<br />function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}<br />function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}<br />location.href=pAddress}<br /><br /> /*]]>*/<br /></script><br /></b:if><br /></b:if><br />




perPage فهذا يوضح لك برقم المقالات التي تظهر في الصفحة الواحدة

numPages فهذا توضح عدد الصفحات التي ستظهر في الترقيم

ويمكنك تغيير ما بالاسفل بالنص المناسب لك.



- لتفادي حدوث مشاكل مع الاقسام والتسميات اتبع هذه الخطوات

قم بالبحث داخل القالب عن expr:href='data:label.url' ثم قم بتغييرها ب expr:href='data:label.url + "?&amp;max-results=7"' مع تغير رقم 7 بالرقم المناسب لك (عدد المقالات لكل صفحة) ويفضل ان يكون العدد مثل العدد الموجود بالاعلى امام perPage.

تفاصيل التدوينة

كاتب الموضوع : mohamedelafndey

عدد التعليقات : 0 التعليقات    المشاهدات : نشر يوم : أبريل 03, 2018 على قسم : جميع الحقوق محفوظة : ( اتفاقية نقل المحتوى ) للإبلاغ عن رابط معطوب : اضغط هنا

إضافات

بقلم :

mohamedelafndey

محمد محمود الافندي , مدون عربي اعشق التدوين وعالم البرمجيات بشكل عام وتبسيط المعلومه وثوف اشارك معكم كل ماهو جديد فقط انتظرونا..

إظهار التعليقات

إخفاء التعليقات