إعدادات القالب

مقدمة

---

بيج ماج هو قالب بلوجر متجاوب ، جريدة ، مجلة ، أخبار ومدونة. قادم مع الخيارات التي تسمح لك لتخصيص موقع الويب الخاص بك تماما لاحتياجاتك مع أكثر من 10 قوالب في قالب واحد.

 

مميزات القالب الرئيسية:

 

• لوحة تحكم قوية وضخمة حيث تغنيك عن التعامل مع الأكواد نهائياً
• تحميل صاروخي (جديد)
• دعم مصمم النماذج مع عدد لا نهائي من الألوان والخطوط والخلفيات
• يدعم LTR و RTL مع نسخة إنجليزية كاملة
• متوافق مع جميع الشاشات والهواتف والتابلت
• عدد لا نهائي من الأشكال يمكنك تخصيص موقعك إلي شكل تريده
• يدعم الترجمة إلي جميع لغات العالم.
• يدعم الأكواد القصيرة والمختصرة:
• الأكواد القصيرة: (محتوي مغلق بشاركة المقال و الأزرار و محتوي المقالة و عنوان فرعي و مقال مقسم لصفحات و علامات التبويب والأكورديون وصناديق التنبيه و صناديق الأكواد و الدروب كابس و قائمة نمط وأعمدة)
• الأكواد المختصرة تكون بداخل التدوينة أو الصفحة:
• [full_width] لعرض التدوينة أو الصفحة بالعرض الكامل
• [sitemap] لإضافة خريطة الموقع بداخل الصفحة
• [left_sidebar] لجعل السايد بار علي اليسار
• [right_sidebar] لجعل السايد بار علي اليمين
• أكثر من خمسة عشر شكلاً للشاشة الرئيسية
• تحويل أي رابط صورة أو فيديوا في التعليقات إلي صورة حقيقية و فيديوا حقيقي
• قائمة ثابتة و سايد بار ثابت في الصعود والنزول يمكنك تعطيلهما من التخطيط
• قائمة مرنة يمكنك تحريكها من اليمين إلي الوسط
• هيدر مرن يمكنك تحريكه من اليمين إلي الوسط
• الوضع الغامق يمكنك تفعيله من التخطيط فقط
• ثلاث أشكال مختلفة للتدوينات الرئيسي و الشبكة و الفردي
• لوحة تسجيل الدخول يمكنك تسجيل الدخول بإستخدام موقعك أول قالب بلوجر يدعم هذه الخاصية
• لوحة جانبية إحترافية يمكنك إضافة فيها عدد لا نهائي من الويدجات
• قائمة فرعية فرعية (درجتين)
• قائمة ميجا منيو بتقنية أجاكس: تحميل عدد لا نهائي من التدوينات
• محتوي مغلق بمشاركة
• مقالات منبثقة أسفل كل مقالة لزيادة عدد مشاهدة التدوينات
• أداة صفحة إعادة توجيه الروابط: توجيه الروابط الخارجيه إلي صفحة مخصصة يمكنك إضافة فيها إعلاناتك
• خاصية منع النسخ
• نوعيين من صفحات التحميل (Preloader)
• مقالات ذات صلة أسفل المقالات
• إضافة صندوق إعجاب الفيسبوك بواسطة كود قصير
• دعم عنوان المشاركة الفرعي: يمكنك إضافة عنوان فرعي للنشر واختيار النمط المخصص له
• تصميمات مخصصة لأرشيف الصفحات: اختر أي تصميم لصفحات التصنيف / البحث / الأرشيف كما تريد باستخدام أزرار التنقل الاحترافية

تثبيت القالب و تفعيل وضع الجوال

---

تثبيت القالب و تفعيل وضع الجوال

 

تفعيل وضع الجوال

 

إذهب للوحة تحكم بلوجر ثم إختر المظهر ثم إضغط علي علامة الترس كما هو موضح في الصورة التالية:

 

ثم سوف تظهر لك نافذة منبثقة إختر التالي : لا، إظهار مظهر سطح المكتب على أجهزة الجوال. مثل الصورة التالية:

تثبيت القالب:

 

إذهب للوحة تحكم بلوجر ثم إختر المظهر ثم اضغط علي ‏تعديل HTML مثل الصورة التالية:

 

قم بتحديد جميع الاكواد وقم بحذفها ثم قم بفتح قالب التنظيف (Clean Template) وقم بنسخ جميع الأكواد ثم قم بلصقها في بلوجر ثم إضغط علي حفظ مثل الصورة التالية:

الان قم بالضغط علي نسخ احتياطي / استعادة سوف تظهر لك نافذة منبثقة إختر منها Choose File ثم إختر ملف القالب BigMag Blogger Template - Arabic Version.xml ثم إضغط علي تحميل الآن إنتظر إلي أن يتم تحميل القالب. مبروك عليك تم الرفع بنجاح. مثل الصورة التالية:

إعدادات القالب

---

إعدادات القالب المفروض عند تشغيل إضافة إضافة كلمة true وعند تعطيلها إضافة كلمة false

1- المترجم

أكتب في إسم الموقع الجديد (الخانة الأولي) الكلمة الأصلية

و في ‏عنوان URL للموقع الجديد (الخانة الثانية) الكلمة المراد ترجمتها

مثال:

الخانة الأولي: المقالات الشائعة

الخانة الثانية: Popular Posts

2- شكل الصندوق:

3- الشكل محاط

4- قائمة ثابتة

5- سايد بار ثابت

6- القائمة شكل الصندوق

7- الهيدر في الوسط

8- القائمة في الوسط

9- نوع المقالات شبكة

10- نوع المقالات فردي

11- الشكل الصغير

12- عدد المقالات في الصفحة: وهي عدد المقالات في صفحة التدوينات العدد الإفتراضي 6

13- عدد المقالات ذات صلة: وهي عدد المقالات ذات صلة أسفل التدوينة  العدد الإفتراضي 3

14- خلفية السلايدر الشبكة

15- خلفية السلايدر الكبير و...

16- و 17- صفحة تحميل السلايدر الشبكة و صفحة تحميل السلايدر الكبير و...

18- سلايدر الشبكة الملون

19- صفحة التحميل (1)

20- صفحة التحميل (2)

21- مقالات منبثقة

22- الوضع الغامق

23- منع النسخ: وهي لمنع نسخ محتوي التدوينة و أي شئ بداخل الـBody

الأنيميشن: وهي لظهور الصور عند التمرير للأسفل بتأثير جميل

 

تخصيص القالب

---

أكواد الميتا تاج:

<!-- [ Social Media Meta Tag ] -->
<meta content='GOOGLE WEBMASTER CODE' name='google-site-verification'/>
<meta content='BING WEBMASTER CODE' name='msvalidate.01'/>
<meta content='Alexa Verify ID' name='alexaVerifyID' />
<meta content='YOUER COUNTRY' name='geo.placename'/>
<meta content='ADMIN NAME HERE' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='https://www.facebook.com/FACEBOOK PROFILE' property='article:author'/>
<meta content='https://www.facebook.com/FACEBOOK FAN PAGE' property='article:publisher'/>
<meta content='FACEBOOK APP ID HERE' property='fb:app_id'/>
<meta content='ADMIN FACEBOOK ID HERE' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@USER TWITTER HERE' name='twitter:site'/>
<meta content='@USER TWITTER HERE' name='twitter:creator'/>

شرح أكواد الميتا تاج:

إستبدل:  GOOGLE WEBMASTER CODE

إستبدل:  BING WEBMASTER CODE

إستبدل:  Alexa Verify ID

إستبدل:  YOUER COUNTRY

إستبدل:  ADMIN NAME HERE

إستبدل:  FACEBOOK PROFILE

إستبدل:  FACEBOOK FAN PAGE

