السلام عليكم ورحمة الله وبركاته, كل مطور أو مبرمج لا بد أ يكون قد سمع بموقع codepen الشهيرة وما الخدمات المميزة التي يقدمها ومن بين هذه الخدمات نجد صندوق المعاينة بحيث تستطيع عمل معاينة لمشروع بلغة CSS, JS, HTML إضافة إلى Sass و Less داخل مواضيعط, هذا الصندوق سينفعك كثيرا بحيث لن يكون هناك داع إلى أن يغادر الزوار موقعك من أجل معاينة مشروع ما, بل بإمكانهم فعل ذلك مباشرة من موقعك, وفي هذا الدرس سأشرح لكم بالتفصيل الممل بالصور طلريقة إضافته في تدويناتكم.
مثال لصندوق المعاينة
1- يجب عليك التسجيل في موقع codepen بحيث تدخل إلى الرابط التالي :مثال لصندوق المعاينة
طريقة الإستخدام :
ثم تضغط على Sign Up كما في الصورة
2- الأن ستظهر لك هذه الصفحة التي تحتوي على أنواع الحسابات التي يمكن انشائها وطبعا أغلبها مدفوع نحن سنختار المجاني فقط وذلك بالذهاب إلى Free Plan ثم لبضغط على Sign Up
3- الأن ستحصل على صفحة التسجيل قم بملئ الخانات كما في الصورة ثم اضغط على Sign Up تهانينا! هكذا تكون قد تسجلت في الموقع لا تنسى تفعيل حسابك عبر الرسالة التي ستصلك في الإيميل
4- الأن بعد أن أكملت كل خطوات التسجيل ما عليك سوى الدخول للموقع ثم قم بتمرير الفأرة على أيقونة البروفايل وستظهر لك قائمة قم بالضغط على New Pen من أجل إضافة مشروع جديد
5- الأن بعد إضافة الأكواد التي تريد ما عليك سوى الضغط على Save من أجل حفظ المشروع
6- بعد حفظ المشروع ستظهر عندك الصفحة التالية ثم اذهب للأسفل واضغط على Embed
7- ستظهر عندك هذه النافذة اضغط على iframe وقم بنسخ الكود الذي في الإطار وضعه في المكان الذي تريد داخل التدوينة بحيث يجب عليك التحويل من تأليف إلى HTML قبل اضافته, بالنسبة لأصحاب الووردبريس هناك كود خاص بكم.
إذن هكذا ننهي درسنا لهذا اليوم والذي كان حول كيفية إضافة صندوق المعاينة من codepen داخل تدويناكم
ليست هناك تعليقات:
إرسال تعليق