نجم البحر: اضافة ترقيم الصفحات لمدونة بلوجر بطريقة سهلة 5 اشكال

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

كما تعودنا دائما فى دروس اضافات بلوجر على تحسين شكل وامكانيات مدونة بلوجر وتعديلها الى افضل ما نحب اليوم معنا اضافة لا بد من وجودها بكل مدونة لاهميتها الكبيره وهى اضافة ترقيم الصفحات او ما يسمى Page Numbers وكما نعلم ان مدونة بلوجر بها اضافة مدمجة للصفحات وهى رسائل اقدم ورسائل احدث ويمكنك تركها كما هى ولكن ان احببت جعلها ارقام صفحات كالمعتاد بالموقع كما شرحنا مؤخرأ كيفية اضافة Meta Tag للمدونة لتحسين السيو والارشفة اليوم سوف نشرح تركيب اضافة ارقام الصفحات او Page Numbers بطريقة سهلة وبشكل بسيط وهى فعالة وتعمل على جميع القوالب

معنا 5 اشكل حتى تتناسق مع لون قالبك ومدونتك اختر ما يناسبك من ألوان الاضافة الخمس وقم بنسخ الكود والذهاب الى المسار التالى

لوحة تحكم مدونتك >> التخطيط >> اضافة اداة >> HTML/Javascript >>

ثم الصق الكود وقم بالحفظ وتحريك الاداة الى اسفل رسائل المدونة وقم بحفظ الترتيب والذهاب للمعاينة

ملحوظة :- رقم 3 فى جميع الاشكل هو رقم الصفحة المفتوحة ورقم 5 هو رقم المرور بالموس على الارقام

ترتيب الاشكال على حسب ترتيبهم بالصورة التى بالاعلى

