اضافة قائمة ترقيم الصفحات بلوجر

اضافة قائمة ترقيم الصفحات بلوجراسفل المدونة او جانبها مما يتيح لك اضهار كل الصفخات الموجودة في المدونة مما يتيح لزوار قرائة المواضيع السابقة . اضافة جميلة وسهلة التطبيق .
1.التخطيط

2 html/javascript

1:انصخ هدا الكود في html/javascript وقم بتغير الروابط المكتوبة بالاحمر اكتب فيها روابط الصفحات التي تريد الرقم ان ياخدك اليها .

 <style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwW2nhS_Gdu5Y1dRXrpC_YKDzjMAizMGWSA3fW6oU4EtSi22y6u7k5LoWz8zfmqOwb5jPqXK1DJexD2kL2jSvm8pI6gOjgVVRtwhxVswft_IFd9LEiMGzOXpNqHy17vjQ6_U631yq6Fx4/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0gFj76m4lGoLzRDLo5kgD0wjhDNDLSWFKeoD3MTG9g7C-Pqac7CBAy8O8ix4Bj6QJPRBzenCm4_1-zMOvaF6iD5Bd1mWV0-BZSW2fHxPqQLCGCdc1Nj9uC1smdVy9Nxeteok5xNlFPws/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul>
<li><a href="http://myfelipro.blogspot.com/p/pag1.html"><span>PAGE 1</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-4.html"><span>PAGE 2</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-3.html"><span>PAGE 3</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-2.html"><span>PAGE 4</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag5.html"><span>PAGE 5</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-6.html"><span>PAGE 6</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-7.html"><span>PAGE 7</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-8.html"><span>PAGE 8</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-9.html"><span>PAGE 9</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-10.html"><span>PAGE 10</span></a></li>
<li><a href="http://myfelipro.blogspot.com/p/pag-2.html"><span>PAGE 11</span></a></li>
</ul></div><style></style>