اضافات ترقيم صفحات بلوجر بشكل احترافي وباربعة الوان















بسم الله الرحمان الرحيم

تحية لكل متابعي وزوار مدونة منارة المعلوميات ,اليوم احضرت لكم اضافة رائعة وجديدة والكثير يبحث عنها لانها مهمة كثيرا ,لذا احضرتها لكم اليوم مع طريقة التكيب سهلة للغاية.


1-من لوحة التحكم بلوجر نختار قالب
2-ثم تحرير HTML
3-ثم نبحث عن الكود التالي:



</body>


4-ثم نضيف الكود التالي فوقه مباشرة


<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>  /*<![CDATA[*/    var postperpage=6;    var numshowpage=4;    var upPageWord ='« Previous Page';    var downPageWord ='Next Page »';    var urlactivepage=location.href;    var home_page="/";  /*]]>*/</script><script type='text/javascript'>  /*<![CDATA[*/    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=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");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}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(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}  /*]]>*/</script></b:if></b:if>



5-ثم نبحث عن الكود التالي:


</head>

6-واخيرا نضيف كود الترقيم باللون الذي تريدون فوق الوسم السابق مباشرة:


✔ اضافة الترقيم باللون الاحمر:

<style>
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}.showpageOf{display:none!important}</style>



✔ اضافة الترقيم باللون الازرق:
<style>#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}.showpageOf{display:none!important}</style>


✔ اضافة الترقيم باللون الاخضر:


<style>#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}.showpageOf{display:none!important}</style>



✔ اضافة الترقيم باللون الاسود:


<style>#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid #202D3A;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2c3e50;color:#FFF}.showpageOf{display:none!important}</style>





طريقة تغيير سكرول بار [شريط التمرير] بشكل راقي واحترافي





























بسم الله الرحمان الرحيم


السلام عليكم ورحمة الله وبركاته ,تحية لكل مابعي وزوار مدونة منارة المعلوميات ,اليوم لدينا موضوع جديد سوف نتطرق فيه الى كيفية تغيير السكرول بار لمدونات بلوجر ,وهي اضافة رائعة  وجد احترافية والكثير يبحث عنها  لذلك احضرتها لكم اليوم.




ناتي اذن للاضافة:

-من لوحة التحكم بلوجر نختار قالب
-ثم تحرير HTML
-ثم نبحث عن الكود التالي:

]]></b:skin>


✔-ثم نضع الكود التالي فوقه مباشرة:

::-webkit-scrollbar{ background:#e1e1e1; width:15px;}::-webkit-scrollbar-thumb{ -webkit-shadow:inset 0 0 6px rgba(0,0,0,0.5); -webkit-border-radius:30px; background-image:-webkit-linear-gradient(top,#9bcfff 25%,#0e8aff 51%);}::-webkit-scrollbar-track{ -webkit-shadow:inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius:30px;}

------------------------------------------


✔-ولتغيير عرض السكرول بار على حسب ذوقك:


غير الكود التالي بعدد اقل:

15px


✔-ولتغيير لون السكرول بار على حسب ذوقك:


غير الكدو التلي بمايناسبك:



 #9bcfff

#0e8aff




مدونه منارة المعلوميات - معني الاحتراف

يتم التشغيل بواسطة Blogger.

جميع الحقوق محفوضة لدى مدونة منارة المعلوميات 2014-2015

تصميم : حمادة محمد