
احدى الإضافات المميزة لمدونات بلوجر وهي اضافة خيارات التنقل مع العناوين وهي تعطي لمحة للزائر عن الموضوع التالي او السابق بدلا من ان يضغط دون ان يعرف الى اين يتوجه وبإذن الله سنعرض ايضاً طريقة تنسيقها لتتماشى مع الوان مدونتك فقط تابع معي طريقة التركيب والتنسيق جيداً ولكن قد يتبادر سؤال مع بداية القراءة هل هذه الإضافة تستبدل اضافة بلوجر الأساسية للتنقل ام هي اضافة مستقلة ؟ والجواب هي اضافة مستقله لكن ايضاً سيكون بالموضوع طريقة ازالة الإضافة الأساسية من المواضيع لمن لا يرغب بوجود الإثنين معاً لكن اولاً يمكنك معاينة الإضافة عبر الرابط التالي
والآن مع طريقة التركيب
أول شئ أضف الكود التالي فوق الوسم </head>
والكود عبارة عن سطرين الأول يخص مكتبة jquery فإن كنت اضفت المكتبة فلا تضيف السطر الأول
والثاني يخص خط droid arabic kufi فإن كان لديك الخط لا تضيف السطر الثاني
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
وطبعا لو كان لديك الإثنين لا تضيف الكود
والآن اضف الكود التالي بعد <data:post.body/>
مع ملاحظة ان <data:post.body/> يتكرر اكثر من مرة في القالب لذا يجب ان تجد المناسب منهم وذلك بالتجربة على كل واحد مرة حتى تجد المضبوط فلا تنسى أخذ نسخة احتياطية من قالبك
<b:if cond='data:blog.pageType == "item"'>
<ul class='cnmu-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>أحدث موضوع</strong> <span>انت تشاهد آحدث موضوع</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>أقدم موضوع</strong> <span>أنت تشاهد آخر موضوع</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>التالي</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>السابق</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
</script>
</b:if>
يمكنك تغيير الكلمات العربية بالكود بما يتناسب معك
والان مرحلة التنسيق
أضف الكود التالي فوق الوسم/*Cnmu.blogspot.com-pager*/
.cnmu-pager {
font: bold 14px droid arabic kufi;
border-bottom: 2px dashed #777;
border-top: 2px dashed #777;
float: right;
margin-bottom: 20px;
padding: 0;
width: 500px;
}
.cnmu-pager li {
float: right;
list-style: none outside none;
text-align: center;
transition: all 0.7s ease 0s;
width: 33%;
}
.cnmu-pager li:hover {
background:#5A5A5A;
}
.cnmu-pager li a {
display: block;
min-height: 90px;
padding: 5px 0;
position: relative;
width: 100%;
text-decoration: none;
}
.cnmu-pager li a:hover {
color:#fff;
}
.cnmu-pager li.next {
border-left:1px solid #777 !important;
width:49%;
}
.cnmu-pager li.previous {
width:49%;
}
.cnmu-pager strong {
color: #ccc;
display: block;
font-size: 20px;
margin-bottom: 8px;
}
.cnmu-pager span {
font: bold 15px serif;
}
.cnmu-pager li.next i,.cnmu-pager li.previous i{
color: #CCCCCC;
font: 45px tahoma;
margin-top: 25px;
}
.cnmu-pager li.next i {float: right;}
.cnmu-pager li.previous i {float: left;}
.fa-chevron-right:before {content:"\2039";}
.fa-chevron-left:before {content: "\203A";}
هذا #777 هو لون الإطارات عدله باللون المناسب
قم بزيادة او انقاص الرقم 500 بحسب عرض الموضوع في قالبك
هذا #5A5A5A هو اللون عند تمرير الماوس
هذا #ccc هو لون كلمة السابق والتالي
وهذه هي الجزئية الأخيرة
وهي ما تحدثنا عنه في البداية وهي اخفاء خيارات التنقل الأساسية في بلوجر من داخل المواضيعابحث عن هذا الكود
وفوقه اضف
<b:if cond='data:blog.pageType != "item"'>ثم ابحث بعده قليلاً
وتحته اضف
</b:if>وهذه صورة توضيحية للكود باكمله الذي سنضيف فوق وتحته الكودين السابقين

