اداة ترقيم الصفحات بكود جديد سريع خفيف على القالب

نقدم لكم ... 

اداة ترقيم الصفحات بكود جديد سريع خفيف على القالب 

و

بـ 17 شكل و لون لتجميل مدونتك

* وصف الاداة :

اداة ترقيم الصفحات لمدونات البلوجر عبارة عن شريط به ارقام الصفحات الخاصة بالمدونة + اجمالي عدد الصفحات

* مميزات الاداة :

1. تسهيل تصفح المدونة على الزائر

2. اداة ترقيم الصفحات متاحة بأشكال كتيير لتناسب كل الاذواق و القوالب

3. تعديل الهاك ليظهر بصورة فورية داخل المدونة و ازالة المشاكل التي كانت موجودة في الكود القديم

4.الكود خفيف على القالب جدااا ,,, فهو لن يزيد من حجم القالب على الاطلاق

* الطريقة :



1. افتح لوحة التحكم اضغط هنا

2. اختر تصميم

3. ثم تحرير HTML

4. علم صح على توسيع قوالب عناصر واجهة المستخدم

5. ابحث عن </body>

6. ضع قبله مباشرة الكود التالي :

<!--Page Navigation Starts : For More Blogger hacks and tutorials visit us : www.raykcool.blogspot.com--> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=3; var upPageWord =''; var downPageWord =''; var allpages ='الصفحات'; </script> <script src='http://html-code.webs.com/html/blogger-page-nav.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends : For More Blogger hacks and tutorials visit us : www.raykcool.blogspot.com-->

7.  تبحث عن :  ]]></b:skin>

8. ضع قبله الشكل الذي تريده لأداة ترقيم الصفحات

 الشكل الاول

 الكود 

  .showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #000; text-shadow:0 1px 2px #fff; font-weight: 700; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #999; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt88QdkEvG6mWDG1UtwEgf6PnDVE9PM_W_5xtr1SK-qaHkM34B8v0_cCz-2zpJjEeW-v9mlOz-TtG48CuvLw808jXfBdPwr5Rfp3GO7iNdqvMqqCuSdZP-kkkOeeSlqrDpmPnQpMgI8g/s1600/wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt88QdkEvG6mWDG1UtwEgf6PnDVE9PM_W_5xtr1SK-qaHkM34B8v0_cCz-2zpJjEeW-v9mlOz-TtG48CuvLw808jXfBdPwr5Rfp3GO7iNdqvMqqCuSdZP-kkkOeeSlqrDpmPnQpMgI8g/s1600/wp1.jpg) 0 -25px repeat-x; } .showpageOf{ margin:0 8px 0 0; } .showpagePoint { color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #999; background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt88QdkEvG6mWDG1UtwEgf6PnDVE9PM_W_5xtr1SK-qaHkM34B8v0_cCz-2zpJjEeW-v9mlOz-TtG48CuvLw808jXfBdPwr5Rfp3GO7iNdqvMqqCuSdZP-kkkOeeSlqrDpmPnQpMgI8g/s1600/wp1.jpg) 0 0 repeat-x; text-decoration: none; }

الشكل الثاني

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #000; text-shadow:0 1px 2px #fff; font-weight: 700; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #919106; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWFiqn6aBurZza0m3q7JzLMoqtaEX1YF9-5wUOqygzHXlBGBD5-tm0_JV2NAtcanArdNXEqIiCKF3QdFBRqnNmQ78QtUASPSAIj1HnMtk2pRYuqJOXyveV1hckmIYNwuctDTp-E4pVs4/s1600/wp2.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #aeae0a; background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWFiqn6aBurZza0m3q7JzLMoqtaEX1YF9-5wUOqygzHXlBGBD5-tm0_JV2NAtcanArdNXEqIiCKF3QdFBRqnNmQ78QtUASPSAIj1HnMtk2pRYuqJOXyveV1hckmIYNwuctDTp-E4pVs4/s1600/wp2.jpg) 0 -25px repeat-x; } .showpageOf{ margin:0 8px 0 0; } .showpagePoint { color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #919106; background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWFiqn6aBurZza0m3q7JzLMoqtaEX1YF9-5wUOqygzHXlBGBD5-tm0_JV2NAtcanArdNXEqIiCKF3QdFBRqnNmQ78QtUASPSAIj1HnMtk2pRYuqJOXyveV1hckmIYNwuctDTp-E4pVs4/s1600/wp2.jpg) 0 0 repeat-x; text-decoration: none; }

