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

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

أقدم لكم اليوم طريقة عمل ترقيم للصفحات لمدونتك على بلوجر وهى تكون بدلا من "رسائل سابقة"، "رسائل أحدث"، "الصفحة الرئيسية". كما هو موضح فى الصورة المقبلة:

وأقدم لكم اليوم هذه الإضافة باللغة العربية بعد أن عربتها لتتناسب مع المدونات التى باللغة العربية ووضعت هذه الإضافة بعدة ألوان لتختار اللون الذى يناسب مدونتك كما وضعتها لكم بأشكال كثيرة لتتناسب مع ألوان مدونتك فأرجو أن تعجبكم هذه الإضافة.

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

الشكل الأول:

كود الشكل الأول:

الشكل الثانى:

كود الشكل الثانى:

الشكل الثالث:

كود الشكل الثالث:

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

كود الشكل الرابع:

الشكل الخامس:

كود الشكل الخامس:

الشكل السادس:

كود الشكل السادس:

الشكل السابع:

كود الشكل السابع:

الشكل الثامن :

كود الشكل الثامن:

الشكل التاسع:

كود الشكل التاسع:

الشكل العاشر:

كود الشكل العاشر:

الشكل الحادى عشر:

كود الشكل الحادى عشر:

الشكل الثانى عشر:

كود الشكل الثانى عشر:

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

كود الشكل الثالث عشر:

#blog-pager{padding:5px 0 !important;}

.showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */

.showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */

.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* 24work.blogspot.com */

.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*24work.blogspot.com */

.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */

.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */

.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */

</style>

var home_page="/";

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=7;

var upPageWord ='السابق التالى';

var downPageWord ='التالى';

</script>

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

كود الشكل الرابع عشر:

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

كود الشكل الخامس عشر:

ثانيا: نقل الكود لمدونتك:

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

ثم اختر التخطيط كما هو موضح فى هذه الصورة:

ثم إختر أداة وتكون من نوع Html/JavaScript كما هو موضح فى هذه الصورة:

والصق الكود الذى نسخته للشكل الذى يتناسب مع مدونتك.

وضع الأداة "Html/JavaScript" تحت "رسائل المدونة الإلكترونية" لتصبح على هذا الشكل:

وأرجو أن يكون الموضوع قد نال إعجابكم ولا تنسوا إخبارنا برأيك فى هذا الموضوع.

3 التعليقات:

غير معرف9 نوفمبر 2013 في 2:34 م
حلو يا حماده هجرب واتمنى انها تشتغل عندى
ردحذف
الردود
غير معرف9 نوفمبر 2013 في 2:35 م
ياعم شيل ام الاعلان بتاع ادسنس الى فى نص المدونة دههفضل اضغطلك على امه لغايط حسابك ميتقفل ايه القرف ده زهقتنى
ردحذف
الردود
غير معرف9 نوفمبر 2013 في 2:37 م
=p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~ =p~
ردحذف
الردود

إضافة تعليق

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

مقالات ذات صلة

3 التعليقات: