قالب FitnessMag احترافي ورائع - علوم وتكنولوجيا
Headlines News :
الرئيسية » » قالب FitnessMag احترافي ورائع

قالب FitnessMag احترافي ورائع

Written By fg on الاثنين، 8 أبريل 2013 | 3:41 م

أضع بين ايديكم قالب FitnessMag احترافي من تطوير وتعريب العماد، أتمنى ان ينال إعجابكم , القالب يصلح لكل المواضيع
 الشخصية والاجتماعية وغيرها من المواضيع يتميز هذا القالب بخاصيتي الهادئ بثلاث أعمدة ، عمود للأدوات المضافة ، و عمودين لعرض التدوينات بطريقة جميلة ، كما أن كود "إقرأ المزيد" مدرج في هذا القالب وإضافة ترقيم الصفحات مدمجة ايضاً والراقي فبساطته في ألوانه خلفية رمادية وتصميمه زادت من جاذبيته القالب سهل التعامل و التحكم وللمشاهد الحكم على ذلك ..،
    FitnessMag

  1. هيدر مقسم إلى قسمين متقايسين في العرض ، قسم يحتوي على لوغو المدونة ، و القسم الآخر على مساحة إعلانية من قياس 60×468 قائمة أفقية جميلة ، تحتوي على أزرار ، و بالجانب مربع البحث الداخلي .
  2. ثلاث أعمدة ، عمود للأدوات المضافة ، و عمودين لعرض تصطف التدوينات مثنى مثنى و هذا أكثر ما يميز القالب .
  3. قائمة جانبية عادية ، تحتوي على أداة ' تابعنا على المواقع الاجتماعية ' المتميزة .
  4. فوتر ستكون من ثلاث أعمدة متقايسة في العرض و الإرتفاع ، تصلح لبعض الأدوات الترويجية كصندوق الفيسبوك أو تويتر.
  5. خلفية رمادية تجعل القالب هادئ و مريح للعين .
  6. سلايد شو احترافي لعرض المواضيع المميزة في المدونة .
  7. يوجد في أسفل كل تدوينة صندوق للتعريف بالكاتب ، سنرى طريقة تعديله في الجزء التالي .
  8. يوجد أسفل كل تدوينة إضافة مقالات ذات صلة بتنسيق CSS جميل .
تخصيص السلايد شو :
الدخول إلى لوحة التحكم -> تخطيط -> تحرير HTML. قم بتوسيع قوالب عناصر واجهة المستخدم .
( إستخدم أداة البحث Ctrl + F ) إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :

<div class='flexslider' id='slider'>
<ul class='slides'>
<li class='slide'><a href='#' target='_self'><img src='http://3.bp.blogspot.com/-Umx4ArZzfag/UJLRVp91RmI/AAAAAAAAAJE/S_-ZgHeHYmI/s1600/001.png'/></a>
<div class='caption'>الكرة الارضية ابداع</div></li> 
<li class='slide'><img src='http://2.bp.blogspot.com/-XfGsQv-vYSs/UJLS2yO0vZI/AAAAAAAAAJc/YZmkWAnbkhg/s1600/003.png'/></li> 
<li class='slide'><img src='http://1.bp.blogspot.com/-ZZAYCMSAqYw/UJLSiyYgBNI/AAAAAAAAAJU/LtNzOgEoG7Q/s1600/001.png'/>
<div class='caption'>الحياة ألوان وحياتي عالم من ألواني</div></li> 

شرح الكود : 
  • الاحمر لتعديل رابط الموضوع .
  • الاخضر في الكود لتعديل  رابط الصورة .
  • الازرق لتعديل عنوان الموضوع .
  • البرتقالي إبحث عن هذا الكود .
 ملاحظة  : يجب ان تكون ابعاد الصورة >> 606 PX في العرض × 400 PX في الارتفاع.

تخصيص القائمة المنسدلة :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير HTML. إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :
<ul class='sfmenu' id='menu-main'>
 <li class='icon-home'><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>
 <li><a href='#'>Category 1</a></li>
 <li><a href='#'>Category 2</a>
<ul class='sub-menu'>
 <li><a href='#'>This is a dropdown</a></li>
 <li><a href='#'>This is a dropdown</a>
<ul class='sub-menu'>
 <li><a href='#'>This is a dropdown</a></li>
 <li><a href='#'>This is a dropdown</a></li>
 </ul>

