إضافة ترقييم الصفحات في مدونات البلوغر widget blogger

Buzz It
السبت، 19 ديسمبر 2009

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

أهمية الإضافة:
-ترابط المقالات و تشابكها مما يؤدي إلى أرشفة سريعة.
-تضفي على الصفحة الرئيسية جمالا و حيوية.
-تزيد من إحترافية مدونتك و تسهل على زائر قراءة التدوينات.
-تصفح ممتع و تنقل سهل بين المقالات حسب تاريخ الإرسال و ليس التصنيفات.

معلومات عن الشرح :
-مدة التي تحتاجها : ما بين 4 و 6 دقيقة.
-الخبرة التي تحتاجها:لا تحتاج .
-ماذا نحتاج :لا تحتاج لأي شىء.
-هل الخدمة مجانية:نعم الخدمة مجانية تماما.
-هل تحتاج تحميل:لا تحتاج.

نبدأ مع الشرح بإسم الله :
أولا:إذهب الى التخطيط ثم إضافة أداة.
نعمل كما هو موضح في الصورة التالية:

ثانيا:نقوم بإضافة هذا الكود و نعمل حفظ دون وضع العنوان:




<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.htm">Grab this Widget ~ Blogger Accessories</a></div>

ثالثا:بعدها نقوم بإزاحة المربع من العمود الجانبي إلى جهة الأخرى تحت رسائل المدونة الإلكترونية, و بهذا نكون قد أنهينا.

كل عام و أنتم بخير.
دمتم بخير

6 التعليقات:

محمد الجرايحى يقول...

السلام عليكم ورحمة الله وبركاته
شكراً لك أخى الكريم : إلياس
على جهدك الطيب والمفيد
بارك الله فيك وأعزك
أخوك
محمد

Mr.Hazem يقول...

تمنياتي لكم بالتوفيق
رائع ما يخطه اقلامكم
لا حرمني الله منكم

كمونة يقول...

كيف أقوم بإزاجة المربع المضاف تحت الرسائل الالكترونية؟؟
وجزاكم الله خير

الياس يقول...

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

kompos يقول...

الف شكر ليك يا غالي
بس انا نفذت كل شئ وتم الاضافة لمن لم يظهر ترقيم الصفحات .. ظهرت اضافة خالية

el7our يقول...

السلام عليكم
ركبت هذه الأداة منذ زمن و كانت تعمل و لكن توقفت الآن
هل من حل؟