23‏/12‏/2014

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

شرح طريقة التركيب
1. قم بتحرير الموضوع ثم إنتقل لتبويب HTML وضع الكود التالي به، أضفه في آخر الموضوع
<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">

هنا المحتوى الأول

</div>

<div class="content_2" style="display: none;">

هنا المحتوى الثاني

</div>

<div class="content_3" style="display: none;">

هنا المحتوى الثالث

</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
* المحتوى المحدد بالأصفر ضع به الموضوع
ربما تكن لدي فكرة أن تعدل على الكود بإضافة صفحة اخرى (الكود يقبل فقط ثلاث صفحات)، وأضنها كافية أي إستفسار فتعليقاتكم مرحب بها
مر وقت طويل منذ أن قدمة إضافات تخص بلوجر، ودائما الجديد متوفر كما بهذه التدوينة تتمثل في إضافة مواضيع في تدوينة واحدة وذلك عبر تخصيص لكل موضوع صفحة هاته الإضافة نجدها ببعض قوالب الوردبريس تستعملها مواقع كبرى وذلك لأن موضوع واحد يكون به أكثر 2000 كلمة لذا يتم تقسيمها لصفحات في نفس الموضوع وليس بالضرورة أن يكون الموضوع طويل لكي تستخدم الأداة يمكن إستعمالها في شروحات مقسمة في موضوع واحد بإضافة صور فيديوهات إلخ مما يوفر رؤية واضحة ومنسقة في نفس الوقت كل ما تبقى الأن هو مشاهدة المثال الحي ولكم حرية الإستخدام.

شرح طريقة التركيب
1. قم بتحرير الموضوع ثم إنتقل لتبويب HTML وضع الكود التالي به، أضفه في آخر الموضوع
<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">

هنا المحتوى الأول

</div>

<div class="content_2" style="display: none;">

هنا المحتوى الثاني

</div>

<div class="content_3" style="display: none;">

هنا المحتوى الثالث

</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
* المحتوى المحدد بالأصفر ضع به الموضوع
ربما تكن لدي فكرة أن تعدل على الكود بإضافة صفحة اخرى (الكود يقبل فقط ثلاث صفحات)، وأضنها كافية أي إستفسار فتعليقاتكم مرحب بها
29 Blogger تعليقات
Disqus
29 التعليقات
المشرف
avatar

السلام عليكم

قمت بتصميم هذا القالب http://desingbygeekwb.blogspot.com/

لكن عندى مشكلة تقدر تلاحظ ان بعض الخطوط تم ازالتها وهى محدده هنا http://im90.gulfup.com/NUpWCl.png

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

المشرف
avatar

ضع إسم نفس الخط المتبقي إبحث عن الخط GESSTwo وضع بدله GESSTwoLight
تفضل تدوينة تخص الخطوط:
http://www.ar1web.com/2014/08/blog-post_22.html

المشرف
avatar

شكرا لك اخ حسام المشكلة تم حلها والحمدلله http://desingbygeekwb.blogspot.com/

المشرف
avatar
الٰهہٰكہٰر الہٰجہٰزائہٰري 12/23/2014
delete

شكرا لك اخ حسام ، دائما مبدع ... شكرا جزيلا لك ^^

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

المشرف
avatar
Mohamed Don 12/24/2014
delete

https://github.com/ اخي حسام مافائدة هادا الموقع

المشرف
avatar

ذلك الموقع يخص المبرمجين الذين يطورون أدوات وإضافات Java-Jquery... بأنفسهم يشاركونها بالموقع، وأيضا يقدم خدمات مدفوعة

المشرف
avatar

هل لديك نفس التعليقات السابقة؟

المشرف
avatar
الٰهہٰكہٰر الہٰجہٰزائہٰري 12/24/2014
delete

لا ليس عندي مثل تعليقاتك ، اريد ان اركبها على اي قالب ، اريد ان اضيف كلمة ADMIN فقط لاي تعليقات

المشرف
avatar

