سلسلة تحديث قالب المدونة:تغيير الهيدر لبنر خاص بمدونتك

سلسلة تحديث قالب المدونة:تغيير الهيدر لبنر خاص بمدونتك

إن تصميم قالب كامل لمدونتك يمكنه أن يستغرق أيام أو حتى أسابيع من العمل الشاق لإنهاؤه فماذا لو كان ليس عندك الوقت الكافي أو المعرفة أو حتى ال... 8:06:00 م

إن تصميم قالب كامل لمدونتك يمكنه أن يستغرق أيام أو حتى أسابيع من العمل الشاق لإنهاؤه

فماذا لو كان ليس عندك الوقت الكافي أو المعرفة أو حتى الميل لإكمال مثل هذه المهمة.

وتحت شعار (Take Your Blog To Second Level) أقدم لكم سلسلة دروس تحديث قالب مدونتك يساعدك على صنع قالب جديد وبمميزات القالب الإحترافى .... فيمكنك أن تحول قالب بسيط من القوالب الافتراضية للبلوجر إلى قالب متميز ليبدو موقعك كالمحترفين يتميز بالتفرد بين المدونات في أقل من ساعة بإذن الله ......

ما رأيك بهذا القالب الممل ؟

فهيا معا لنجعله أفضل .......

ماذا أفعل أولا ؟

قبل البدء في تغيير قالبك الحالي برجاء اتخاذ الآتي قاعدة لك :
عمل دعم أو نسخة احتياطية من القالب الحالي(Backup) فقط لإمكانية حدوث أخطاء أثناء تغيير الأكواد والرغبة بالرجوع للقالب القديم ... وذلك عن طريق الآتي :الدخول لحسابك ثم إلى 'customize" أي تخصيص ومن قائمة "Layout" اختر "Edit Html" ومنها اختر "Download Full Template" كما بالصورة التالية :

ستظهر لك نافذة خارجية اضغط على "Save" ثم اختر مكان حفظ القالب لإمكانية استخدامه فيما بعد وسيكون بالطبع بالامتداد "xml"

لنبدأ ......

أولا عليك معرفة عرض الهيدر الخاص بقالب مدونتك الأمر الذي يختلف من قالب إلي آخر ولمعرفة عرض الهيدر ادخل على"Layout" ومنها إلى "Edit Html" وقم بالبحث عن هذه السطر :

#header -wrapper {
Just below this line, you should see the CSS statement for the overall width
of the header. In the default Minima template, this appears as follows:
#header -wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
ومن هذه المعلومات نستخلص أن عرض الهيدر يبلغ 660 بيكسل .والآن من السهل على الذين درسوا الفوتوشوب والبرامج الشبيهة عمل صورة فريدة للهيدر وللذين ليس لديهم الخبرة بمثل هذه البرامج فيمكنهم استخدام العديد من الأدوات المجانية التي تساعدك على بناء هيدر خاص بموقعك مثل أداة Cooltext.com أما أنا وفي المثال الحالي فلقد استعنت وببعض أبحاثي على الشبكة ببعض صور الفيكتور المخصصة للهيدر وقمت بإعادة تحجيمها لتطويعها مع العرض الذي أرغبة .

يمكنك تحميلها من هنا

ويمكنك الاستعانة ببرنامج الفوتوشوب أو أي برنامج بديل يتعامل مع مثل هذا النوع من الصور وعلى سبيل المثال برنامج Gimp المجاني الشبيه ببرنامج الفوتوشوب والذي يؤدي نفس الغرض .

وها هي النتيجة :

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

تبقى الخطوة الأخيرة وهي رفع الصورة ووضعها في هيدر القالب وهي خطوة بسيطة جدا فعليك إتباع الآتي :


من القائمة "Layout" ثم إلي "Page Elements" اضغط على "Edit" أعلى الصفحة مكان عنوان المدونة (Header) .

ستظهر نافذه خارجية إختر من "Browse" مكان الصورة من جهازك لرفعها أو يمكنك اختيار "From The Web" اذا قمت برفع الصورة إلى إحدى المواقع المستضيفة للصور , ثم أمامك اختيارين :

إما وضع الصورة خلف العنوان والتوصيف "Behind title and description" .

إو أن تختار وضع الصورة بدلا من العنوان والتوصيف "Instead of title and description" .

لتكون الصورة النهائية بهذا الشكل ....

وبالأخير نضغط على "Save".

تحديث

إضافة بنر أو صورة للهيدر (للبلوجر بيتا) .

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

من القائمة "Layout" اضغط على "Edit Html" ثم قم بالبحث عن هذا الكود :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>

وقم بعمل هذه التغيرات ليصبح الكود بهذا الشكل :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>

ثم اضغط على "Save Template" ...... وبالطبع يمكنك زيادة الرقم كما تفضل فالمهم زيادة الرقم عن واحد وبذلك يمكنك أن ترى عنصرا جديدا قد أضيف للهيدر وفى نفس الوقت يمكنك إزالة نص الهيدر والوصف ليحل محلة صورة البنر .

أما الآن هناك طريقتان لوضع صورة البنر ورفعها لموقعك

الأولى :

قم بالضغط على "Add Gadget" للهيدر وستظهر لك نافذة خارجية اختر منها صورة أي "Picture"

فإذا كان البنر موجود على جهازك قم بالضغط على "Browse" لاختيار مكان الصورة ورفعها للمدونة .
أما إذا كانت مرفوعة على موقع مستضيف فعليك اختيار "From The Web" لتضع رابط الصورة .

ويمكنك ترك الخيار "Title" و "Caption" فنحن لسنا بحاجة إليهم وبذلك تحصل على صورة بنر خاص بمدونتك غير قابلة للضغط "Unclickable" أما إذا أردت ربط الصورة أو البنر بصفحة البداية لمدونتك فعليك أن تكتب رابط مدونتك أو عنوان صفحة البدء في الخيار "Link" وبذلك تحصل على بنر يشير إلى صفحة البدء لمدونتك "Clickable" .
بقى لنا ضرورة تنشيط الخيار "Shrink to fit" وذلك لتتناسب الصورة وعرض الهيدر المتاح في حالة إذا ما كانت الصورة أكبر بالطبع .

الثانية :

وذلك عن طريق إضافة "Html/Javascript" لعنصر الهيدر عن طريق وضع الكود التالى :

<a href="URL of home page"><img src="picture URL" width="W" alt="" /></a>.
ولا تنسى استبدال "URL of home page" برابط مدونتك وأيضا "Picture URL" برابط الصورة وأخيرا "W" عرض الهيدر.

لينتهى العمل بهذا الشكل :


انتهي.