الشكل الثالث

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwWWbZc3SsjuIo5z1WA6AAuBEdI-8JmJNP_dJXnhWKiajNyNom5R0WLLRhZ0ht9WpTGsRIiUe6jCDQ51UiMmH8jMCNdNGu-fypafYrU3Vkh3S2gmOrV-2s53Coph-jIe-0LDMsLWfaTrI/s1600/wp3.jpg) 0 -25px repeat-x; } .showpageNum a:hover { background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwWWbZc3SsjuIo5z1WA6AAuBEdI-8JmJNP_dJXnhWKiajNyNom5R0WLLRhZ0ht9WpTGsRIiUe6jCDQ51UiMmH8jMCNdNGu-fypafYrU3Vkh3S2gmOrV-2s53Coph-jIe-0LDMsLWfaTrI/s1600/wp3.jpg) 0 -50px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwWWbZc3SsjuIo5z1WA6AAuBEdI-8JmJNP_dJXnhWKiajNyNom5R0WLLRhZ0ht9WpTGsRIiUe6jCDQ51UiMmH8jMCNdNGu-fypafYrU3Vkh3S2gmOrV-2s53Coph-jIe-0LDMsLWfaTrI/s1600/wp3.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الرابع

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 4px; margin:0 4px; text-decoration: none; border-top:2px solid #000; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5EWEevLgqhAahzYhkfBriD7e_5M8qBZOjGYpwc6hya9kmX5tOOOecIe4YTx7E8PPh10XYROj00MBFbDBpDRsDDk8nOQ4dt6LO22ay2_gY-a2nZYmVI5SzegW67yZwxQuw4Xv7xeUsa0/s1600/wp4.jpg) 0 -25px repeat-x; } .showpageNum a:hover { border-top:2px solid #999; border-left:1px solid #999; border-right:1px solid #999; border-bottom:1px solid #999; background: #999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5EWEevLgqhAahzYhkfBriD7e_5M8qBZOjGYpwc6hya9kmX5tOOOecIe4YTx7E8PPh10XYROj00MBFbDBpDRsDDk8nOQ4dt6LO22ay2_gY-a2nZYmVI5SzegW67yZwxQuw4Xv7xeUsa0/s1600/wp4.jpg) 0 -50px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; border-top:2px solid #000; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5EWEevLgqhAahzYhkfBriD7e_5M8qBZOjGYpwc6hya9kmX5tOOOecIe4YTx7E8PPh10XYROj00MBFbDBpDRsDDk8nOQ4dt6LO22ay2_gY-a2nZYmVI5SzegW67yZwxQuw4Xv7xeUsa0/s1600/wp4.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الخامس

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6OztPAP1P9hwNGyeVdK3imNto_VwMdA4wCnN3zYE7S3aJ5z3hvfdwd-bv_SG6cmtCkoQVE0XAOz9fPk61RrLeulgDa0X6VOnILuoueuNDmEE48GqNjUsPekRRnmgAjmMMlaDCUH1mxmQ/s1600/wp5.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6OztPAP1P9hwNGyeVdK3imNto_VwMdA4wCnN3zYE7S3aJ5z3hvfdwd-bv_SG6cmtCkoQVE0XAOz9fPk61RrLeulgDa0X6VOnILuoueuNDmEE48GqNjUsPekRRnmgAjmMMlaDCUH1mxmQ/s1600/wp5.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6OztPAP1P9hwNGyeVdK3imNto_VwMdA4wCnN3zYE7S3aJ5z3hvfdwd-bv_SG6cmtCkoQVE0XAOz9fPk61RrLeulgDa0X6VOnILuoueuNDmEE48GqNjUsPekRRnmgAjmMMlaDCUH1mxmQ/s1600/wp5.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل السادس

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #fff; font-size:11px; margin:10px; padding:8px 20px; background: #333; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #666; } .showpageNum a:hover { background: #888; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #da6100; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل السابع

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://1.bp.blogspot.com/-DEFIwK7_IAY/TVandsM_HhI/AAAAAAAACQI/4vhi13IhWvY/s1600/wp7.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://1.bp.blogspot.com/-DEFIwK7_IAY/TVandsM_HhI/AAAAAAAACQI/4vhi13IhWvY/s1600/wp7.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://1.bp.blogspot.com/-DEFIwK7_IAY/TVandsM_HhI/AAAAAAAACQI/4vhi13IhWvY/s1600/wp7.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الثامن

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://4.bp.blogspot.com/-sxNMNs24BIg/TVanebZl5ZI/AAAAAAAACQM/ipG9fhyTruQ/s1600/wp8.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://4.bp.blogspot.com/-sxNMNs24BIg/TVanebZl5ZI/AAAAAAAACQM/ipG9fhyTruQ/s1600/wp8.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://4.bp.blogspot.com/-sxNMNs24BIg/TVanebZl5ZI/AAAAAAAACQM/ipG9fhyTruQ/s1600/wp8.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل التاسع

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://2.bp.blogspot.com/-e1U2hfeED3s/TVanfZzWh5I/AAAAAAAACQQ/53LyyIdW1jc/s1600/wp9.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://2.bp.blogspot.com/-e1U2hfeED3s/TVanfZzWh5I/AAAAAAAACQQ/53LyyIdW1jc/s1600/wp9.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://2.bp.blogspot.com/-e1U2hfeED3s/TVanfZzWh5I/AAAAAAAACQQ/53LyyIdW1jc/s1600/wp9.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل العاشر

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://4.bp.blogspot.com/-jQ9hq4H57HI/TVanf6w0KNI/AAAAAAAACQU/RpXzZBd4tto/s1600/wp10.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://4.bp.blogspot.com/-jQ9hq4H57HI/TVanf6w0KNI/AAAAAAAACQU/RpXzZBd4tto/s1600/wp10.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://4.bp.blogspot.com/-jQ9hq4H57HI/TVanf6w0KNI/AAAAAAAACQU/RpXzZBd4tto/s1600/wp10.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الحادي عشر