كيفية الاضافة اتبع الشرح:
توجه إلى قالب
ثم إبحث عن الرمز
بعدها حمل الكود التالي وضعه فوقه
http://www.gulfup.com/?8GMId1

التخصيص:

لتغيير لون الإطار حول التعليق إستبدل: 110703

لتغيير لون الخلفية إستبدل : dbd9d9

لتغيير الصورة أسفل التعليق إستبدل :
https://lh6.googleusercontent.com/-NLrhytumG30/UmD14rhxgOI/AAAAAAAAH0k/ZQE_Yviy0a4/w65-h44-no/Admin-Badry.png

حظاً موفق

المشرف
avatar
الٰهہٰكہٰر الہٰجہٰزائہٰري 12/24/2014
delete

بارك الله فيك شكرا لك

المشرف
avatar
ahmedhegazy 12/24/2014
delete

مبدع

المشرف
avatar
abdallah Elashry 12/24/2014
delete

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

http://abdallahelashry.blogspot.com/2014/12/arabweb.html

المشرف
avatar

السلام عليكم
ممكن كود خاص بجعل القالب يعمل علي عدد محدد من المدونات فقط

المشرف
avatar

عليكم السلام لم أصادف مثل الكود الذي تطلبه، إذ وجدته سأطرحه

المشرف
avatar
Marouan Adbib 12/25/2014
delete

حساام ممكن أكوواد شااهد أيضا ممكن الله يخليك هته الجديدة

المشرف
avatar
الٰهہٰكہٰر الہٰجہٰزائہٰري 12/25/2014
delete

السلام عليكم اخي حسام ، طب ممكن سؤال آخر ؟
ممكن ملف PSD لهذه الخلفية التي كانت بمدونتك مسبقا http://im77.gulfup.com/ZWzJWk.jpg
ارجوا ارسال رابط تحميله لي عبر هذا الاميل :
hsrdted@yahoo.fr
وشكرا لك

المشرف
avatar
الٰهہٰكہٰر الہٰجہٰزائہٰري 12/25/2014
delete

السلام عليكم اخي حسام ، طب ممكن سؤال آخر ؟
ممكن ملف PSD لهذه الخلفية التي كانت بمدونتك مسبقا
http://im54.gulfup.com/2UMNTj.jpg
وشكرا لك

المشرف
avatar

ستجد كل ما مستعمل في ذلك الكوفر في هذا الموقع: freepik.com

المشرف
avatar
Abdallha A Dagga 12/26/2014
delete

هنا ستجد طلبك ولكن بشكل مدفوع

http://copyright.sweup.com/

المشرف
avatar

السلام عليكم

أخي كيف أضيف تعليقات disqus مع المحافظة على التعليقات السابقة

المشرف
avatar

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

المشرف
avatar
abdallah Elashry 12/29/2014
delete

مدونة رائعة زورها ولن تندموا

http://abdallahelashr7.blogspot.com/

المشرف
avatar

السلام عليكم

ممكن تقيملي المدونة والقالب

http://adnan-web.blogspot.com/

المشرف
avatar
ZiadMohi 1/26/2015
delete

جزاك الله كل خير أخي ولكن كيف أجعل التبويبات أعلي الصفحة وليس من أسفلها ؟

المشرف
avatar

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

المشرف
avatar

اذا عدلت على الكود واضفت 5 اقسام هل سيعمل الكود ؟؟
انا امتلك مجلة واجريت تغييرا اجرب فيه قسما رابعا ولا اعرف الخطا اين
عدلت على كود jQuery واضفت الكود الخاص بعمل الزر الرابع وجربت ...
ممكن مساعدة ؟؟

المشرف
avatar

عليك تكرار كل ما في كود الجيكوري بنفس الطريقة فقط تغير الرقم مثلا هناك الزر3 عليك بوضع 4 في المكرر وهكذا في البقية وكذلك في كود الستايل
أرجو أن تكون وصلتك الفكرة؟

المشرف
avatar

الفكرة لن تصل

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة