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

اضافة قائمة ترقيم الصفحات بلوجراسفل المدونة او جانبها مما يتيح لك اضهار كل الصفخات الموجودة في المدونة مما يتيح لزوار قرائة المواضيع السابقة . اضافة جميلة وسهلة التطبيق .
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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/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>