إستبدل: FACEBOOK APP ID HERE

إستبدل: en_US

إستبدل: en_GB

إستبدل: USER TWITTER HERE

إستبدل: USER TWITTER HERE

صندوق المؤلف:

 

أيقونات الشبكات الاجتماعية للمدون:

 

أضف في اسم الموقع الجديد إسم موقع التواصل الإجتماعي و في ‏عنوان URL للموقع الجديد رابط موقع التواصل الإجتماعي

وصف المدون:

 

قسم الهيدر: 

 

 

 

القائمة العليا

 

 أضف في اسم الموقع الجديد إسم الصفحة و في عنوان URL للموقع الجديد رابط الصفحة مثل الصورة التالية:

 

 

 

أيقونات الشبكات الإجتماعية:

 

 

أضف في اسم الموقع الجديد إسم موقع التواصل الإجتماعي و في ‏عنوان URL للموقع الجديد رابط موقع التواصل الإجتماعي

 

كيفية إضافة أيكونة اللوحة الجانبية في أيقونات الشبكات الإجتماعية فقط أضف panel-icon في اسم الموقع الجديد و في ‏عنوان URL للموقع الجديد رمز #

 

كيفية إضافة أيكونة التسجيل الدخول في أيقونات الشبكات الإجتماعية فقط أضف login في اسم الموقع الجديد و في ‏عنوان URL للموقع الجديد رمز #

 

سلايدر الهيدر و سلايدر الفوتر

 

 

أضف الكود التالي:

<div class='bm-recent-scroll'></div>

 

هيدر المدونة رفع لوجو:

 

 

إضغط علي Choose File ثم إختر صورة من حاسوبك وقم برفعها ثم الضغط علي حفظ

 

شرح الإعلانات: إعلان الرئيسية و إعلان أعلي المقال و إعلان أسفل المقال و نظام الإعلانات

أضف كود الإعلان في (المحتوي) كما هو موضح بالصورة التالية:

القائمة الرئيسية:

(أولاً):

أضف في اسم الموقع الجديد إسم التصنيف كمثال. و في عنوان URL للموقع الجديد رابط التصنيف مثل الصورة التالية:

(ثانياً) القائمة الفرعية الدرجة الأولي:

مثلاً تحت إسم رياضة أكتب _ ثم كرة قدم مثل الصورة التالية ايضاً:

ثم تنزل بالسهم لتكون تحت الإسم رياضة كما في الصورة التالية:

 

 

(ثالثاً) القائمة الفرعية الدرجة الثانية:

 

أضف __ (تزود شرطة أخري) قبل الكلمة مثل تحت كرة قدم أضف فرقة مصر مثلاً ثم تنزل بالسهم لتكون تحت كرة قدم مثل الصور التالية:

 

الصورة الأولي

 

الصورة الثانية

 

(رابعاً) قائمة الميجا منيو (Mega Menu):

 

أكتب بداخل (اسم الموقع الجديد):  التصنيف الذي تريده ثم [Mega Menu] بداخل (عنوان URL للموقع الجديد)

 

[Mega Menu]

 

اللوحة الجانبية:

 

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

 

أيقونات التواصل الإجتماعي في اللوحة الجانبية:

 

 

 

أضف في اسم الموقع الجديد إسم موقع التواصل الإجتماعي و في ‏عنوان URL للموقع الجديد رابط موقع التواصل الإجتماعي

قسم العرض الكامل:

 

 

شريط الأخبار:

 

 

أضف الكود التالي:

 

<span data-type="recent" data-no="5"></span>

بالتصنيف أضف الكود التالي:

 

<span data-type="label" data-label="إسم التصنيف هنا"></span>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

• السلايدر الكبير
• البلوك الصغير (1)
• البلوك الصغير (2)
• البلوك الصغير (3)
• البلوك الصغير (4)
• البلوك المتوسط (5)
• البلوك المتوسط (6)
• البلوك المتوسط (7)

 

السلايدر الكبير:
 

 