وبالتوفيق في عملية التركيب
دمتم في امان الله
مشكوور على الاضافة الجميلة
ردحذفسعدت بمرورك اخي الحبيب محمد
حذفتحياتي لك يا طيب
السلام عليكم ورحمة الله وبركاته
ردحذفماشاء الله عليك أخي الغالي عمرو
إضافة جديدة وجميلة أشكرك على طرحها
ولدي سؤال هل تسبب هذه الإضافة ثقل للصفحة ؟
وجزاك الله كل خير دمت في رعاية الله وحفظه
وعليكم السلام ورحمة الله وبركاته
حذفحياك الله أخي بدر
بالنسبة لسؤالك لا يا طيب هي لا تسبب ثقل والكلام بيني وبين الأخ Jetara
حول الخط فهو ينصح بان يكون الخط من الخطوط العادية وانا اضفت خط كوفي للإضافة كما بالشرح
وفي حالة مدونتك لن تسبب اى ثقل فأنت طبيعي تستخدم خط الكوفي
وحتى لمن لا يستخدمه الثقل لا يذكر يا طيب
وشكراً لمرورك الكريم
السلام عليكم ورحمة الله وبركاتهُ
ردحذف---------------------------------
أخي كان ودي أسألك عن هذا الخط: droidarabicnaskh هل هو متوفر على الويب
وعليكم السلام ورحمة الله وبركاته
حذفنعم اخي محمد الخط متوفر وتم اضافته للخطوط في هذا الموضوع
http://cnmu.blogspot.com/2013/03/blog-post_14.html
السلام عليكم ورحمة الله وبركاته
ردحذفكيفك أخي الغالي عمرو
واجهتني مشكلتين بعد تركيب الإضافة أنظر الصورة للتوضيح
http://im64.gulfup.com/SPPO5.jpg
وعليكم السلام ورحمة الله وبركاته
حذفهذه بسبب القالب يا طيب يبدو ان مطور القالب كان معطي مظهر معين للستايل عموما يمكنك عمل التالي
ابحث عن كود كهذا
.post-body ul li {
list-style: disc outside url("http://4.bp.blogspot.com/_V-IXTBBt1Bg/S2ti9tpIaEI/AAAAAAAABek/VKA0f5f0GTU/s1600/bullet.png");
}
عليك بتحديه واستبداله بهذا
.post-body ul li {
list-style: none outside none;
}
اما بالنسبة للصفر لا أستطيع تحديد مكانه بالضبط ربما يكون خطأ في القالب او الكتابة جرب نسخ الكود مرة ثانية او ابحث في المنطقة التي تضيف بها الكود عن صفر
بارك الله فيك أخي العزيز
حذفتم حل مشكلة الأيقونة الحمد لله وبقيت مشكلة الصفر
وبحثت في القالب كما أشرت لكن لم أجد
يبدو أنه خطأ في القالب والله المستعان
جزيل الشكر لك أخي الغالي عمرو وجزاك الله كل خير
بارك الله لك ومدونة رائعة جدا
ردحذفوفيك بارك الله
حذفوشاكر لمرورك العطر
السلام عليكم
ردحذفدائما رائع فى عرضك للموضوعات
حضرتك ذكرت
اخفاء خيارات التنقل الأساسية في بلوجر من داخل المواضيع
هل حضرتك تقصد
رسائل احدث الرئيسية رسائل اقدم
لاني عاوزه اشلها من المدونه سواء فى الصفحة الرئيسة او المشاركات
وعليكم السلام ورحمة الله وبركاته
حذفأشكرك اختي الفاضله هذا من ذوقك الكريم
نعم هذا ما اقصده تماما لكن ملحوظة ان ازلتيها ولم تضيفي بديل لها سيكون صعب على الزوار التنقل من موضوع لآخر
وفي هذا الموضوع البديل هي الخيارات بعناوين المواضيع
طب لو حضرتك طبفت الاكواد المشروحة جزئية
حذفسوف تزال ......رسائل احدث......الرئيسية.....رسائل اقدم
لانى طبقتها ولم تزال ....لاننى اريد ان احدد للزائر الموضوعات التى سوف يزورها
ولو ممكن فى طريقة للتحكم فى نوعية وليس الكم المشاركات فى الصفحة الرئيسية
مدونتى
http://doxsonengland.blogspot.com/
وشكراااا
لو اردتي ازالة رسائل اقدم رسائل احدث من المدونة الطريقة المتبعة تزيلها من المواضيع فقط
حذفلو اردتي ازالتها من كل اجزاء المدونة اسهل طريقة هي اضافة الكود التالي فوق الوسم ]]>
#blog-pager {display:none;}
اما نوعية المواضيع في الصفحة لارئيسية هذا يتطلب تعديل كامل على القالب او تغييره بقالب يحتوي امكانية جلب مواضيع من اقسام مختلفة لكن عموماً يمكنك استخدام سلايد شو ووضع المواضيع التي تريدنها به وسيظهر في الصفحة الرئيسية
وهذه مواضيع تخص السلايد شو
http://cnmu.blogspot.com/2013/04/Image-Slider-Blogger-Widget.html
http://cnmu.blogspot.com/2013/04/cnmu-Slider.html
لقد قمت بتطبيقها ولم يتم ازالتها ربما عيب فى التطبيق
حذفhttp://testd12345.blogspot.com/2014/04/blog-post_10.html
وهذه مدونتى
http://doxsonengland.blogspot.com/
جربي هذا الكود مرة اخرى اختي الفاضلة فوق الوسم ]]></b:skin>
حذف#blog-pager {display: none !important;}
ملحوظة لا تكتبيه ولكن انسخيه
بعتذر عن كثرت الاسئلة ولكن لم اجد الكود بالقالب
حذفيجب ان يكون الكود بالقالب فهو من الأساسيات جربي البحث عنه ستجدينه في البداية بعد توسعة عناصر الستايل هذا هو
حذف]]></b:skin>
وانت اضفتي تحته اكواد سابقاً في اسئلتك حول القائمة بعد ايجاده ضيفي فوقه هذا الكود
#blog-pager {display: none !important;}
انا جربت هذة الطريقة واشتغلت 100% جربي هذا الكود مرة اخرى اختي الفاضلة فوق الوسم ]]>
حذف#blog-pager {display: none !important;}
ملحوظة لا تكتبيه ولكن انسخيه
السلام عليكم
ردحذفلقد قمت باضافة الكود ولم يحدث شئ للاسف
وعليكم السلام ورحمة الله وبركاته
حذفالمفترض ان هذا الكود يقوم بعمل اللازم تماما فإما خطأ في التركيب او ان القالب به مشكلة
قمت بازالة الكود واضافته مره اخرى ولم يحدث شئ
حذفوحدث خطا بالمدونة ارجو مساعدتى فى حلها
http://testd12345.blogspot.com/2014/04/blog-post_11.html
وهذه مدونتى
http://doxsonengland.blogspot.com/
اختي الفاضلة في مدونتك الآن لم تعد السابق والتالي ظاهرة ولا ارى خطأ ظاهري اظن ان المشكلة اتحلت اليس كذلك ؟
حذفنعم لقد اتحلت الحمد لله ....شكرا لك
حذفشكرا اخي لكن هناك مشكلة بزر التالي لا يعمل يعني عند الضغط على التالي لا يتحرك ابدا ممكن الحل
ردحذفزر التالي لا يعمل إن لم يكن هناك موضوع تالي وتكون تتصفح آخر المواضيع غير ذلك يعمل طبيعي
حذفلا اخي يوجد مواضيع وليس موضوع فقط لكن للاسف لم يعمل يكتب عنوان الموضوع ولا يتحرك :) =r
حذفربما يكون هناك كود لديك او اضافة أخرى تتعارض مع هذه الإضافة وتسبب المشكلة عموما اضف رابط المدونة للإطلاع
حذفاخى عمرو انا عندى بيظهر السابق والتالى ولاكن لايظهر تحتهم عنوان الموضوع
ردحذفجرب التالي أخي احمد في الكود رقم 2 استبدل هذا الجزء
حذف.post h3.post-title
بهذا
.post h1
أو هذا
.post h1.post-title
أيهم يضبط معك ملحوظة ستجده متكرر فغيره في المرتين
مشكور أخي :)
ردحذفالمهووس العربي
أهلا بك اخي تشرفت بمرورك
حذفأخي أنا أضفتها ولكن تواجهني مشكلة وهي ظهور رسالة أقدم أسفل الإضافة للمعاينة
ردحذفhttp://ndb2.blogspot.com/2014/07/alexa.html
أضف هذا الكود أخي فوق الوسم ]]></b:skin>
حذف#nav-above, #nav-below {
display: none !important;
}
شكرا جزيلا أخي الكريم
حذفممكن طريقة إضإفة الرئيسية كما في مدونتك الرائعة
معذرة يا طيب غير ممكن شرح اضافة الرئيسية لانها تحتاج ستايل مختلف ولا يمكن طرح أكثر من شرح لنفس الموضوع
حذفسلام علبكم اخي شكرا على مجهوداتك لاكن انا لدي مشكلة انا اغلب اكوادك لا تظهر لي عند البحث وهناك اكواد لا اعرف اين اضعها لاكن دروسك معظمعها نجحت معي شكرا لك و هده الدرس لم اجد هده الكود في html ارجوو رد g=
ردحذفوعليكم السلام ورحمة الله وبركاته
حذفحياك الله اخي الكريم أى كود بالضبط لم تجده يا طيب يرجى التوضيح
ممكن حل لهذة المشكلة السابق والتالى بيجوا تحت بعض http://cdn.top4top.net/i_86b2e7bc6b1.png
ردحذفجرب التالي اخي احمد ابحث عن هذا الكود
حذفwidth:49%;
ستجده مكرر قم بتخفيض 49 الى 40 ان لم ينجح أضف رابط المدونة التي عليها القالب للإطلاع
شكرا جزيلا تم الصلاح
حذف