الكود



  .showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://4.bp.blogspot.com/-s0WiTPkz6DI/TVangjEV8OI/AAAAAAAACQY/ka0ytFaQOAk/s1600/wp11.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://4.bp.blogspot.com/-s0WiTPkz6DI/TVangjEV8OI/AAAAAAAACQY/ka0ytFaQOAk/s1600/wp11.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://4.bp.blogspot.com/-s0WiTPkz6DI/TVangjEV8OI/AAAAAAAACQY/ka0ytFaQOAk/s1600/wp11.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الثاني عشر

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://1.bp.blogspot.com/-EYR4GwYKenE/TVanhCcinAI/AAAAAAAACQc/NNbKiHcA3gY/s1600/wp12.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://1.bp.blogspot.com/-EYR4GwYKenE/TVanhCcinAI/AAAAAAAACQc/NNbKiHcA3gY/s1600/wp12.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://1.bp.blogspot.com/-EYR4GwYKenE/TVanhCcinAI/AAAAAAAACQc/NNbKiHcA3gY/s1600/wp12.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الثالث عشر

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://2.bp.blogspot.com/-4A4tir3iFnc/TVanh6KmLoI/AAAAAAAACQg/_P5B-wfs-Z0/s1600/wp13.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://2.bp.blogspot.com/-4A4tir3iFnc/TVanh6KmLoI/AAAAAAAACQg/_P5B-wfs-Z0/s1600/wp13.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://2.bp.blogspot.com/-4A4tir3iFnc/TVanh6KmLoI/AAAAAAAACQg/_P5B-wfs-Z0/s1600/wp13.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الرابع عشر

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://4.bp.blogspot.com/-lFuncCVsSrk/TVani85ApVI/AAAAAAAACQk/07T4ODU6tdM/s1600/wp14.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://4.bp.blogspot.com/-lFuncCVsSrk/TVani85ApVI/AAAAAAAACQk/07T4ODU6tdM/s1600/wp14.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://4.bp.blogspot.com/-lFuncCVsSrk/TVani85ApVI/AAAAAAAACQk/07T4ODU6tdM/s1600/wp14.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل الخامس عشر

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://4.bp.blogspot.com/-tfddGUI-g8Q/TVanjcekx9I/AAAAAAAACQo/3Wv1_VmteOU/s1600/wp15.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://4.bp.blogspot.com/-tfddGUI-g8Q/TVanjcekx9I/AAAAAAAACQo/3Wv1_VmteOU/s1600/wp15.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://4.bp.blogspot.com/-tfddGUI-g8Q/TVanjcekx9I/AAAAAAAACQo/3Wv1_VmteOU/s1600/wp15.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل السادس عشر

 

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://3.bp.blogspot.com/-lNOisZW8GCo/TVanks7brVI/AAAAAAAACQs/kBuXusANMH4/s1600/wp16.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://3.bp.blogspot.com/-lNOisZW8GCo/TVanks7brVI/AAAAAAAACQs/kBuXusANMH4/s1600/wp16.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://3.bp.blogspot.com/-lNOisZW8GCo/TVanks7brVI/AAAAAAAACQs/kBuXusANMH4/s1600/wp16.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }

الشكل السابع عشر

الكود

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #fff; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; background: #333 url(http://2.bp.blogspot.com/-vws2Oqm9III/TVanlGAfVVI/AAAAAAAACQw/EjuPKM995gE/s1600/wp17.jpg) 0 -50px repeat-x; } .showpageNum a:hover { background: #666 url(http://2.bp.blogspot.com/-vws2Oqm9III/TVanlGAfVVI/AAAAAAAACQw/EjuPKM995gE/s1600/wp17.jpg) 0 -25px repeat-x; } .showpagePoint { color:#fff; padding: 3px 8px; margin: 2px; font-weight: 700; background: #06a2b9 url(http://2.bp.blogspot.com/-vws2Oqm9III/TVanlGAfVVI/AAAAAAAACQw/EjuPKM995gE/s1600/wp17.jpg) 0 0 repeat-x; text-decoration: none; } .showpageOf{ margin:0 8px 0 0; }