أضف الكود التالي:

<div class='recent-single-slider' data-label='إسم التصنيف هنا'></div>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

البلوك الصغير (1) و البلوك الصغير (2) و البلوك الصغير (3) و البلوك الصغير (4) و البلوك المتوسط (5) و البلوك المتوسط (6) و البلوك المتوسط (7) 

أضف الكود التالي:
 

<div class="featuredContent bm-featuredMag" data-label="إسم التصنيف هنا"></div>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

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

 

 

أضف الكود التالي:

 

<div class="recent-full-carousel" data-label="إسم التصنيف هنا" data-num="7"></div>

 

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 7 برقم عدد التدوينات

السلايدر الشبكة (الثابت):

أضف الكود التالي:

<span data-type="recent"></span>

بالتصنيف أضف الكود التالي:

<span data-type="label" data-label="إسم التصنيف هنا"></span>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

القسم الرئيسي

 العمود (1) و العمود (2) و العمود (3)

 

 

أضف الكود التالي:

<div class='recent-post-straight' data-label='إسم التصنيف هنا'></div>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

قسم المحتوي:

 

 

 

الودجيت (الشبكة) و الودجيت (الشبكة) [2] و الودجيت الشبكة (في الأسفل) و الودجيت الشبكة في (الأسفل) [2] 

 

الودجيت رقم (1):

 

 

أضف الكود التالي:

 

<object class='bigmag-widget' data-label='إسم التصنيف هنا' data-type='list'></object>

 

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

 

الودجيت رقم (2):

أضف الكود التالي:

<object class='bigmag-widget' data-label='إسم التصنيف هنا' data-type='list'></object>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

 

الويدجيت الصناديق و الويدجيت الصناديق (2)

الودجيت رقم (1):

 

 

أضف الكود التالي:

<span data-type="feat" data-label="إسم التصنيف هنا"></span>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده

الودجيت رقم (2):

 

أضف الكود التالي:

 

<span data-type="smallmag-slider" data-label="إسم التصنيف هنا" data-no="6"></span>

 

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 6 برقم عدد التدوينات

الودجيت رقم (3):

 

 

أضف الكود التالي:

<span data-type="videos" data-label="إسم التصنيف هنا" data-no="6"></span>

 

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 6 برقم عدد التدوينات

 

الودجيت رقم (4) و (5):

 

 

أضف الكود التالي:

العمود الأيسر:

<span data-type="columnleft" data-label="إسم التصنيف هنا" data-no="5"></span>

 

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 5 برقم عدد التدوينات

العمود الأيمن:

 

<span data-type="columnright" data-label="إسم التصنيف هنا" data-no="5"></span>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 5 برقم عدد التدوينات

الودجيت رقم (6):

 

أضف الكود التالي:

<span data-type="gallery" data-label="إسم التصنيف هنا" data-no="9"></span>

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 9 برقم عدد التدوينات

 نظام التعليقات

blogger لتعليقات بلوجر
 
facebook لتعليقات الفيسبوك
 
disqus لتعليقات ديسكس
 
يمكنك أيضاً إضافة سطر واحد فقط مما يأتي
 
blogger
 
facebook
 
disqus
 
facebook/disqus
 
blogger/facebook
 
facebook/blogger
 
disqus/facebook/blogger
 
blogger/disqus/facebook

صفحة تحويل الروابط:

 

 الخطوة الأولى:

 

إنتقل للمدونة >> ثم إلى الصفحات >> ثم قم بإنشاء صفحة جديدة بعنوان   redirect 

 

من خلال >> إعدادات الصفحة >> خيارات >> تعليقات القراء >> عدم السماح

 

يمكنك تنسيق الصفحة وكتابة شرائح نصية عن منتج أو أي شيء تريده ووضع شفرات إعلانات أدسنس أو غيرها..إعتبر الأمر وكأنك تكتب تدوينة عادية.

 

