حصريا القالب الاحترافى FitnessMag معرب على ميديافاير

السـلام عليكم ورحمة الله وبركـاتة

اليـوم سـاضـع لكم قالب "FitnessMag" احترافى 

معرب للمدونة على مركز الخليج

معاينة القالب  تحميل القالب

$ مميزات القالب $

1- هيدر مقسم إلى قسمين متقايسين في العرض ، قسم يحتوي على لوغو المدونة 

 و القسم الآخر على مساحة إعلانية من قياس 60×468 قائمة أفقية جميلة 

تحتوي على أزرار ، و بالجانب مربع البحث الداخلي .
2- ثلاث أعمدة ، عمود للأدوات المضافة ، و عمودين لعرض تصطف التدوينات 

مثنى هذا أكثر ما يميز القالب .
3- قائمة جانبية عادية ، تحتوي على أداة ' تابعنا على المواقع الاجتماعية ' 

المتميزة مثل الفيس بوك وتويتر وغيرها  .
4- فوتر يتكون من ثلاث أعمدة متقايسة في العرض و الإرتفاع ، تصلح لبعض 

الأدوات الترويجية كصندوق الفيسبوك أو تويتر.
5- خلفية رمادية تجعل القالب هادئ و مريح للعين .
6- سلايد شو احترافي لعرض المواضيع المميزة في المدونة .
7- يوجد في أسفل كل تدوينة صندوق للتعريف بالكاتب ، سنرى طريقة تعديله 

في الجزء التالي من الشرح التعديل .
8- يوجد أسفل كل تدوينة إضافة مقالات ذات صلة بتنسيق CSS جميل .

$ عيوب القالب $

# لا يوجد بالقالب سوا عيوب بسيطة ويمكنك اصلاحها بسهولة 

$ تعديل القالب $

الدخول إلى لوحة التحكم -> تخطيط -> تحرير HTML. قم بتوسيع قوالب عناصر واجهة المستخدم .

1- تخصيص السلايد شو :-

( إستخدم أداة البحث Ctrl + F ) إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :

<div class='flexslider' id='slider'>

<ul class='slides'>

<li class='slide'><a href='#' target='_self'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSqGtz0saj7Uz9yWbuF8HE8spizV9IbHx7wwBCWpWVLuFeNehR08ycXAe3-nlpmk0VNorhqJsO2BjDoopITpnouVhQN0juVqkSsN51ZOXu9rNYeRZ3Iub_DHqXphcsugZsetrP_fCt6pw/s1600/001.png'/></a>

<div class='caption'>الكرة الارضية ابداع</div></li> 

<li class='slide'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDZ1S2188be_Pj5AV5m_y__Xj3oXGK7vxiTJkHxfxYBoM81XZbhVZ6y8ekyo94wtX33YUcxZNoR21Ignk43gd-jWyqqJd2ua6q9l-5-ejgn-xxzwEfkjpzCQ-t1fAKr4Cb4n0mEZovHAGC/s1600/003.png'/></li> 

<li class='slide'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1KECRyRTiauwgUzysZpm3zTxGvWiAxruPFldAIjV9FnpKXM4Zk3alq5pIBstszyR0ksd47V9-YhkkraLW1nRyHyMQAJmSctk-h5GwbVfCRRs_H6lhRK2q5JPbV8UA1SAgH96tJNLFHxbk/s1600/001.png'/>

<div class='caption'>الحياة ألوان وحياتي عالم من ألواني</div></li> 

شرح الكود :

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

 ملاحظة  : يجب ان تكون ابعاد الصورة >> 606 PX في العرض × 400 PX في الارتفاع.

2- تخصيص القائمة المنسدلة :-

( إستخدم أداة البحث Ctrl + F ) إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :

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

شرح الكود :

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

ملاحظة : القائمة مع التوافق التام  مع المتصفح انترنت اكسبلورر, جوجل كروم, موزيلا فير فوكس.

3- تخصيص اللوجو :-

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

4- تخصيص أداة تابعنا على المواقع الاجتماعية :-

( إستخدم أداة البحث Ctrl + F ) إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :

<h2>تابعنا</h2>

<ul class='clearfix'>

 <li class='social-twitter'><a class='social-icon' href='#' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVRSIptv3DL7Ik5dyiJvmvrZWgHand9LQ6wwffzCCXljd1xe9fEHnX5ynl-a7SHmiv0-hxX-WlbUdeGB9win_3WzOTHXN3ewb6GJGgzmvpRl3EA9ixVQsTOxDBJTb1rwvQfpz8bfhoFVVK/s32/twitter.png'/></a></li>

شرح الكود :

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

  5- تخصيص تعريف بالكاتب :-

( إستخدم أداة البحث 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2vxAuL7nv_yZPyfcp17Fv8CJMsq_guG3OU1FAi_v-HuLYDVP73Zh6kXWlAwjgnyhniQ_aC34coh8tQvl5u98DUHMKhyphenhyphenrhs_vO3vk1U8liEhMP2XD9hTB6jqqEvZLWRisfy0dxkNpdsgU/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> 

شرح الكود : 

• لتغيير اسم الاضافة " الكاتب " فى السطر الاول .
• اللون : لتغييير رابط صفحة السيرة الذاتية.
• اللون : لتغيير رابط الصورة المصغرة لصاحب المدونة .
• اللون : لتغيير اسم صاحب المدونة.
• اللون : لاضافة نبذة عن صاحب المدونة.
• اللون : رابط صفحتك على موقع تويتر.
• اللون : رابط صفحتك على موقع فيس بوك.

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

لتغير الصور فى المقالات ، قم بوضع صورة بمقياس 200 * 303 

$ انتهــــــى $

هل أعجبك الموضوع ؟

بقلم عبدالرحمن جابر

عربي الهوية مصرى الجنسية ، عندى 19 سنة ، احب الانترنت بجميع مجالاتة واشارككم تجاربى فى هذة المدونةالفيسبوك . تويتر . جوجل بلس