اضافة سؤال وجواب مثل قالب سكويز
اهلا بيكم يا شباب كما عودناكم على كل جديد فى الموقع فى هذه التدوينة سوف نطرح عليكم شيء نادر وهو اضافة سؤال وجواب مثل قالب سكويز الجميع يعرف قالب سكويز ولو لم تعرفة فهو قالب من افضل القوالب واجملهم فى الشكل والتصميم وفي القالب اضافة وهى سؤال وجواب وهى تقوم بطرح سؤال والاجابة تظهر عند النقر على السؤال ,وفي هذه المقالة سوف نطرح اضافة سؤال وجواب الاضافة لا تنحسر على بلوجر فقط بل استطيع وضعها فى اي موقع سواء ان كان بلوجر ووردبريس مواقع استاتيك او برمجة خاصة لان الاضافة تتكون من اكواد HTML و CSS فقط ندعكم مع الشرح .
شرح بالفيديو
معاينة
طريقة التركيب
الطريقة الاولة توجة الى التخطيط ثم ضف ادة HTML JAVA script ثم الصق الكود وغير ما يلزم
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<details class="shdowtech_details">
<summary>كم سعر القالب ؟</summary>
<div>
مدة الدعم الفني المجاني ستون يوماً من تاريخ شراء قالب سكويز، بعدها يكون الدعم الفني مدفوعاً، والدعم الفني لا يشمل تركيب القالب نظراً لوجود ملف شرح مصوّر كذلك فالدعم الفني لا يشمل برمجة إضافات جديدة .
</div>
</details>
<style>
summary::-webkit-details-marker { display: none; } summary::-ms-details-marker { display: none; } summary::-moz-details-marker { display: none; } summary::-o-details-marker { display: none; } summary::details-marker { display: none; } .shdowtech_details summary { border: 0; outline: 0; cursor: pointer; background: -webkit-gradient(linear, left, from(#d24949), to(#9e44c9)); background: linear-gradient(to left, #d24949, #9e44c9); padding: 10px 15px; color: #ffffff; font-weight: 900; border-radius: 5px; margin: 0 0 8px 0; } .shdowtech_details { border: 0; direction: rtl; outline: 0; color: #ffffff; } .shdowtech_details[open] div { border-radius: 5px; background-color: #eeeeee; color: #999999; padding: 20px; font-weight: 700; } .shdowtech_details:after { content: "\f078"; font-family: fontawesome; font-weight: normal; position: absolute; left: 21px; top: 16px; font-size: 20px; } .shdowtech_details[open]:after { content: "\f077"; }
</style>الطريقة الثانية للمحترفين.
توجة الى المظهر ثم تحرير HTML ثم قم بالبحث عن /headوالصق الكود فوقة .
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>توجة الى المظهر ثم تحرير HTML ثم قم بالبحث عن /b:skinوالصق الكود فوقة .
summary::-webkit-details-marker { display: none; } summary::-ms-details-marker { display: none; } summary::-moz-details-marker { display: none; } summary::-o-details-marker { display: none; } summary::details-marker { display: none; } .shdowtech_details summary { border: 0; outline: 0; cursor: pointer; background: -webkit-gradient(linear, left, from(#d24949), to(#9e44c9)); background: linear-gradient(to left, #d24949, #9e44c9); padding: 10px 15px; color: #ffffff; font-weight: 900; border-radius: 5px; margin: 0 0 8px 0; } .shdowtech_details { border: 0; direction: rtl; outline: 0; color: #ffffff; } .shdowtech_details[open] div { border-radius: 5px; background-color: #eeeeee; color: #999999; padding: 20px; font-weight: 700; } .shdowtech_details:after { content: "\f078"; font-family: fontawesome; font-weight: normal; position: absolute; left: 21px; top: 16px; font-size: 20px; } .shdowtech_details[open]:after { content: "\f077"; }والان فى المكان الذي تريد اضاف الاداة فية ضع الكود.
<details class="shdowtech_details">
<summary>كم سعر القالب ؟</summary>
<div>
مدة الدعم الفني المجاني ستون يوماً من تاريخ شراء قالب سكويز، بعدها يكون الدعم الفني مدفوعاً، والدعم الفني لا يشمل تركيب القالب نظراً لوجود ملف شرح مصوّر كذلك فالدعم الفني لا يشمل برمجة إضافات جديدة .
</div>
</details>
تعليقات
إرسال تعليق