الآن إنتقل من وضع   التأليف إلى HTML ثم إختر موضع مناسب للأداة

 

قم بنسخ الكود التالي وضعه داخل حقل المحرر تماما كما في الصورة.

 

<!-- redirect Start -->
<div id="pageredirect"></div>
<!-- redirect End -->

التعديل على الأداة

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

 المعرف 1 ads-text المحدد بهذا اللون هو عبارة عن إعلان نصي مثلا إستبدل القيمة بإسم المعلن..أما إذا أردت وضع صورة بدل النص إستبدل المعرف ب ads-img وضع رابط الصورة كقيمة 

المعرف 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 المحددة بهذا اللون قيمتها خاصة بنصوص زر الإحالة يمكنك تغييرها بما يناسبك إذا أردت
المعرف border المحدد بهذا اللون خاص بسمك الشريط الدائري المتحرك للعداد التنازلي قم بتغيير القيمة  5px  بمايناسبك وحاول أن لا تتعدى  10px.

المعرف color المحدد بهذا اللون خاص بلون الإضافة الإفتراضي يمكنك وضع كود اللون الذي تريده كقيمة.

المعرف width المحدد بهذا اللون خاص بطول عرض الإضافة يمكنك ضبط الحجم الذي تريده فقط قم بتغيير القيمة  2  بمايناسبك. 
يمكنك التنقل بين الأ حجام بهذه الطريقة  1  أو  1.1  أو   1.2  إلي الرقم  2

المعرف name-page المحدد بهذا اللون مهم جدا فهو إسم مسار صفحة التحويل كما أشرنا لذلك في الخطوة الأولى .. دوره هنا كإحتياط في حال كان إسم مسار الصفحة ليس redirect تستطيع حقن الإسم الجديد في السكربت فقط من هنا.  مثلا..لنفترض أنك وجدت إسم المسار للصفحة /p/redirect-22 فبدل إنشاء صفحة جديدة نأخذ فقط إسم المسار redirect-22 ونضعه كقيمة جديدة

قسم الشريط الجانبي (السايد بار) و اللوحة الجانبية و قسم التذييل (الفوتر):

 

 

عداد مواقع التواصل الإجتماعي:

 

 

أضف في اسم الموقع الجديد facebook [100K] و في ‏عنوان URL للموقع الجديد رابط موقع التواصل الإجتماعي مثل الأمثلة التالية:

facebook [2.1k]
twitter [1k] 
rss [860] 
youtube [4.5m] 
dribbble [300K]
instagram [502]
pinterest [120]
sound cloud [200k]
linkedin [10k]
github [80k]
behance [589]
vimeo [20K]
rss [358K]

إعلان:

أضف كود الإعلان في المحتوي كما توضح الصورة التالية: 

 

 

الودجيت رقم (1) سلايدر:

 

 

أضف الكود التالي:

 

<div class='recent-single-carousel' data-label='إسم التصنيف هنا' data-num='5'></div>

 

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 5 برقم عدد التدوينات

الودجيت رقم (2) مقالات بالتصنيف:

 

 

<span class="bigmag-tagswid" data-no="5" data-label='إسم التصنيف هنا'></span>

 

إستبدل إسم التصنيف هنا بإسم التصنيف الذي تريده ورقم 5 برقم عدد التدوينات

الودجيت رقم (3)  و (4)

 

 

آخر المقالات:

 

  أضف الكود التالي:

 

<span class="bigmag-recent" data-no="5"></span>

 

إستبدل رقم 5 برقم عدد التدوينات

التعليقات:

  أضف الكود التالي:

 

<span class="bigmag-cmnt" data-no="5"></span>

 

إستبدل رقم 5 برقم عدد التدوينات

 

صندوق إعجاب الفيسبوك:

 

fbbox/رابط الصفحة

مثال:

fbbox/https://www.facebook.com/PicalicaStore

 

قسم الشعار:

 إضافة صورة ما عليك إلا إضافة صورة من الحاسوب مثل الصورة التالية:

 

متابعة بالبريد الإلكتروني إضغط علي تعديل سوف تظهر لك نافذة منبثقة إضغط علي حفظ مثل الصورة التالية:

 

 

قسم الحقوق:

 

القائمة السفلي:

 

 أضف في اسم الموقع الجديد إسم الصفحة و في عنوان URL للموقع الجديد رابط الصفحة مثلالصورة التالية:

 

 

أيقونات التواصل الإجتماعي:

 

 

أضف في اسم الموقع الجديد إسم موقع التواصل الإجتماعي و في ‏عنوان URL للموقع الجديد رابط موقع التواصل الإجتماعي.

الأكواد القصيرة

---

محتوي مغلق بمشاركة المقال

<div id="sociallocker">
<div id="sociallocker-content">
<a href="#">تحميل الأن</a></div>
</div>

عنوان فرعي:

<h2 class="sub-title">العنوان الفرعي هنــــا</h2>

 

محتوي المقالة:

<div class="post-content">
محتوي المقالة هنا 
</div>

القائمة:

<div class="post-li">
قائمة التدوينات هنا
</div>

مثال:

<div class="post-li">
<ul class="bm-custom-li bm-arrow-li">
<li>عناوين فرعية ملونة</li>
<li>محتوي مغلق بمشاركة المقال</li>
<li>أزرار</li>
<li>و الكثير</li>
</ul>
</div>

 

الأزرار:

 النوع الأول:

 

<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="fa fa-free-code-camp"></i>زر كبير</a>
<a class="medium-button" href="#"><i class="fa fa-tachometer"></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="fa fa-external-link"></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="fa fa-meh-o"></i>زر رمادي غامق</a>

يمكنك إستخدام مكتبة Fontawesome في النوع الثالث

مقال مقسم لصفحات:

 

<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>

إستديوا:

 

<section id="bm-photogallery">
جميع الصور التي لديك هنا
</section>

سلايدر:

 

<div id="post-carousel" class="owl-carousel owl-theme">
 
<div class="img-item"><img src="#" alt="Picture 1"></div>
 
<div class="img-item"><img src="#" alt="Picture 2"></div>
 
<div class="img-item"><img src="#" alt="Picture 3"></div>
 
</div>

إستبدل رمز # برابط صورة

علامات التبويب والأكورديون

 علامات التبويب:

 

<div class="bm-tabs">
 
<div class="bm-tabbtn">
<span class="bm-click">زر 1</span>
<span class="bm-click">زر 2</span>
<span class="bm-click">زر 3</span>
</div>
 
<div class="bm-tabcontent">
<div>المحتوي 1</div>
<div>المحتوي 2</div>
<div>المحتوي 3</div>
</div>
 
</div>

الأكورديون:

 

 

<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="alert-message success">
<i class="fa fa-check-circle"></i>رسالة النجاح: تقرأ هذه الرسالة المهمة بنجاح.<br />
<div class="alert-del-btn">
</div>
</div>
 
<div class="alert-message alert">
<i class="fa fa-info-circle"></i>رسالة التنبيه: يحتاج هذا التنبيه إلى انتباهك.<br />
<div class="alert-del-btn">
</div>
</div>
 
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i>رسالة تحذير: تحذير! أفضل الاختيار الذاتي.<br />
<div class="alert-del-btn">
</div>
</div>
 
<div class="alert-message error">
<i class="fa fa-exclamation-circle"></i>رسالة خطأ: يا المفاجئة! تغيير بعض الأشياء.<br />
<div class="alert-del-btn">
</div>
</div>

صناديق الأكواد:

 

<pre data-codetype="HTML">You HTML Code Here</pre>
 
 
<pre data-codetype="CSS">You CSS Code Here</pre>
 
 
<pre data-codetype="JavaScript">You JavaScript Code Here</pre>
 
 
<pre data-codetype="JQuery">You JQuery Code Here</pre>

 

الدروب كابس:

النوع الأول
 