شرح الكود :
  • الاحمر لتعديل فتح الروابط الخارجية في صفحة مستقلة.
  • الاخضر لتعديل عنوان الصفحة.
  • البرتقالي إبحث عن هذا الكود.
ملاحظة : القائمة مع التوافق التام  مع المتصفح انترنت اكسبلورر, جوجل كروم, موزيلا فير فوكس.

تخصيص اللوجو :
اللوجو كمعظم القوالب يتم التحكم فيه عن طريق أداة ' رأس الصفحة ' .

تخصيص أداة تابعنا على المواقع الاجتماعية :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير HTML. إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :
<h2>تابعنا</h2>
<ul class='clearfix'>
 <li class='social-twitter'><a class='social-icon' href='#' title='Twitter'><img alt='Twitter' src='https://lh3.googleusercontent.com/-K6wJX9nRIF8/UIZQmqRKEUI/AAAAAAAAEZ8/BhlnKHxLJGA/s32/twitter.png'/></a></li>

شرح الكود :
  • الاحمر لتعديل رابط صفحتك.
  • الاخضر لتعديل عنوان الأداة.
  • البرتقالي إبحث عن هذا الكود.
تخصيص تعريف بالكاتب :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير HTML. قم بتوسيع قوالب عناصر واجهة المستخدم،
إبحث الآن إلى أسفل إلى حيث ترى الكود التالي : ( إستخدم أداة البحث Ctrl + F ) , ستجد ما يلي :

<div class='boxframe' id='single-author'>
<h3 class='heading-border'><span>الكاتب</span></h3>
<div id='author-image'>
<a href='#'><img class='avatar avatar-60 photo' height='60' src='https://lh3.googleusercontent.com/-e0KW83YBPEI/UFOx8lHRJJI/AAAAAAAACLw/OvFN6oY8lSI/s168/Capture.png' width='60'/></a>
</div> 
<div id='author-bio'>
<h4> بقلم <a href='#'> العماد </a></h4>
<p>غالبا&#1611; ما يفشل معظم الناس في الحديث عند التعريف بأنفسهم&#1548; ويعجبني في هذا المقام أن أنضم لمعظم الناس&#1548; فقد حاولت استفزاز نرجسيتي أكثر من مرة لمعرفة من أنا&#1548; أو على الأقل لأفتح المجال أمام (الأنا) لتعب&#1617;ر عن ذاتها , صدقا&#1611; لم أجد الكثير لأخطه عن نفسي&#1548; إلا بعض عادات أداوم بين الفينة والأخرى على فعلها&#1548; وشخصيات أحب تبني أفكارها وآرائها&#1548; وأعتقد أن الإنسان يعرف بأقرانه&#1548; ومن خلال اهتماماته يمكنك سبر أغواره&#1548; ربما هي طريقة جميلة أن تعرفني من خلال ما أحب وما أكره&#1548; يمكنكم متابعتي والتواصل معي على صفحتي بتويتر <a href='https://twitter.com/ALEMAD5'>@ ALEMAD5</a> أو عبر الفيسبوك  <a href='http://www.facebook.com/emad.albaadri'>AL EMAD</a></p>
</div> 

شرح الكود :

المعلومات التي تحتاج إلى تغييرها هي تلك الملونة ، إسم الإضافة ’’الكاتب ‘‘ في السطر الأول .
رابط صفحة السيرة الذاتيه أن وجد لون , لتغير رابط الصورة المصغرة لصاحب المدونة لون , لتغير اسم صاحب المدونة لون 
لاضافة نبدة مختصرة عن صاحب المدونة لون , رابط صفحتك ع موقع تويتر لون , اسم حسابك ع تويتر لون , رابط صفحتك ع الفيسبوك لون , اسم حسابك ع الفيسبوك لون .

تخصيص الصور في بداية التدوينات :

أنا شخصيا أحببت أن أحافظ على هذه الصور في جميع مقالاتي و لمن يريد عمل ذلك أيضا فإن قياس الصور هو 200×303 .
الصور هي الشيء الوحيد الذي يتم تنسيقه أوتوماتيكيا في صفحات عرض التدينات و ذلك إستنادا إلى كود جي كويري ، و هو لا يصلح على الفيديوهات.

م / كنوز مدونتي
Share this article :

0 التعليقات:

Speak up your mind

Tell us what you're thinking... !

 
Design by Creating Published by Mas Template