NET POINT | الافضل لكم

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

معاينة ترقيم الصفحات

نتوجه الى المدونة >>> قالب >>> تحرير HTML .
نبحث عن باستعمال Ctrl+F عن

<b:includable id='mobile-index-post' var='post'>

نضيف الكود التالي فوقه الكود السابق

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

الآن نبحث من جديد عن الكود

<b:include name='nextprev'/>

ثم نستبدله بالكود التالي

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>
</b:if>

آخر مرحلة : نبحث عن الوسم ]]></b:skin>

نختار الشكل الدي نريده ثم نضيف الكود الخاص به فوق ]]></b:skin>

الشكل الأول

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #F8F8F8;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);
background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));
background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);
padding: 5px 10px;
border: 1px solid lightGrey;
font-weight: bold;
font-size: 12px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover, .pagenavi a:hover {
border-color: #C6C6C6;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}

الشكل الثاني

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
background-color: #3BB3E0;
padding: 5px 10px;
position: relative;
margin: 2px;
font-size: 12px;
text-decoration: none;
color: white;
border: solid 1px #186F8F;
background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );
-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#blog-pager a:hover, .pagenavi a:hover {
background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );
}

الشكل الثالث

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color:#fff;
margin: 2px;
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');
background-position: left;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:right;
}

الشكل الرابع

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color:#fff;
margin: 2px;
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg2.PNG');
background-position: bottom;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:top;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-position:top;
}

الشكل الخامس

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 15px;
}
.pagenavi .pages {
display: none;
}
#blog-pager a, .pagenavi span, .pagenavi a {
padding: 5px 10px;
text-decoration: none;
font-family: arial;
color: white;
margin: 2px;
background: black;
background-position: bottom;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px;
font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover {
background: orange;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background: orange;
}

ثم نضغط على حفظ .
لا تنسوا المساهمة في نشر الموضوع .

الموضوع : اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية .

عنوان التدوينة: اضافة ترقيم الصفحات على البلوجر بعدة أشكال إحترافية
تقييم : 10 من 10 مرتكز على 24 تقييم.
الكاتب / المدير NET POINT | الافضل لكم | اسامة عبد الرضا

عدد المشاهدات :

Osama Abid AL-Reda

اسامة عبد الرضا : من الجمهورية العراقية, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة NET POINT | الافضل لكم تعبر عما أهواه .

صندوق التدوينة

رابط مباشر :

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

HTML كود :

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

Osama Abid AL-Reda

صندوق التدوينة

قالب الهام التدوين

قالب عرب ويب الحالي قالب بداية .. نقطة

قالب Lycoris النسخة الثالة

قيد التطوير

قيد التطوير

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

Osama Abid AL-Reda

بضغطة زر تشارك الفائدة وتدعم المدونة

صندوق التدوينة

قالب الهام التدوين

قالب عرب ويب الحالي قالب بداية .. نقطة

قالب Lycoris النسخة الثالة

قيد التطوير

قيد التطوير