الشخصية والاجتماعية وغيرها من المواضيع يتميز هذا القالب بخاصيتي الهادئ بثلاث أعمدة ، عمود للأدوات المضافة ، و عمودين لعرض التدوينات بطريقة جميلة ، كما أن كود "إقرأ المزيد" مدرج في هذا القالب وإضافة ترقيم الصفحات مدمجة ايضاً والراقي فبساطته في ألوانه خلفية رمادية وتصميمه زادت من جاذبيته القالب سهل التعامل و التحكم وللمشاهد الحكم على ذلك ..،
FitnessMag
- هيدر مقسم إلى قسمين متقايسين في العرض ، قسم يحتوي على لوغو المدونة ، و القسم الآخر على مساحة إعلانية من قياس 60×468 قائمة أفقية جميلة ، تحتوي على أزرار ، و بالجانب مربع البحث الداخلي .
- ثلاث أعمدة ، عمود للأدوات المضافة ، و عمودين لعرض تصطف التدوينات مثنى مثنى و هذا أكثر ما يميز القالب .
- قائمة جانبية عادية ، تحتوي على أداة ' تابعنا على المواقع الاجتماعية ' المتميزة .
- فوتر ستكون من ثلاث أعمدة متقايسة في العرض و الإرتفاع ، تصلح لبعض الأدوات الترويجية كصندوق الفيسبوك أو تويتر.
- خلفية رمادية تجعل القالب هادئ و مريح للعين .
- سلايد شو احترافي لعرض المواضيع المميزة في المدونة .
- يوجد في أسفل كل تدوينة صندوق للتعريف بالكاتب ، سنرى طريقة تعديله في الجزء التالي .
- يوجد أسفل كل تدوينة إضافة مقالات ذات صلة بتنسيق CSS جميل .
تخصيص السلايد شو :
الدخول إلى لوحة التحكم -> تخطيط -> تحرير HTML. قم بتوسيع قوالب عناصر واجهة المستخدم .
( إستخدم أداة البحث Ctrl + F ) إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :
الدخول إلى لوحة التحكم -> تخطيط -> تحرير HTML. قم بتوسيع قوالب عناصر واجهة المستخدم .
( إستخدم أداة البحث 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/AVvXsEgPjIbTNpj1B1gqdC8h46L_oXCabp0b6kTgbRJatZodw4jreBWXQS8yGAQo6NpGUeAIM4FSC4fAYsdLVVoxrBAH00AICxvZA1ju7bj1gavx4hQIzjmJd70A2RZ8m-jZI2_KHZ8xn8Jz_wU3/s1600/001.png'/></a>
<div class='caption'>الكرة الارضية
ابداع</div></li>
<li class='slide'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaF9qlkTqtAFhouiH_Z67dQbA1NYxefky2d7JzfiLwQb2TLoliwiiL3Sf_dVvRgI0fYwaetM6BIEgEFIrWOu4xvfr6cdlubb5fuY_5re_LUxAfxII2vFbUxHuzaDU2TWADhvOGuidyHR8G/s1600/003.png'/></li>
<li class='slide'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KxdYRH2kNW6UT9bebBhrdC_9Bz5znjTtrOQxg8YYkpTEUVdRoH7z_m2eGehpeCiwpYxJngi5r0Crq_EV4TZA2PgAhXKbcJPjv-vv3fPgxoPNO_V_mB0l1CVc_rhmLmHRYkEly7gh6p5_/s1600/001.png'/>
<div class='caption'>الحياة ألوان
وحياتي عالم من ألواني</div></li>
شرح الكود :
- الاحمر لتعديل رابط الموضوع .
- الاخضر في الكود لتعديل رابط الصورة .
- الازرق لتعديل عنوان الموضوع .
- البرتقالي إبحث عن هذا الكود .
ملاحظة :
يجب ان تكون ابعاد الصورة >> 606 PX في العرض × 400 PX في الارتفاع.
تخصيص القائمة المنسدلة :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير HTML. إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :
تخصيص القائمة المنسدلة :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير 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. إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :
تخصيص اللوجو :
اللوجو كمعظم القوالب يتم التحكم فيه عن طريق أداة ' رأس الصفحة ' .
تخصيص أداة تابعنا على المواقع الاجتماعية :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير HTML. إبحث الآن إلى أسفل إلى حيث ترى الكود التالي :
<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/AVvXsEjPlFfgkLdOJDf6981aHA64XZzNfV7xUr3nRJ2NhbzH0uIf3q_2urPKjJoT3fcjciShyphenhyphenFfM02FMx2asmBJbHH8B7-LuqxlKM46JDnzNRnFphxlMQ5DSL-0V1yjLAAoJvIQtq393amCGXsUk/s32/twitter.png'/></a></li>
شرح الكود :
- الاحمر لتعديل رابط صفحتك.
- الاخضر لتعديل عنوان الأداة.
- البرتقالي إبحث عن هذا الكود.
تخصيص تعريف بالكاتب :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير HTML. قم بتوسيع قوالب عناصر واجهة المستخدم،
إبحث الآن إلى أسفل إلى حيث ترى الكود التالي : ( إستخدم أداة البحث Ctrl + F ) , ستجد ما يلي :
الدخول إلى لوحة التحكم المدون -> تخطيط -> تحرير 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJLuhTLqlnwKYvpZGGzw2vvIaK8hrt4Fu5QRlQbHy6thOzigk6bjDvz2naOLwHgrt_K9cNC3iEIoBZTrtNGoc2Q11vt1VDOBM1k1YteYNUVpNWyVsqn6RxRQm56uwwJtjvTFTLOrdkZus/s168/Capture.png' width='60'/></a>
</div>
<div id='author-bio'>
<h4> بقلم <a href='#'> العماد </a></h4>
<p>غالباً ما يفشل معظم
الناس في الحديث عند التعريف بأنفسهم، ويعجبني في هذا المقام أن
أنضم لمعظم الناس، فقد حاولت استفزاز نرجسيتي أكثر من مرة لمعرفة
من أنا، أو على الأقل لأفتح المجال أمام (الأنا)
لتعبّر عن ذاتها , صدقاً لم أجد الكثير لأخطه عن
نفسي، إلا بعض عادات أداوم بين الفينة والأخرى على
فعلها، وشخصيات أحب تبني أفكارها وآرائها، وأعتقد أن
الإنسان يعرف بأقرانه، ومن خلال اهتماماته يمكنك سبر
أغواره، ربما هي طريقة جميلة أن تعرفني من خلال ما أحب وما
أكره، يمكنكم متابعتي والتواصل معي على صفحتي بتويتر <a href='https://twitter.com/ALEMAD5'>@ ALEMAD5</a> أو عبر الفيسبوك <a href='http://www.facebook.com/emad.albaadri'>AL EMAD</a></p>
</div>
شرح الكود :
المعلومات التي تحتاج إلى تغييرها هي تلك الملونة ، إسم الإضافة ’’الكاتب ‘‘ في السطر الأول .
رابط صفحة السيرة الذاتيه أن وجد لون , لتغير رابط الصورة المصغرة لصاحب المدونة لون , لتغير اسم صاحب المدونة لون
لاضافة نبدة مختصرة عن صاحب المدونة لون , رابط صفحتك ع موقع تويتر لون , اسم حسابك ع تويتر لون , رابط صفحتك ع الفيسبوك لون , اسم حسابك ع الفيسبوك لون .
تخصيص الصور في بداية التدوينات :
المعلومات التي تحتاج إلى تغييرها هي تلك الملونة ، إسم الإضافة ’’الكاتب ‘‘ في السطر الأول .
رابط صفحة السيرة الذاتيه أن وجد لون , لتغير رابط الصورة المصغرة لصاحب المدونة لون , لتغير اسم صاحب المدونة لون
لاضافة نبدة مختصرة عن صاحب المدونة لون , رابط صفحتك ع موقع تويتر لون , اسم حسابك ع تويتر لون , رابط صفحتك ع الفيسبوك لون , اسم حسابك ع الفيسبوك لون .
تخصيص الصور في بداية التدوينات :
أنا شخصيا أحببت أن أحافظ على هذه الصور في جميع مقالاتي و لمن يريد عمل ذلك أيضا فإن قياس الصور هو 200×303 .
الصور هي الشيء الوحيد الذي يتم تنسيقه أوتوماتيكيا في صفحات عرض التدينات و ذلك إستنادا إلى كود جي كويري ، و هو لا يصلح على الفيديوهات.
م / كنوز مدونتي
إرسال تعليق