الشكل الاول

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/*
http://sea-star-tarek.blogspot.com */
.showpageArea a {text-decoration:underline;color: #FDFDFD;}/* http://sea-star-tarek.blogspot.com */
.showpageNum a, .showpage a {color: #FDFDFD;text-decoration:none;border:1px solid #FDFDFD;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #030303; background: -moz-linear-gradient(top, #F70FF7 0%, #F70FF7 50%, #F70FF7 51%, #F70FF7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF001E), color-stop(50%,#FF001E), color-stop(51%,#FF001E), color-stop(100%,#FF001E)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/*
http://sea-star-tarek.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #24E6D3 0%, #24E6D3 50%, #24E6D3 51%, #24E6D3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1D70EC), color-stop(50%,#1D70EC), color-stop(51%,#1D70EC), color-stop(100%,#1D70EC)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*
http://sea-star-tarek.blogspot.com */
.showpagePoint {color: #030303;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #1809F2; background: -moz-linear-gradient(top, #1809F2 0%, #1809F2 50%, #1809F2 51%, #1809F2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A7B3C5), color-stop(50%,#A7B3C5), color-stop(51%,#A7B3C5), color-stop(100%,#A7B3C5)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFDFD', endColorstr='#FDFDFD',GradientType=0 ); }/* http://sea-star-tarek.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* http://sea-star-tarek.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#FDFDFD;}/* http://sea-star-tarek.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=9;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script>

الشكل الثانى

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/*
http://sea-star-tarek.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* http://sea-star-tarek.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, #F70FF7 0%, #F70FF7 50%, #F70FF7 51%, #F70FF7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#060606), color-stop(50%,#060606), color-stop(51%,#060606), color-stop(100%,#060606)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/*
http://sea-star-tarek.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #24E6D3 0%, #24E6D3 50%, #24E6D3 51%, #24E6D3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#16F670), color-stop(50%,#16F670), color-stop(51%,#16F670), color-stop(100%,#16F670)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*
http://sea-star-tarek.blogspot.com */
.showpagePoint {color: #FFFFFF;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #1809F2; background: -moz-linear-gradient(top, #1809F2 0%, #1809F2 50%, #1809F2 51%, #1809F2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3E3E3F), color-stop(50%,#3E3E3F), color-stop(51%,#3E3E3F), color-stop(100%,#3E3E3F)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* http://sea-star-tarek.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* http://sea-star-tarek.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* http://sea-star-tarek.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=9;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script>

الشكل الثالث

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/*
http://sea-star-tarek.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* http://sea-star-tarek.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, #F70FF7 0%, #F70FF7 50%, #F70FF7 51%, #F70FF7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F70FF7), color-stop(50%,#F70FF7), color-stop(51%,#F70FF7), color-stop(100%,#F70FF7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/*
http://sea-star-tarek.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #24E6D3 0%, #24E6D3 50%, #24E6D3 51%, #24E6D3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#24E6D3), color-stop(50%,#24E6D3), color-stop(51%,#24E6D3), color-stop(100%,#24E6D3)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*
http://sea-star-tarek.blogspot.com */
.showpagePoint {color: #000000;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #1809F2; background: -moz-linear-gradient(top, #1809F2 0%, #1809F2 50%, #1809F2 51%, #1809F2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#452C43), color-stop(50%,#452C43), color-stop(51%,#452C43), color-stop(100%,#452C43)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* http://sea-star-tarek.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* http://sea-star-tarek.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* http://sea-star-tarek.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=9;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script>

الشكل الرابع

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/*
http://sea-star-tarek.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* http://sea-star-tarek.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, #1809F2 0%, #1809F2 50%, #1809F2 51%, #1809F2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1809F2), color-stop(50%,#1809F2), color-stop(51%,#1809F2), color-stop(100%,#1809F2)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/*
http://sea-star-tarek.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%,#F90720), color-stop(50%,#F90720), color-stop(51%,#F90720), color-stop(100%,#F90720)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*
http://sea-star-tarek.blogspot.com */
.showpagePoint {color: #030303;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #1809F2; background: -moz-linear-gradient(top, #1809F2 0%, #1809F2 50%, #1809F2 51%, #1809F2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333E88), color-stop(50%,#333E88), color-stop(51%,#333E88), color-stop(100%,#333E88)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* http://sea-star-tarek.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* http://sea-star-tarek.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* http://sea-star-tarek.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=9;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script>

الشكل الخامس

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/*
http://sea-star-tarek.blogspot.com */
.showpageArea a {text-decoration:underline;color: #050505;}/* http://sea-star-tarek.blogspot.com */
.showpageNum a, .showpage a {color: #050505;text-decoration:none;border:1px solid #050505;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #050505; background: -moz-linear-gradient(top, #F70FF7 0%, #F70FF7 50%, #F70FF7 51%, #F70FF7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F7F3), color-stop(50%,#F4F7F3), color-stop(51%,#F4F7F3), color-stop(100%,#F4F7F3)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/*
http://sea-star-tarek.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #24E6D3 0%, #24E6D3 50%, #24E6D3 51%, #24E6D3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2FA05), color-stop(50%,#F2FA05), color-stop(51%,#F2FA05), color-stop(100%,#F2FA05)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*
http://sea-star-tarek.blogspot.com */
.showpagePoint {color: #0B163C;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #1809F2; background: -moz-linear-gradient(top, #1809F2 0%, #1809F2 50%, #1809F2 51%, #1809F2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#878991), color-stop(50%,#878991), color-stop(51%,#878991), color-stop(100%,#878991)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#050505', endColorstr='#050505',GradientType=0 ); }/* http://sea-star-tarek.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* http://sea-star-tarek.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#050505;}/* http://sea-star-tarek.blogspot.com */
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=9;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script>

يمكنك التعديل على الكود من خلال

var postperpage=7;

يمكنك تحديد عدد الموضيع بالصفحات من خلال تغيير رقم 7 الى ما يناسبك

var numshowpage=9;

يمكنك تغيير عدد ارقام الصفحات الموجود بالآضافة من خلال تغيير رقم 9 الى ما يناسبك

مع العلم عدد المواضيع فى الصفحة الرئيسية هى تحدد من المسار التالى

التخطيط > تحرير رسائل المدونة > عدد الرسائل على الصفحة الرئيسية <> وقم تحديد ما يناسبك

وكدة خلص درسنأ اتمنى يكون استفاد الجميع ولأى استفسار انا موجود

الخميس، 1 يناير، 2015 نجم البحر

الخميس، 1 يناير 2015

اضافة ترقيم الصفحات لمدونة بلوجر بطريقة سهلة 5 اشكال

ليست هناك تعليقات :

إرسال تعليق

إجمالي مرات مشاهدة الصفحة

المتواجدون الان

Universal Analytics