اضافة قائمة التبويتات المنسدله الرائعه لمدونات بلوجر - عالم المدون

الثلاثاء، 27 يونيو، 2017

اضافة قائمة التبويتات المنسدله الرائعه لمدونات بلوجر

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




معاينة اللإضافة وتحميل الأكواد الخاص بها


معاينة عدد المشاهدات :
تحميل عدد التحميلات :

شرح التركيب


  • اولا تركيب الإَضافة لمن سوف يتسخدمها فى أى مكان فى القالب غير الصفحات والمواضيع .
  • قم بالبحث عن هذا الوسم]]></b:skin>ثم ضع فوقه الكود التى فوقه


button.accordion{background-color:#eee;color:#444;cursor:pointer;padding:18px;width:100%;border:none;text-align:right;outline:none;font-size:16px;transition:0.4s;font-family:'Moussa-font'}
button.accordion.active,button.accordion:hover{background-color:#ddd}
button.accordion:after{content:'\002B';color:#777;font-weight:bold;float:left;margin-left:5px}
button.accordion.active:after{content:"\2212"}
div.panel{padding:0 18px;background-color:white;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out}

  • الأن قم بالبحث عن هذا الوسم</body>ثم وضع فوقه الكود التالى .

<script>
//<![CDATA[
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
//]]>
</script>
<link href='https://cdn.rawgit.com/assadalqaisi/qaisi1web/master/Mahdi-font.css' rel='stylesheet' type='text/css'/>

  • الأن كود الـ html والذى يمكنك وضع فى المكان الذى تريدها

<button class='accordion'>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ</button>
<div class='panel'>
  <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية&#1548; مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص</p>
</div>

<button class='accordion'>هذا القالب من تصميم عربي خالص لقد تم توليد هذا النص من مولد النص العربى</button>
<div class='panel'>
  <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية&#1548; مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص</p>
</div>

<button class='accordion'>لا يمكن الممكن لانه يمكن ان يكون ممكن فكن من الكون</button>
<div class='panel'>
  <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية&#1548; مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص</p>
</div>

  • الأن فى هذا الكود عليك تغيير الكلمات بما تريد
  • واذا تريد تكرار الصندوق لوضع واحد جديد عليك تكرار الكود الأحمر
  • وبعد ذلك تقوم بحفظ القالب ومبورك عليك

الأن تركيب الإضافة لمن سوف يضعها فى موضوع أو صفحة


  • ايضا سوف تقوم بوضع الكود الأول فوق الوسم هذا]]></b:skin>

button.accordion{background-color:#eee;color:#444;cursor:pointer;padding:18px;width:100%;border:none;text-align:right;outline:none;font-size:16px;transition:0.4s;font-family:'Moussa-font'}
button.accordion.active,button.accordion:hover{background-color:#ddd}
button.accordion:after{content:'\002B';color:#777;font-weight:bold;float:left;margin-left:5px}
button.accordion.active:after{content:"\2212"}
div.panel{padding:0 18px;background-color:white;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out}

  • الأن هذا الكود منفرد ضعه فوق هذا الوسم </body>

<link href='https://cdn.rawgit.com/assadalqaisi/qaisi1web/master/Mahdi-font.css' rel='stylesheet' type='text/css'/>

  • الأن أخر كود فى طريقة التركيب الثانية
  • والذى سوف تضعه كما فى الصورة عندما تكبت موضوع جديد فى وضع html


<button class='accordion'>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ</button>
<div class='panel'>
  <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية&#1548; مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص</p>
</div>

<button class='accordion'>هذا القالب من تصميم عربي خالص لقد تم توليد هذا النص من مولد النص العربى</button>
<div class='panel'>
  <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية&#1548; مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص</p>
</div>

<button class='accordion'>لا يمكن الممكن لانه يمكن ان يكون ممكن فكن من الكون</button>
<div class='panel'>
  <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق&#1548; إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد&#1548; النص لن يبدو مقسما ولا يحوي أخطاء لغوية&#1548; مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص</p>
</div>

<script>
//<![CDATA[
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
//]]>
</script>

  • الأن ايضا كما فى أول مرة غير الكلمات فى الكود بما تريد
  • وايضا اذا تريد تكرار ضندوق عليك تكرار الأكود الأحمر
  • الأن سوف تقوم بحفظ القالب ومبروك عليك الاضافة كامله

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله


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


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

42 تعليق على موضوع : اضافة قائمة التبويتات المنسدله الرائعه لمدونات بلوجر

اخى انا يصمم قالب بلوجر وكنت عايز اخى المشاركات تظهر على شكل شبكه زى موقعك بس مش لاقى اكواد ممكن الاكواد ارجوك ترد عليا

دى أكواد css بسيطه جدا أخى ولا تحتاج الى موضوع

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

لن أستطيع أخى الفاضل أرسلك لك الأكواد
لأن كما قلت لك هذا أكواد بسيط وعليك العمل عليها بنفسك
لان قوالب بلوجر تختلف عن بعضها

انا عايز السكربت اللى بيجعل المشاركات تظهر على شكل شبكه مثل ندونتك

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

أخى مش أنت تقصد المشاركات فى الصفحة الرئيسية

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

أنا أريده فى داخل المواضيع
ولقد قمت بتطبيق العمل بحذافيره
فى الخطوة الاولى والثانية وعلى مدونة تجريبية
بدون جدوى

الخطوة الأوله لن تعمل معك داخل المواضيع
الخطوة الثانية فقط هى التى سوف تعمل داخل المواضيع

وهذا معاينة من داخل المواضيع للأضافة
http://stones-1.blogspot.com/2014/02/blog-post_45.html
من قالب اخر

أخى الفاضل أنا لا أستخدم لها أى سكربت
أنا أستخدم فقط أكواد css

أخي لم ينجح معي عند الضغط على علامة +
تظهر لي علامة - فقط لا شئ يتحرك غيرهم
مع اني قمت بتطبيق شرحك كملا بدون نقصان
فى الخطوة الثانية مقسمة على ثلاث مراحل فقط
كود داخل Css وكود فوق /body
والكود الاخيره يوضع داخل صفحة المواضيع html

ممكن معاينة من مدونتك

http://www.mopanime.tk/2017/06/blog-post_29.html
هذا هو الرابط بعد تركيب الصندوق على الخطوة الثانية

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

أزال المؤلف هذا التعليق.

أى قالب تقصد أخى الفاضل

أزال أحد مشرفي المدونة هذا التعليق.

ولكن الرابط لا يعمل

أزال أحد مشرفي المدونة هذا التعليق.

السلام عليكم
هل نجح معك تركيب الصندوق على قالبي ام لا يا أخي

أسف لك ولكن نسخة القالب أنحذفة منى عندى
أرجو أرسال نسخة جديده عبر نموذج الأتصال
http://www.wdbloog.com/p/commentssidebar-wrapper.html

هل وصلتك رسالتي يا اخي
يبدوا ان نموذج الإتصال الخاص بكم
لم يظهر لي أنه تم إرسال الرسالة أم لا

لم تصلنى الرساله أخى

أزال أحد مشرفي المدونة هذا التعليق.

هل توجد مشاكل مع هذا القالب
يا اخي لأنه من تصميمي يبدوا اني
مبتدئ جدا هههههه أظن انك واجهة عوبة مع تركيب الصندوق

لا أخى الفاضل فقط أنا لم أبدا فى الى الأن بسبب عملى
خارج الأنترنت

هذه أخى معاينة من قالب مدونتك
https://health1-en.blogspot.com.eg/2014/04/blog-post.html
قمت بوضع الإضافة داخل موضوع وايضا قى الصفحة الرئيسية بدون اى مشكلة

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

أخي حقول الأكواد فارغة ما المشكلة

أخى الفاضل عليك فقط تحميل الأكواد من الرابط الخاص بها
وبعد ذلك تابع الشرح من الموضوع

؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

من ايام العيد وانا انتظر
تعديلك على الصندوق وبعدما اريتني
نتيجة عملك لم تعطيني القالب بعد تعديلك عليه
لهذا قلت فى نفسي يبدوا انك نسيت امري

لا أخى الفاضل أنت فقط لم تطلب منى أن أرسل لك القالب ذلك
أنتظرك أنت فقط
ضع ايميلك حتى أرسلته لك

أزال المؤلف هذا التعليق.

قمت بأرسال اليك القالب

أخى ممكن تعمل شروحات عن كيفية تصميم القوالب من الصفر إلى الإحتراف

يوجد اخى الكثير من الشروحات على الأنترنت

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر