إشعار:

اهلا بكم في مدونة محترفي دعم بلوجر باللغة العربية والتي تهتم بالمبتدئين في بلوجر وصولا الى الاحترافية ...

الجمعة، 10 يناير 2014

إضافات بلوجر - إضافة ترقيم الصفحات لمدونات بلوجر بطريقة فعالة

بواسطة فريق الدعم في 8:24 ص تحت قسم

إضافة ترقيم الصفحات لمدونات بلوجر بطريقة فعالة

السلام عليكم و أهلا وسهلا بكم في موضوع جديد في مدونة محترفي دعم بلوجر باللغة العربية
تبدأ مدونتك بمواضيع قليلة ثم تكثر مع الوقت لتصبح صفحات متعددة فيصعب التنقل بينها
بخاصية رسائل أحدث – رسائل أقدم أليس الوضع كذلك في مدونات بلوجر لذلك الحل هو أن تضع ترقيم لتلك الصفحات لتتنقل بين الصفحات بسهولة دون انتظار ترتيب الصفحات ولكن هناك مشكلة بسيطة إن أغلب أكواد ترقيم الصفحات الموجودة لا تلبي الغرض لأنها يكون بها أخطاء صغيرة تجعل المواضيع بها مشاكل ، أما إضافة اليوم بإذن الله ليس بها أخطاء بل ويمكن التعديل علي لون الإضافة أيضا وشكلها بما يحلو لك


و الآن أتركك مع شرح كيفية إضافة ترقيم لصفحات مدونتك بسهولة و بالصور

أول خطوة : تدخل علي التخطيط ثم تحرير رسائل المدونة الالكترونية ثم تحدد عدد المواضيع التي تريد ظهورها في الصفحة الرئيسية





الخطوة الثانية : تدخل علي تحرير HTML ثم تبحث عن ذلك الكود

</body>

وتضع ذلك الكود فوقه مباشرة
<!--http://blogger-host.blogspot.com/Start-->&lt;script type=&#39;text/javascript&#39;&gt; var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=5; var numshowpage= var numshowpage=8;
var upPageWord =&#39; var upPageWord =&#39; var upPageWord =&#39;السابق&#39;;
var downPageWord =&#39; var downPageWord =&#39; var downPageWord =&#39;التالي&#39;;
&lt;/script&gt;
&lt;script src=&#39;https://cnmu.googlecode.com/svn/trunk/pagenavar.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt;
 &lt;/script&gt; &lt;script src=&#39;https://cnmu.googlecode.com/svn/trunk/pagenavar.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;/script&gt; &lt;script src=&#39;http://yourjavascript.com/9391481310/pagenavar-www-bloggerhost-blogspot-com.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt;<!--http://blogger-host.blogspot.com/End-->


الرقم 5 الذي باللون الأحمر هو عدد الرسائل أو المواضيع في الصفحة
يفضل أن تجعله نفس الرقم الذي حددته في التخطيط في أول الموضوع
أما الرقم 8 الذي باللون الأزرق هو عدد الصفحات الظاهرة في الإضافة حددها علي حسب عرض مدونتك 
أما كلمة السابق و التالي تستطيع تغييرهم إلي أي كلمة تشاء 

ثم أبحث عن الكود التالي 
 </b:skin>
 لتضع فوقه مباشرة هذا الكود

.showpageArea { color:#787D7E; margin: 10px 5px 3px 5px; padding: 0px; float: right; display: inline; font-size:13px; } .showpageArea a { margin: 10px 5px 3px 5px; padding: 0px; float: right; display: inline; font-size:13px; } .showpageArea a {background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpageNum {float:right;} .showpageNum a { font-size:13px; font-weight: bold;background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right; display: inline; float: right;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpageNum a:hover {background: #D1E0E5; background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5); background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5); text-decoration: none;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpagePoint { font-size:13px; font-weight: bold; background: #4A4A4A; padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color: #FFFFFF; display: inline; float: right;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpageOf { font-weight: bold;background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a { display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a {background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a:hover { display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a:hover {background: #D1E0E5; background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5); background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5); text-decoration: none; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px }/* -- number page navigation -- */ .showpageArea { color:#787D7E; margin: 10px 5px 3px 5px; padding: 0px; float: right; display: inline; font-size:13px; } .showpageArea a { margin: 10px 5px 3px 5px; padding: 0px; float: right; display: inline; font-size:13px; } .showpageArea a {background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpageNum {float:right;} .showpageNum a { font-size:13px; font-weight: bold;background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right; display: inline; float: right;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpageNum a:hover {background: #D1E0E5; background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5); background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5); text-decoration: none;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpagePoint { font-size:13px; font-weight: bold; background: #4A4A4A; padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color: #FFFFFF; display: inline; float: right;border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpageOf { font-weight: bold;background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a { display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a {background: #DAD8D9; background: -moz-linear-gradient(top, #F0F0F0 , #DAD8D9 ); background: -webkit-linear-gradient(top, #F0F0F0 ,#DAD8D9 ); padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration: none; color:#787D7E; display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a:hover { display: inline; float: right; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px } .showpage a:hover {background: #D1E0E5; background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5); background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5); text-decoration: none; border:1px solid #BEBEBE; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px }

 هذا الكود #787D7E يخص لون الخط في الإضافة ستجد الأكواد متكررة يجب تعديلها كلها

هذا الكود
 background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 ); 
هو لون خلفية الزر وهو تدرج يتكون من لونين الاول العلوي والثاني السفلي 

هذا الكود border:1px solid #BEBEBE; هو خاص بحجم ولون الإطار حول الأرقام
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);

هذا الكود هو تدرج آخر ولكنه الذي يظهر عند مرور الماوس
و border:1px solid #ccc; هو لون الإطار عند مرور الماوس

أما هذا الكود background: #4A4A4A; هو لون خلفية الصفحة التي تكون موجود بها
وهذا هو لون الخط color: #FFFFFF; 

أما الرقم radius:2px والمتكرر في كل الأكواد تقريبا هذا إن قمت بزيادته سيصبح الزر أكثر استدارة
لقد شرحت تقريبا أهم الأكواد التي يمكن التعديل عليها أو يمكنك إضافة الكود كما هو إن لم تستطيع تغيير الألوان
 أرجو أن أكون قد أفدت الجميع وتحياتي لكم و السلام عليكم و رحمة الله



تابعونا علي
أنشر هذا الموضوع

0 التعليقات :

إرسال تعليق

الاشتراك في: تعليقات الرسالة ( Atom )

جميع الحقوق محفوظة 2013 مدونة محترفي دعم بلوجر بالعربية . تصميم ، تعريب مختبر القوالب العربية