<span class="bm-dropcap dcap1">M</span>

النوع الثاني

<span class="bm-dropcap dcap2">S</span>

النوع الثالث

<span class="bm-dropcap dcap3" style="color: #ff2400;">S</span>

يمكنك تغيير اللون بتغيير قيمة color في النوع الثالث

قائمة نمط:

النوع الأول:

 

 

<ul class="bm-custom-li bm-arrow-li">
<li>العناوين الفرعية الملونة</li>
<li>محتوي مغلق</li>
<li>ازرار</li>
<li>صناديق التنبيه</li>
<li>صناديق الأكواد</li>
<li>علامات التبويب والأكورديون</li>
<li>و الكثير</li>
...... </ul>

النوع الثاني:

 

<ul class="bm-custom-li bm-check-li">
<li>العناوين الفرعية الملونة</li>
<li>محتوي مغلق</li>
<li>ازرار</li>
<li>صناديق التنبيه</li>
<li>صناديق الأكواد</li>
<li>علامات التبويب والأكورديون</li>
<li>و الكثير</li>
...... </ul>

النوع الثالث:

 

<ul class="bm-custom-li bm-cross-li">
<li>العناوين الفرعية الملونة</li>
<li>محتوي مغلق</li>
<li>ازرار</li>
<li>صناديق التنبيه</li>
<li>صناديق الأكواد</li>
<li>علامات التبويب والأكورديون</li>
<li>و الكثير</li>
...... </ul>

النوع الرابع:

 

<ul class="bm-custom-li bm-multi-li">
<li><i class="fa fa-coffee"></i>العناوين الفرعية الملونة</li>
<li><i class="fa fa-cloud-upload"></i>محتوي مغلق</li>
<li><i class="fa fa-bandcamp"></i>ازرار</li>
<li><i class="fa fa-address-card-o"></i>صناديق الأكواد</li>
<li><i class="fa fa-drivers-license"></i>علامات التبويب والأكورديون</li>
<li><i class="fa fa-facebook"></i>و الكثير</li>
</ul>

يمكنك إستخدام مكتبة Fontawesome في النوع الرابع

أعمدة:

 

عمود 1:

<div class="bm-cols">
<div class="col1">المحتوي هنا</div>
</div>

عمود 2:

<div class="bm-cols">
<div class="col2 pull-left">
<div class="bm-first-col">المحتوي هنا</div>
</div>
<div class="col2 pull-right">
<div class="bm-second-col">المحتوي هنا</div>
</div>
</div>

عمود 3:

 

<div class="bm-cols">
<div class="col3 pull-left">
<div class="bm-col3-1">المحتوي هنا</div>
</div>
<div class="col3 pull-left">
<div class="bm-col3-2">المحتوي هنا</div>
</div>
<div class="col3 pull-left">
<div class="bm-col3-3">المحتوي هنا</div>
</div>
</div>

 

عمود 4:

<div class="bm-cols">
<div class="col4 pull-left">
<div class="bm-col4-1">المحتوي هنا</div>
</div>
<div class="col4 pull-left">
<div class="bm-col4-2">المحتوي هنا</div>
</div>
<div class="col4 pull-left">
<div class="bm-col4-3">المحتوي هنا</div>
</div>
<div class="col4 pull-left">
<div class="bm-col4-4">المحتوي هنا</div>
</div>
</div>

الأكواد المختصرة

---

الأكواد المختصرة بداخل التدوينة أو الصفحة:

1- إتصل بنا

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

<div class="contact-form"></div>

 

2- إضافة خريطة الموقع

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

3- صفحة أو تدوينة بالعرض الكامل: أضف الكود المختصر التالي بداخل التدوينة أو الصفحة: [full_width]

4- السايد بار في اليسار أضف الكود التالي بداخل التدوينة أو الصفحة: [left_sidebar]

5- السايد بار في اليمين أضف الكود التالي بداخل التدوينة أو الصفحة: [right_sidebar]