في هذا الموضوع سنتعلم طريقة وضع عدد الصفحات أسفل المدونة، و هي إضافة
تسهل الانتقال من صفحة لأخرى في وقت أقل مما هو عليه الأمر افتراضيا، و هذا
مثال في الصورة :
- أولا ندخل إلى لوحة تحكم بلوجر ثم نختار قالب :
- نختار تحرير HTML :
- بعد ذلك نبحث عن :
]]></b:skin>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHRRTllPidh6PuRdvrh3Sh7Wb8QHZV14eLJhqnLtEH-wgl-sp6CzlkmZxvPRlkR7ThOi-T4-5saLqgUd4bgzL3HmYH0_TEHmwatGvIYe6qprYcNFLO6HSfNbPvvOW4dUz5d0FvrFH7Dk/s1600/3.jpg)
- ثم نضيف الكود التالي قبله كما في الصورة :
.pagenavi{
clear:both;margin:10px auto;text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#ff8400;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}
clear:both;margin:10px auto;text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#ff8400;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5u9RxQi_XiuDhbPCdhA12pOOnqVBD9sIZqyVzvaYQOfmOZGVWLErfLvUkRM0iGa44T2cC1a1cWtYChDimSP8HbZDuvkmba2DNFxNk6NXg4A9oYp0p5lZIgOjgRK7-lvyHe9gAn94A4lk/s1600/5.jpg)
- الآن نبحث عن :
Blog1![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzq2GScJwti01Y7Vk3Wb1LPeKbrmy1MkaD1pZu_oktZwA1dpIuVOuApLble-m7vvifd0L4d-JRfwqU7dl6QrQ4EBnmvlpkeRbQmP_MMDwvxIH93RE3py5NYiyMFbzRfWpm9UXfykl8Kmg/s640/6.jpg)
- نضيف بعده هذا الكود كما في الصورة :
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script type="text/javascript" src="https://dl.dropbox.com/u/63968842/navigation%20numbered%20widget%28www.widgetgenerators.blogspot.com%29.js"></script>
<div class="clear" />
</div>
</b:includable>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script type="text/javascript" src="https://dl.dropbox.com/u/63968842/navigation%20numbered%20widget%28www.widgetgenerators.blogspot.com%29.js"></script>
<div class="clear" />
</div>
</b:includable>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtF7OyVm3h0lWc4G9BGuRaPpKpnyskbKbWcNXXdFS_eT_2KC8ZbLdtBLJXQhRdrNY3UyWdiV54lXZfwOIc5-xZh9Y8Nse2Ml3X0hn45KnE1VvpxXl_5R1rHQdm6wfGW5KFa8zsdpeScJc/s640/7.jpg)
- نبحث كذلك على هذا الكود :
<b:include name='nextprev'/>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ysL202ciaUDPRoUyoJyJM9kyVklPRPd7lQnEPpdB-Xf2QQ3wjRGJLoVDrj9_N18_hdnT7FTrMfZ8Ae98mmQBaEAuLdKuYlVCpEl5vKVpoHV92kQ-ASWhU4yFhBfzqk07kGSnKVpdeyQ/s400/9.jpg)
- نبدلها بهذا الكود :
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzre0AYmtBMt47sofaJ0QGyedWmbivihvLp33go5X3A5Rj4Kp0dnHUroD3Z3tDqy-TeE9DH4cUnVhtIzTt9AnKxTICYr1NZkOvPC7cTzPzwBD45qsj792kptIE9XDjt5GVFvO0rpVP0gs/s400/10.jpg)
أخيرا نحفظ النموذج :