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