شرح قالب بيج ماج
بيج ماج - قالب بلوجر متعدد الإستعمالات
- تم إنشاء الشرح: 09/24/2019
- اخر تحديث للشرح: 7/31/2024
- بواسطة: Osama Orabi
مقدمة
بيج ماج هو قالب بلوجر متجاوب ، جريدة ، مجلة ، أخبار ومدونة. قادم مع الخيارات التي تسمح لك لتخصيص موقع الويب الخاص بك تماما لاحتياجاتك مع أكثر من 10 قوالب في قالب واحد.
مميزات القالب الرئيسية:
- لوحة تحكم قوية وضخمة حيث تغنيك عن التعامل مع الأكواد نهائياً
- إمكانية استخدام جميع الإضافات لإظهاراها بأحدث المقالات / مقالات عشوائية / مقالات بالتصنيف
- زر الوضع المظلم يمكنك تفعيله من التخطيط مع إمكانية تغيير الشعار عند التحويل
- أشكال مختلفة ومتعددة للصفحة الرئيسية
- عدد لا نهائي من الأشكال يمكنك تخصيص موقعك إلي شكل تريده
- متوافق مع المعايير القياسية للـSEO
- دعم جميع خطوط جوجل مع إمكانية تغيير الخط من التخطيط
- دعم مصمم النماذج مع عدد لا نهائي من الألوان والخطوط والخلفيات
- يدعم LTR و RTL مع نسخة إنجليزية كاملة
- متوافق مع جميع الشاشات والهواتف والتابلت
- إضافة lazyload لتسريع القالب و ظهور الصور بعد تحميل الموقع
- يدعم الأكواد القصيرة والمختصرة
- تحويل أي رابط صورة أو فيديوا في التعليقات إلي صورة حقيقية و فيديوا حقيقي
- قائمة ثابتة و سايد بار ثابت في الصعود والنزول يمكنك تعطيلهما من التخطيط
- قائمة مرنة يمكنك تحريكها من اليمين إلي الوسط
- هيدر مرن يمكنك تحريكه من اليمين إلي الوسط
- الوضع الغامق يمكنك تفعيله من التخطيط فقط
- ثلاث أشكال مختلفة للتدوينات الرئيسي و الشبكة و الفردي
- قائمة فرعية فرعية (درجتين)
- قائمة ميجا منيو بتقنية أجاكس: تحميل عدد لا نهائي من التدوينات
- إضافة أيقونات في القائمة الرئيسية
- قائمة هاتف متوفرة بخصائص مميزة
- ادوات للمقالات: جدول محتويات المقال / حجم الخط / صندوق الكاتب / التالي والسابق/ مقالات ذات صلة أسفل المقالات / أزرار مشاركة المقال
- نظام إعلانات متكامل
- أداة صفحة إعادة توجيه الروابط: توجيه الروابط الخارجيه إلي صفحة مخصصة يمكنك إضافة فيها إعلاناتك
- خاصية منع النسخ
- نوعيين من صفحات التحميل (Preloader)
- تصميمات مخصصة لأرشيف الصفحات: اختر أي تصميم لصفحات التصنيف / البحث / الأرشيف كما تريد باستخدام أزرار التنقل الاحترافية
- تبسيط ملف الشرح مع إمكانية توليد أكواد الإضافات
تثبيت القالب و تفعيل وضع الجوال
أولًا - نقوم بأخذ نسخة إحتياطية من القالب الحالي في المدونة بالضغط على زر تخصيص مثل الصورة التالية:
ثم الضغط علي الاحتفاظ بنسخة احتياطية مثل الصورة التالية:
ثانياًَ - تثبيت القالب:
إذهب للوحة تحكم بلوجر ثم إختر المظهر ثم اضغط علي الثلاث نقط سوف تظهر لك نافذة منبثقة اضغط علي تعديل HTML مثل الصور التالية:
قم بتحديد جميع الاكواد وقم بحذفها ثم قم بفتح قالب التنظيف (Clean Template) وقم بنسخ جميع الأكواد ثم قم بلصقها في بلوجر ثم إضغط علي أيقونة حفظ المظهر مثل الصورة التالية:
الان إرجع للمظهر ثم اضغط علي الثلاث نقط مرة آخري ثم قم بالضغط علي استعادة سوف تظهر لك نافذة منبثقة إختر منها تحميل ثم إختر ملف القالب BigMag-Blogger-Template.xml من علي حاسوبك الآن إنتظر إلي أن يتم تحميل القالب.
مبروك عليك تم الرفع بنجاح.
تحديث القالب
هام: قبل تحديث القالب
عند تحديث القالب لا تقم بإضافة قالب التنظيف طبق الخطوات السابقة بدون وضع قالب التنظيف لتظل تعديلات كما هي ولا تخسر شئ سوي أشياء بسيطة جداً وهم:
- إعدادات القالب التي تعمل بـ true و false
- الألوان
- الأكواد التي تضعها بعد وسم <head>
- الشعار
الأشياء التي لن تفقدها
- جيع الإضافات مثل السلايدر وما شابه
- جميع القوائم
- جميع أيقونات التواصل الاجتماعي
- جميع إضافات بلوجر الداخلية
كيفية تحديث القالب:
قم بالذهاب إلي المظهر ثم الضغط علي السهم بجانب تخصيص ثم أختر إستعادة وأختر ملف القالب سواء كانت العربية أو الإنجليزية
مثل الصور التالية:
تفعيل وضع الجوال
إذهب للوحة تحكم بلوجر ثم إختر المظهر ثم إضغط علي السهم ثم اضغط علي إعدادات الجوال كما هو موضح في الصورة التالية:
ثم سوف تظهر لك نافذة منبثقة إختر التالي : سطح المكتب. مثل الصورة التالية:
تفعيل القالب
تحتاج رقم الإيصال لتفعيل القالب طريقة الحصول علي رقم الإيصال وهي راسلني من خلال نموذج صفحة إتصل بنا
عند استلامك رقم الإيصال والذي علي هذا الشكل:
12312654545566
1- أدخل لهذا الرابط:
https://bigmag-template.blogspot.com/p/request.html
سوف تجد النموذج علي هذا الشكل:
إملأ البيانات التالية:
الإسم الكريم - البريد الإلكتروني - رقم الإيصال (سبق وحصلت عليه)
بغد الضغط علي زر إرسال سوف تنتقل للصفحة التالية
أذهب لتبويب تفعيل
أضف رابط مدونتك في خانة رابط المجال
ثم أضغط علي زر تحديث
الآن تم تفعيل قالبك بنجاح
الآن تيقي كيفية تعديل رابط مدونتك إذا أحببت تغيير رابط مدونتك أو إضافة رابط جديد
أدخل لنموذج التفعيل من خلال هذا الرابط:
https://bigmag-template.blogspot.com/p/request.html?type=domain
أضف بريدك الإلكتروني الذي سجلت به سابقاً وأضف رقم الإيصال (إذا نسيت رقم الإيصال لا يوجد مشكلة انتظر الخطوة التالية)
إذا نسيت رقم الإيصال أدخل لنموذج التفعيل من هذا الرابط:
https://bigmag-template.blogspot.com/p/request.html?type=receipt
أضف بريدك الإلكتروني وسوف تتوصل برسالة فيها رقم إيصال الدفع الخاص بك لتتمكن من تغيير روابط أو تفعيل مدونة جديدة
لغة القالب:
القالب يدعم اللغتين العربية والإنجليزية في نفس النسخة
لتفعيل اللغة التي تريدها من لوحة تحكم بلوجر ثم الإعدادات ثم لغة المدونة ثم اختر اللغة التي تريدها مثل الصورة التالية:
إعدادات القالب
معلومات أساسية: اختر الإضافة المرغب في تشغيلها ثم اضغط علي تعديل ثم إضافة كلمة true لتفعيل الإضافة وعند تعطيلها إضافة كلمة false مثل ما هو موضح في الصورة التالية
- عرض الموقع
القيمة الافتراضية: 1200px
يمكنك زيادة الحجم أو تقليله
- شكل الصندوق:
- الشكل محاط
- قائمة ثابتة
- سايد بار ثابت
- القائمة شكل الصندوق
- الهيدر في الوسط
- القائمة في الوسط
- نوع المقالات شبكة
- نوع المقالات فردي
- الشكل الصغير
12- تأثير الصور
يوجد ثلاث تأثيرات:
- fade
- zoomin
- zoomout
بدل كتابة true أو false نكتب نوع من التأثيرات السايقة
- عدد المقالات في الصفحة: وهي عدد المقالات في صفحة الأرشيف العدد الإفتراضي 6
- قد يعجبك أيضاً
- عدد المقالات ذات صلة: وهي عدد المقالات ذات صلة أسفل التدوينة العدد الإفتراضي 3
- خلفية قسم السلايدر
- سلايدر الشبكة الملون
- تصميم دائري للمظهر
- اللوحة الجانبية
- إخفاء آخر المشاركات في الصفحة الرئيسية "التي في الصورة التالية"
- إخفاء الشريط الجانبي بداخل المقالات
- إخفاء الشريط الجانبي في الصفحة الرئيسية
- صفحة التحميل (1)
- صفحة التحميل (2)
- الوضع الغامق
- شريط التقدم
- صندوق محتويات المقال
- إطار العمل Lazyload
هو إطار عمل لتسريع القالب مثل ما موضح في الصورة الإضافات لا تظهر ولا يختفي إلا عند التمرير للأسفل بالماوس.
- إظهار التاريخ
- منع النسخ: وهي لمنع نسخ محتوي التدوينة و أي شئ بداخل الـBody
- نوع الخط
الخط الافتراضي Cairo لتغيير الخط توجه لموقع الخطوط https://fonts.google.com
ثم اختر أي خط يعجبك كما موضح في الصورة السابقة ثم أكتب الإسم فقط بالمشار عليه بالأحمر مثل الصورة التالية:
- زر الوضع المظلم
- شعار زر الوضع المظلم
لإضافة شعار الوضع المظلم الذي تريده أن يظهر عندما يتم الضغط علي زر الوضع المظلم تقوم بنسخ رابط الشعار وتقوم بإضافته في خيار شعار زر الوضع المظلم مثل الصورة التالية:
- Lazyload AdSense
تحذف الكود تبع أدسنس من الهيد وتضيف المعرف "الرقم" فقط الذي بجانب ca-pub
كود أدسنس يكون علي هذا الشكل:
https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4545742662666180
نضيف الرقم فقط المحدد باللون الأحمر مثل الصورة التالية:
تخصيص القالب
أكواد الميتا تاج:
شرح أكواد الميتا تاج:
- معرف (id) تطبيق الفيس بوك .
- معرف (id) حساب مدير التطبيق .
- رابط صفحة موقعك على الفيس بوك .
- رابط حساب المؤلف على الفيس بوك .
تغيير صورة "لا توجد صورة" التي تظهر عن مشاركة المدونة علي وسائل التواصل الإجتماعي
قم بالذهاب إلي المظهر ثم اضغط علي السهم ثم تعديل HTML كما في الصور التالية
ثم فم بالبحث بداخل الأكواد بواسطة Ctrl+F عن رابط هذه الصورة:
https://blogger.googleusercontent.com/img/a/AVvXsEj1zE8rxM-0A4aE79wQZOV9LW1EBnaqmYIRgQKygAIHpzA8hUqr2enfJB1IvZp0ifg__SsVtWrFLKVGxHgeSoxfSnbqNq4qAMv3AFqJLasnwhCKhOKpNMdvyjbPgR1xLsPfgHSlxHq9NyE88DG9lpWo6ymy74TamR9Zo0xJYHf_nYRPJlMdnm2lPRW2=s16000
سوف نقوم بتغيير أول رابط يظهر مثل الصورة التالية:
سوف نقوم بحذف الرابط بالكامل ووضع رابط الصورة التي تريدها أن تظهر مكانه
صندوق المؤلف:
تقم بالضغط علي إضافة عنصر جديد مثل الصورة التالية:
ثم تكتب في أضف في اسم الموقع الإلكتروني إسم موقع التواصل الإجتماعي و في عنوان URL للموقع الإلكتروني رابط موقع التواصل الإجتماعي
مثل الصورة التالية:
اسماء الأيقونات المتوفرة في القالب:
- rss
- youtube
- tiktok
- skype
- stumbleupon
- tumblr
- vine
- stack-overflow
- dribbble
- soundcloud
- behance
- delicious
- codepen
- vimeo
- wordpress
- dropbox
- slideshare
- vk
- yahoo
- hackernews
- yelp
- slack
- flickr
- foursquare
- steam
- paypal
- telegram
- quora
- odnoklassniki
- website
- mail (الرابط يكون علي هذا الشكل: mailto:example@gmail.com)
- panel-icon (أيقونة اللوحة الجانبية)
وصف المدون:
أكتب بداخل المحتوي وصف عنك أو عن مجال مدونتك
قسم الهيدر:
خبر عاجل
تكتب في العنوان خبر عاجل
وفي المحتوي الخبر المراد ظهوره
قم بالضغط علي إضافة عنصر جديد
ثم قم بكتابة اسم الصفحة في في اسم الموقع الإلكتروني ورابط الصفحة في عنوان URL للموقع الإلكتروني مثل الصور التالية:
أيقونات الشبكات الإجتماعية:
نفس شرح "أيقونات الشبكات الاجتماعية للمدون" للرجوع للشرح من هنا
أضف في اسم الموقع الإلكتروني إسم موقع التواصل الإجتماعي و في عنوان URL للموقع الإلكتروني رابط موقع التواصل الإجتماعي
مولد أكواد إضافات القالب
شرح مصور بالفيديو
اسم الإضافة التي سوف تجدها في
مولد كود الإضافات
مولد كود الإضافات
صورة الإضافة
سلايدر الهيدر و سلايدر الفوتر
شريط الأخبار
السلايدر الرئيسي
مربعات السلايدر الرئيسي
السلايدر الشبكة (الثابت)
سلايدر العرض الكامل
المكان في التخطيط: الويدجيت العرض الكامل
المكان في التخطيط: الويدجيت العرض الكامل
الفيديوهات
المكان في التخطيط: الويدجيت العرض الكامل
المكان في التخطيط: الويدجيت العرض الكامل
الويدجيت الصناديق (شبكة)
المكان في التخطيط: الويدجيت الصناديق
المكان في التخطيط: الويدجيت الصناديق
أعمدة
المكان في التخطيط: الويدجيت الصناديق و الويدجيت العرض الكامل
المكان في التخطيط: الويدجيت الصناديق و الويدجيت العرض الكامل
الاستديوا
المكان في التخطيط: الويدجيت الصناديق و الويدجيت العرض الكامل
المكان في التخطيط: الويدجيت الصناديق و الويدجيت العرض الكامل
سلايدر
المكان في التخطيط: الشريط الجانبي و التذييل
المكان في التخطيط: الشريط الجانبي و التذييل
مقالات
المكان في التخطيط: الشريط الجانبي و التذييل
المكان في التخطيط: الشريط الجانبي و التذييل
إضافة بخلفية سوداء
هام: عند اختيار إضافة السلايدر الشبكة (الثابت) اختار عدد المقالات 4 فقط
هام: عند اختيار إضافة مربعات السلايدر الرئيسي اختار عدد المقالات 4 فقط
مولد إضافات القالب
الإضافات الآخري
التعليقات
مكان الإضافة في التخطيط: الشريط الجانبي و التذييل
أضف الكود التالي:
<span class="bigmag-cmnt" data-no="5"></span>
إستبدل رقم 5 بعدد التعليقات التي تريدها أن تظهر
عداد مواقع التواصل الاجتماعي مكان الإضافة في التخطيط: الشريط الجانبي
شرح تخصيص الإضافة:
أضف في اسم الموقع الإلكتؤوني اسم موقع التواصل الإجتماعي وبجانبه عدد المتابعين مثل:
- facebook [200K]
- twitter [150K]
- youtube [1M]
- tiktok [500K]
- snapchat [500K]
- instagram [300K]
- pinterest [250K]
- behance [100K]
- soundcloud [600K]
- reddit [80K]
- vk [50K]
- tumblr [90K]
- vimeo [140K]
و في عنوان URL للموقع الإلكتؤوني رابط موقع التواصل الإجتماعي مثل الصورة التالية:
معلومات أساسية للإضافات:
لإضافة ويدجيت لتشغيل إضافة مثل شريط الأخبار أو أي ويدجيت يعمل بكود كما هو قادم تالياً اتبع الخطوات التالية:
إضغط علي Choose File ثم إختر صورة من حاسوبك وقم برفعها ثم الضغط علي حفظ
اللوحة الجانبية:
اللوحة الجانبية الأدوات المتوفرة للوحة الجانبية:
- جميع أدوات بلوجر
- أدوات القالب مقالات - سلايدر
أيقونات التواصل الإجتماعي
نفس شرح "أيقونات الشبكات الاجتماعية للمدون" للرجوع للشرح من هنا
شرح مصور بالفيديو
(أولاً):
قم بالضغط علي إضافة عنصر جديد ثم أضف في اسم الموقع الإلكتروني إسم التصنيف مثل رياضة كمثال. و في عنوان URL للموقع الإلكتروني رابط التصنيف مثل /search/label/رياضة مثل الصورة التالية:
مثلاً تحت إسم رياضة أكتب _ ثم كرة قدم مثل الصورة التالية ايضاً:
(ثالثاً) القائمة الفرعية الدرجة الثانية:
أضف __ (تزود شرطة أخري) قبل الكلمة مثل تحت كرة قدم أضف فرقة مصر مثلاً ثم تنزل بالسهم لتكون تحت كرة قدم مثل الصور التالية:
لتصبح القائمة بهذا الشكل:
ملوحظة: للقائمة الفرعية يمكنك إضافة قوائم لا نهائية للقائمة الفرعية بإضافة شرطة في كل مرة مثل الصورة التالية:
لاحظ في نادي الزمالك تم إضافة ثلاث شرط "___"
(رابعاً) قائمة الميجا منيو (Mega Menu):
أكتب بداخل (اسم الموقع الإلكتروني): التصنيف الذي تريده ثم [Mega Menu] بداخل (عنوان URL للموقع الإلكتروني)
[Mega Menu]
(خامساً) الأيقونات في القائمة الرئيسية:
أضف التسمية في عنوان URL للموقع الإلكتروني ثم العلامة / ثم إسم الأيقونة فقط
أدخل في خانة البحث الأيقونة التي ترغب في إضافتها ثم اضغط عليها سوف تظهر لك مثل الصورة التالية:
ثم انسخ الاسم ثم انسخ الاسم المحدد باللون الأحمر فقط بدون نسخ باقي الكود مثل ما هو موضح في الصورة التالية:
مثال: الرئيسية/fas fa-home
مثال: ألعاب/fas fa-gamepad
مثال آخر: الفيديوهات/fas fa-play
موقع الأيقونات: Font Awesome
مثل الصورة التالية تماماً:
[blogger] لتعليقات بلوجر [facebook] لتعليقات الفيسبوك [disqus] لتعليقات ديسكس يمكنك أيضاً إضافة سطر واحد فقط مما يأتي [blogger] [facebook] [disqus] [facebook][disqusss] [blogger]facebook] [facebook][blogger] [disqus][facebook][blogger] [blogger][disqus][facebook]
الاسم القصير لـDisqus
أكتب الإسم القصير لـ Disqus مثل الصورة التالية:
صفحة تحويل الروابط:
الخطوة الأولى:
إنتقل للمدونة >> ثم إلى الصفحات >> ثم قم بإنشاء صفحة جديدة بعنوان redirect
من خلال >> إعدادات الصفحة >> خيارات >> تعليقات القراء >> عدم السماح
يمكنك تنسيق الصفحة وكتابة شرائح نصية عن منتج أو أي شيء تريده ووضع شفرات إعلانات أدسنس أو غيرها..إعتبر الأمر وكأنك تكتب تدوينة عادية.
الآن إنتقل من وضع التأليف إلى HTML ثم إختر موضع مناسب للأداة
قم بنسخ الكود التالي وضعه داخل حقل المحرر تماما كما في الصورة.
<!-- redirect Start --> <div id="pageredirect"></div> <!-- redirect End -->
التعديل على الأداة
- المجموعة التالية خاصة بحقل الإعلان الموجود فوق العداد التنازلي يمكن إستخدامها كإعلان شخصي لعملائك أو إستعمالها كشريحة لعرض أحد تصاميمك أو منتوجاتك:
- المعرف page_redirect_on خاص بعرض الإضافة عموما فإذا غيرت القيمة من off إلى on سيتم تشغيل تحويل الروابط.
- المعرف 1 ads-text المحدد بهذا اللون هو عبارة عن إعلان نصي مثلا إستبدل القيمة بإسم المعلن..أما إذا أردت وضع صورة بدل النص إستبدل المعرف ب ads-img class="lazy" وضع رابط الصورة كقيمة
- أو إستخدم العلامة ads-google إذا أردت وضع شفرة إعلان أدسنس نضع القيمة وهي: شفرة الإعلان
- المعرف 2 ads-rel المحدد بنفس اللون خاص بتتبع محركات البحث لرابط الإعلان..لمنع محركات البحث نضع القيمة الإفتراضية nofollow.. للسماح نضع القيمة dofollow أو جعلها فارغة و هذا يعني ميزة إضافية لشروط الإعلان على مدونتك المعرف 3 ads-link المحدد بنفس اللون خاص برابط الإعلان سواء كان نص أو صورة نضع الرابط المباشر كقيمة مكان العلامة #
- المعرف Block-Site المحدد بهذا اللون خاص بمنع روابط معينة من التحويل والفكرة أننا نضع إسم النطاق facebook.com كقيمة وإذا كان عندك أكثر من نطاق قم بالفصل بينهم بـ | مثلا هكذا.. facebook.com|youtube.com|mail.google.com|plus.google.com|play.google.com|instagram.com|twitter.com|linkedin.com|deviantart.com|codepen.io|pinterest.com|dribbble.com|behance.net|digg.net|dropbox.com|skype.com|tumblr.com|vimeo.com|flickr.com|github.com|vk.com|weibo.com
- المعرف timer المحدد بهذا اللون خاص بالعد التنازلي نضع الرقم الذي نريده كقيمة مكان العدد 10 والذي تعني عشرة ثواني
- المعرف text-err والمعرف text-ready والمعرف text-Configure المحددة بهذا اللون قيمتها خاصة بنصوص زر الإحالة يمكنك تغييرها بما يناسبك إذا أردت
- المعرف name-page مهم جدا فهو إسم مسار صفحة التحويل كما أشرنا لذلك في الخطوة الأولى .. دوره هنا كإحتياطية في حال كان إسم مسار الصفحة ليس redirect تستطيع حقن الإسم الجديد في السكربت فقط من هنا. مثلا..لنفترض أنك وجدت إسم المسار للصفحة /p/redirect-22 فبدل إنشاء صفحة جديدة نأخذ فقط إسم المسار redirect-22 ونضعه كقيمة جديدة
ملحوظة يتم تغيير اسم الصفحة تلقائياً إلي /p/redirect حتي لو لم تكن رابط الصفحة بنفس الاسم لمعرفة العنوان الصحيح لرابط الصفحة اذهب إلي الصفحات ثم الصفحة المخصصة لصفحة إعادة توجيه الوابط ثم اضغط علي الزر الأيمن للفأرة ثم اضغط علي copy link address ثم افتح تبويب جديد في المتصفح ثم الصق الرابط ثم انسخ الجزء المحدد باللون الأحمر فقط وهو blog-page ونضعه كقيمة جديدة في المعرف name-page
انظر الصور التالية:
نظام الإعلانات:
أول أداة: إعلان أول الموضوع
ثاني أداة: إعلان وسط الموضوع
ثالث أداة: إعلان أخر الموضوع
كبفبة إضافة إعلان:
نقوم بالضغط علي تعديل ثم إضافة محتوي الإعلان في جزء "المحتوي" مثل الصورة التالية:
هذا الشرح أيضاً ينطبق علي جميع أماكن الإعلانات في القالب
قسم الشعار:
أولاً: قم بإضافة وصف عن مدونتك في خانة شرح مثل الصورة التالية:
ثانياً: قم بإضافة صورة ما عليك إلا إضافة صورة من الحاسوب مثل الصورة التالية:
أيقونات التواصل الإجتماعي
نفس شرح "أيقونات الشبكات الاجتماعية للمدون" للرجوع للشرح من هنا
تغيير ألوان وخلفية القالب
من تبويب المظهر نقوم بالضغط على زر تخصيص للدخول إلى صفحة مصمم المظاهر
معلومات أساسية تغيير لون القالب للون مخصص اتبع الخطوات التالية:
لتغيير ألوان القالب نقوم بالضغط على تبويب الإعدادات المتقدمة واختيار الالوان المطلوبه ثم بعد الانتهاء يمكنك تغيير باقي الألوان بالضغط علي الإعدادات الرئيسية واختيار الجزء المراد تغيير اللون له مثل الصور التالية:
-
لتغيير خلفية القالب نقوم بالضغط على تبويب خلفية واختيار الخلفية المطلوبة أو رفع خلفية خاصه .
-
يمكن إضافة أكواد CSS خاصة إلى القالب من خلال الضغط على تبويب الإعدادات الرئيسية ثم إضافة إضافة CSS
بعد الانتهاء من الخلفية والألوان نقوم بالضغط على زر حفظ قبل الخروج.
الأكواد القصيرة
معلومات أساسية: بعض الأكواد القصيرة يمكن استخدامها داخل التدوينات او لعمل صفحات ثابته مثل صفحة الأرشيف أو صفحة نموذج الاتصال . ويتم إضافة الكود داخل تبويب عرض HTML أثناء كتابة المشاركة مثل ما هو موضح في الصور التالية
ملحوظة هذا الشرح ينطبق علي الأكواد القصيرة والمختصرة كما هو قادم تالياً
<a class="large-button" href="#">زر كبير</a> <a class="medium-button" href="#">زر متوسط</a> <a class="button" href="#">زر</a> <a class="button red" href="#">زر أحمر</a> <a class="button orange" href="#">زر برتقالي</a> <a class="button green" href="#">زر أخضر</a> <a class="button blue" href="#">زر أزرق</a> <a class="button purple" href="#">زر أرجواني</a> <a class="button yellow" href="#">زر أصفر</a> <a class="button mint" href="#">زر نعناع</a> <a class="button aqua" href="#">زر أكوا</a> <a class="button pink" href="#">زر بامبي</a> <a class="button white" href="#">زر أبيض</a> <a class="button grey" href="#">زر رمادي</a> <a class="button dark-grey" href="#">زر رمادي غامق</a>
النوع الثاني من الأزرار
<a class="large-button transparent" href="#">زر كبير </a> <a class="medium-button transparent" href="#">زر متوسط</a> <a class="button transparent" href="#">زر</a> <a class="button transparent red" href="#">زر أحمر</a> <a class="button transparent orange" href="#">زر برتقالي</a> <a class="button transparent green" href="#">زر أخضر</a> <a class="button transparent blue" href="#">زر أزرق</a> <a class="button transparent purple" href="#">زر أرجواني</a> <a class="button transparent yellow" href="#">زر أصفر</a> <a class="button transparent mint" href="#">زر نعناع</a> <a class="button transparent aqua" href="#">زر أكوا</a> <a class="button transparent pink" href="#">زر بامبي</a> <a class="button transparent grey" href="#">زر رمادي</a> <a class="button transparent dark-grey" href="#">زر رمادي غامق</a>
<a class="large-button" href="#"><i class="fab fa-free-code-camp"></i>زر كبير</a>
<a class="medium-button" href="#"><i class="fas fa-tachometer-alt"></i>زر متوسط</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>زر</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>زر أحمر</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>زر برتقالي</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>زر أخضر</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>زر أزرق</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>زر أرجواني</a>
<a class="button yellow" href="#"><i class="fas fa-external-link-square-alt"></i>زر أصفر</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>زر نعناع</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>زر أكوا</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>زر بامبي</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>زر أبيض</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>زر رمادي</a>
<a class="button dark-grey" href="#"><i class="fas fa-meh-o"></i>زر رمادي غامق</a>
تقوم بنسخ كود الأيقونة كاملاً وتضعه بجانب النص مثل الكود السابقموقع الأيقونات: FontAwesome
صناديق التنبيه
صناديق الأكواد:
الدروب كابس:
<div class="alert-message success"> رسالة النجاح: تقرأ هذه الرسالة المهمة بنجاح. </div> <div class="alert-message alert"> رسالة التنبيه: يحتاج هذا التنبيه إلى انتباهك. </div> <div class="alert-message warning"> رسالة تحذير: تحذير! أفضل الاختيار الذاتي. </div> <div class="alert-message error"> رسالة خطأ: يا المفاجئة! تغيير بعض الأشياء. </div>
صناديق الأكواد:
<pre>You HTML Code Here</pre>
<span class="dropcap">M</span>
أوكورديون
أضف الكود التالي:
<div class="bm-accordion"> <span class="bm-click">زر رقم 1</span> <div>المحتوي رقم 1</div> <span class="bm-click">زر رقم 2</span> <div>المحتوي رقم 2</div> <span class="bm-click">زر رقم 3</span> <div>المحتوي رقم 3</div> <span class="bm-click">زر رقم 4</span> <div>المحتوي رقم 4</div> </div>
مقال مقسم لصفحات
أضف الكود التالي:
<div class="bm-post-page"> المحتوي للصفحة (رقم 1) هنا </div> <div class="bm-post-page"> المحتوي للصفحة (رقم 2) هنا </div> <div class="bm-post-page"> المحتوي للصفحة (رقم 3) هنا </div> <div class="bm-post-page"> المحتوي للصفحة (رقم 4) هنا </div>
يمكنك زيادة عدد الصفحات بتكرار الكود السابق
الأكواد المختصرة
الأكواد المختصرة بداخل التدوينة أو الصفحة:
1- إتصل بنا
أضف الكود التالي بداخل التدوينة أو الصفحة
2- إضافة خريطة الموقع
لإنشاء صفحة خريطة الموقع ، أنشئ صفحة ثابتة جديدة ، وفي محتواها فقط اكتب هذا [sitemap] لا أكثر.
2- صفحة أو تدوينة بالعرض الكامل: أضف الكود المختصر التالي بداخل التدوينة أو الصفحة:
1- إتصل بنا
أضف الكود التالي بداخل التدوينة أو الصفحة
<div id="contact-us"></div>
2- إضافة خريطة الموقع
لإنشاء صفحة خريطة الموقع ، أنشئ صفحة ثابتة جديدة ، وفي محتواها فقط اكتب هذا [sitemap] لا أكثر.
2- صفحة أو تدوينة بالعرض الكامل: أضف الكود المختصر التالي بداخل التدوينة أو الصفحة:
<div class="full-width"></div>