إضافة موضوع مقسم لثلاثة صفحات

إضافة موضوع مقسم لثلاثة صفحات

يوجد الآن مشاهدة التعليقات : 29

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

مر وقت طويل منذ أن قدمة إضافات تخص بلوجر، ودائما الجديد متوفر كما بهذه التدوينة تتمثل في إضافة مواضيع في تدوينة واحدة وذلك عبر تخصيص لكل موضوع صفحة هاته الإضافة نجدها ببعض قوالب الوردبريس تستعملها مواقع كبرى وذلك لأن موضوع واحد يكون به أكثر 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>
* المحتوى المحدد بالأصفر ضع به الموضوع
ربما تكن لدي فكرة أن تعدل على الكود بإضافة صفحة اخرى (الكود يقبل فقط ثلاث صفحات)، وأضنها كافية أي إستفسار فتعليقاتكم مرحب بها
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 29 تعليقًا:

  1. السلام عليكم

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

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

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

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

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

    ردحذف
  4. الٰهہٰكہٰر الہٰجہٰزائہٰري12/23/2014

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

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

    ردحذف
  5. Mohamed Don12/24/2014

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

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

    ردحذف
  7. هل لديك نفس التعليقات السابقة؟

    ردحذف
  8. الٰهہٰكہٰر الہٰجہٰزائہٰري12/24/2014

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

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

    التخصيص:

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

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

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

    حظاً موفق

    ردحذف
  10. الٰهہٰكہٰر الہٰجہٰزائہٰري12/24/2014

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

    ردحذف
  11. ahmedhegazy12/24/2014

    مبدع

    ردحذف
  12. abdallah Elashry12/24/2014

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

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

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

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

    ردحذف
  15. Marouan Adbib12/25/2014

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

    ردحذف
  16. الٰهہٰكہٰر الہٰجہٰزائہٰري12/25/2014

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

    ردحذف
  17. الٰهہٰكہٰر الہٰجہٰزائہٰري12/25/2014

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

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

    ردحذف
  19. Abdallha A Dagga12/26/2014

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

    http://copyright.sweup.com/

    ردحذف
  20. السلام عليكم

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

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

    ردحذف
  22. abdallah Elashry12/29/2014

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

    http://abdallahelashr7.blogspot.com/

    ردحذف
  23. السلام عليكم

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

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

    ردحذف
  24. ZiadMohi1/26/2015

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

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

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

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

      حذف
    2. الفكرة لن تصل

      حذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم