30‏/07‏/2009

إضافة أرقام الصفحات

Share

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله

أهلا وسهلا بكم في درس جديد وفريد:okay:، بعد أن عانيت طويلا من أجل وضع أرقام الصفحات أسفل مواضيع المدونة:takot:، تكلل عملي أخيرا بالنجاح، ولأني لست أناني

فلابد لي من طرح هذا الموضوع .


يمكنكم رؤية النتيجة في هذه الصورة :

[28-07-2009+21-55-55.jpg]

[....]




توجه إلى :

لوحة التحكم ==> التخطيط ==> عناصر الصفحة ==> إضافة أداة ==>HTML/Javascript

قم بإضافة الكود التالي :




<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=2;
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>




الآن ضعه تحت "رسائل المدونة الإلكترونية" مباشرة :


[(al-dream).png]


و أخيرا نتحدث عن التعديلات التي سنجريها :

1 - نبحث عن الكود التالي : var pageCount=2; الرقم (2) يمثل عدد المواضيع والرسائل التي ستظهر في كل صفحة .


2 - إذا أردت تغيير الكلمات "Next, First,last . . ." فستجدها هنا :




var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';





أما تغيير "Page ... of ..." فهنا :




1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+':;




عسى أن يكون الدرس أفادكم .




21 تعليقات:

• أنثى مَلآئكيِـﮧ • on 1 أغسطس، 2009 12:15 ص يقول...

وقسسسسسسم كنت ابحث عنه

تشكر خيو ....

ويعطيك الف عافيه

ملاحظه ::: من جد منت اناني ههههه

danger-boy on 1 أغسطس، 2009 12:32 ص يقول...

الحمد لله وجدتيه عندنا قبل اي مكان آخر

وشكرا على الثقة هــ هــ هــ هــ . . .

ري ري " كلي أمنيآت مجنونة " on 1 أغسطس، 2009 10:37 م يقول...

الله يجزآك خير ع الطريقة الحلوة و الشرح الاحلى ..

بذان الله رايحة اضيفها لمدونتي ..

و اذا واجهتني مشكلة .. الله يعينك عليا .. :P

لاحرمت الاجر اخويا .. ^^

danger-boy on 1 أغسطس، 2009 11:33 م يقول...

شكراا "ري ري" انشاء الله تتحقق أمانيك . . . هههههه

وانشاء الله أكون في الخدمة . . . في أي وقت .

ahmed on 2 أغسطس، 2009 5:45 م يقول...

يا اخى اتقو الله فما تنقلون يا اما تنقلو معلومه صحيحة او لا تنقلو

danger-boy on 2 أغسطس، 2009 7:00 م يقول...

يا أخ "أحمد" قدر نفسك، الاحرى بك أن تستفسر اذا حل بك مشكل او لم تعمل معك طريقة .

والله عز وجل أعطاك عينين لترى بهما (انت ترى الاضافة تعمل على مدونتي بكفاءة) فكيف تتكلم بالباطل .

ملاحظة : يمكنني حذف تعليقك بكل سهولة(لكن الساكت عن الحق شيطان أخرس).

أرجو أن لا تتكرر منك أخي أو من غيرك هذه العقلية .

the-peace-lion on 2 أغسطس، 2009 7:21 م يقول...

شكــــــــــــــــــــــــــــــــرا
عللى هذا الموضوع الرائع
و اخي احمد انا مع صاحب المدونة الحق انها تعمل بكفائة هنا
الرجاء التأكد من انه لا توجد اي مشكلة بمدونتك ثم اعلم صاحب المدونة ليحل لك المشكل
مع العلم انه من قبل حل لي مشكلة واجهت مدونتي وكدت افقدها
وشكرا

FnOo on 11 أغسطس، 2009 3:27 ص يقول...

لم تنجح الطريقه معي لاني كل منستخه لا اجده وعندما رايت الكود وجدته انه تغير الاقواس تاتي بعد الكلمه
و حاولت انسخه مره اخري ولاكن نفس المشكله وجهتني فما الحل ..

danger-boy on 11 أغسطس، 2009 9:20 ص يقول...

ممكن توضيح أكثر . . .لأعرف ما المشكلة .

FnOo on 12 أغسطس، 2009 3:03 ص يقول...

مثل هاذا:
.showpageArea a {

يصبح :

{showpageArea a.

danger-boy on 12 أغسطس، 2009 9:12 ص يقول...

اهلا بك ...

أعتقد أن هذا راجع لكون القالب غير معرب . . .

اما اذا كنت تملكين المتصفح عربي فكل ما عليك هو النسخ واللصق ولا تهتمي بشكل الكتابة،
أو شيء آخر.

لو ماكان هذا هو المشكل أو لم يكن الحل الشافي، أرجو أن توفري صورة .

يوسف on 14 أغسطس، 2009 12:52 ص يقول...

شكرا ياباشا الطريقه شغاله عشره علي عشره

danger-boy on 14 أغسطس، 2009 1:15 ص يقول...

الحمد لله .

{حَ}ـكَايَا on 13 سبتمبر، 2009 1:23 ص يقول...

السلام عليكم

نجحت الطريقه معاي لك فيه مشكله
الأرقام ماتطلع مرتبه

مدونة عبد العزيز on 13 سبتمبر، 2009 2:15 م يقول...

السلام عليكم

أخوي الغالي

أضفت الكود الي في الأعلى
ولا كن لم تضهر الأرقام على الصفحة

young on 11 نوفمبر، 2009 1:47 م يقول...

يعطيك الف عافية اخوي
بس اشتغل معاي الكود ادري ومتأكد ان الغلط مني لاني مبـتدأ

ولك تحياتي

المدمر 2010 on 5 يناير، 2010 5:20 م يقول...

سؤال بسيط ياغالى هل يمكن تقسيم المدونه
الى اقسام
مثال قسم لدروس وقسم للبرامج
واقدر احط دروس لوحده والبرامج لوحده
ولو ينفع ياريت تقولى على الطريقه وشكرا

sanahrawy on 11 فبراير، 2010 8:32 ص يقول...

اخي العزيز شكرا علي الشرح
بس انا حطيت الكود عندي في المدونة ومافيش حاجه ظهرت
ياريت تفيدني ايه السبب
منتظر ردك

aeroman on 22 أغسطس، 2010 6:40 م يقول...

جزاك الله خيرا اخي الكريم
كنت بحاجة الى هذه الاضافة

وضاح المخلافي on 19 مايو، 2011 11:03 ص يقول...

مشكور اخي كل الشكر والتقدير

منتديات افاق مغربية on 23 مايو، 2011 3:27 م يقول...

شكرااااااااااااااااا لك على هذه الاضافة الرائعة

إرسال تعليق

السلام عليكم ورحمة الله

شكرا أخي/أختي على الاهتمام

شرف لي أن تحتوي مدونتي على ردك

.
يرجى الانتظار ...
.
 

ضع ايميلك واحصل على جديدنا فيه :

من أنا

صورتي
بسم الله الرحمــن الرحيم السلام عليكم ورحمة الله تعالى وبركاته أما بعد : لقد بدأت هذه المدونة -على أمل أن تصل لمستوى جيد - ورغم أني لا أعرف ماذا أضع فيها أو كيف أبدأها، لكن يقال ''رحلة الـ 1000 ميل تبدأ بخطوة'' وهذا ما سأفعله -بإذن الله- حيث أدعو الله أن يوفقنا في أعمالنا . . . والله ولي التوفيق . اللهم أنصر اخواننا في غزة - وأهِن أعداءك أعداء الدين -يا رب العالمين-.
مدونة الحلم Copyright © 2009 Blogger Template Designed by Bie Blogger Template
أعلى الصفحة