مدون جديد
تاريخ التسجيل: Feb 2014
المشاركات: 7
إضافة ترقيم الصفحات لمدونات بلوجر بشكل لا مثيل له
إضافة ترقيم الصفحات لمدونات بلوجر بشكل احترافي فقط على خبراء التحميلات. إضافات بلوجر
السلام عليكم و رحمة من الله تعالى و بركاته إخواني أخواتي أسعد الله أيامكم الرمضانية بالصحة و العافية و طول العمر إن شاء الله و كما وعدتكم فأنا اليوم أحضر لكم أكبر أنواع ترقيم الصفحات الحصرية و التي لا مثيل لها بخاصية ال css إضافة احترافية لتزيد من مظهر مدونتك و هي سهلو التركيب كثيرا و بها محموعة
من التاثيرات عند المرور عليها بالماوس هته الإضافة سوف أضعها اليوم بين أيديكم زوار مدونتنا محانا و لكن أرحوكم كلمة تعليق و شكر تكفيني إدن على بركة الله.
نتوجه الى المدونة >>> قالب >>> تحرير 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:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
آخر مرحلة : نبحث عن الوسم ]]></b:skin> نختار الشكل الدي نريده ثم نضيف الكود الخاص به فوق ]]></b:skin>
الشكل الأول
#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) ); }
الشكل 2 #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; }
الشكل 3 #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(Gradien tType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f 8f8); 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(Gradien tType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeee eee); 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); }
الشكل 4
#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; }
__________________
من مواضيع imad el bouch
07-09-2014, 05:35 PM
إضافة ترقيم الصفحات لمدونات بلوجر بشكل لا مثيل له
المواضيع المتشابهه
العرض الشجري
