قالب مدونة عاشق النت أصبح متوفر للجميع

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

الفهرس

تحميل القالب
1. مواصفات القالب و مميزاته .
2. تركيب القالب و تنظيمه .
3. خدع التنسيق للتحكم الجيد في القالب .

---

مواصفات القالب و مميزاته .

القالب الذي بين أيدينا ليس معربا أو معدلا عن قالب آخر ، إنه من تصميمي الشخصي بأكمله ، و هو قالب من صنف FixedWidth أي ذو عرض ثابث لا يتغير بتغير أبعاد شاشة المستخدم ، أكثر ما يميزه هو طريقة عرض التدوينات و ألوانه الفاقعة .

صور للقالب : الصفحة الرئيسية | صفحة التدوينة | صفحة عرض التصنيفات | البنية الداخلية للقالب

مواصفات القالب :

1. هيدر مقسم إلى قسمين متقايسين في العرض ، قسم يحتوي على لوغو المدونة ، و القسم الآخر على مساحة إعلانية من قياس 60×468 .
2. قائمة أفقية جميلة ، تحتوي على أزرار مصممة بتقنية الـCSS فقط ، و بالجانب مربع البحث الداخلي .
3. مقطع خاص يظهر في الرئيسية فقط يصلح للكلمات في المناسبات كـ( رمضان مبارك سعيد ) | الصورة .
4. تصطف التدوينات مثنى مثنى بحيث تظهر أحذث تدوينة كبيرة و بارزة ، و هذا أكثر ما يميز القالب .
5. قائمة جانبية عادية ، تحتوي على أداة ' التدوينات الشائعة ' المتميزة بتأثيرات الجي كويري - واجهة المستخدم .
6. يتكون الفوتر من ثلاث أعمدة متقايسة في العرض و الإرتفاع ، تصلح لبعض الأدوات الترويجية كصندوق الفيسبوك أو تويتر .
7. الصور الخاصة بتصميم القالب تم تحويلها إلى بيانات Data URI ، للتخفيف من عدد طلبات الـhttp و تسريع تحميل المدونة .
8. يوجد في أسفل كل تدوينة صندوق للتعريف بالكاتب ، يصلح للمدونات الجماعية ، سنرى طريقة تعديله في الجزء التالي .
9. يوجد أسفل كل تدوينة زر ( طباعة المقال ) الخاص بخدمة Print Friendy & PDF ، و أربع أزرار للمواقع الإجتماعية الأكثر شهرة في العالم : غوغر بلس ، فيسبوك ، تويتر ، و الخدمة الصاعدة ثبث .
10. يوجد أسفل كل تدوينة مساحة إعلانية أخرى من قياس 60×468 .
11. يوجد أسفل المساحة الإعلانية السابقة إضافة مقالات ذات صلة بتنسيق CSS جميل .

---

تركيب القالب و تنظيمه .

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

تحميل القالب

تخصيص اللوغو :
اللوغو كمعظم القوالب يتم التحكم فيه عن طريق أداة ' رأس الصفحة ' ، و للحصول على لوغو متناسب مع عروض الهيدر فإنه يجب إعطاع اللوغو القياس 128×470 .

التعريف بالكاتب :

1. توجه إلى اللوحة الرئيسية ← تصميم ← تحرير HTML  في الواجهة القديمة أو  اللوحة الرئيسية ← قالب ← تحرير HTML في الواجهة الجديدة .
2. قم بتوسيع قوالب عناصر واجهة المستخدم .
3. إبحث عن <div id='author'> ( إستخدم أداة البحث Ctrl + F ) .

ستجد ما يلي :

<b:if cond='data:post.author == &quot;عاشق النت&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='author'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFbnJXpDpcmIwaN2_JLwcJURTYzzASXy8VaEaydZYRCi6ZxSStzeiLI6PVc5fNlDQzGV2c_N1RH3TOwaWLXDy5oBDOsMvDW7xmMiTmJb0Y52GDkb0-TDt10-LaxC8ylvEU7YEVjapAlw/h120/me.jpg' style='padding: 3px;border: 1px solid #CCC;background: white;float: right;width: 90px;height: 90px;margin: 0 0 0 10px;'/>
<h2 style='margin: 5px 0;font-weight: 500;text-decoration: underline;'>بقلم عاشق النت</h2>
عاشق النت : إسم على مسمى &#1548; أعشق كل ما له علاقة بالويب و الإنترنت 
<div style='clear:both'/>
</div>
</b:if></b:if>

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

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

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

الإعلان أسفل التدوينة :
قبل مغادرة صفحة تحرير HTML القالب ، إبحث عن <!-- Code Adsense --> و ضع مكانه كود الإعلان الخاص بك .

---

خدع التنسيق للتحكم الجيد في القالب .

أقدم لكم بعض التقنيات العجيبة التي ستذهلكم في القالب . يتوفر القالب على خصائص CSS تساعد الكاتب على تنسيق مواضيعه ، كإضافة الأزرار الملونة و الديناميكية ، و إضافة صندوق الأكواد  و غيرها .

الأزرار
هناك أربع أشكال من الأزرار الديناميكية ، الزر الأبيض و هو الزر العادي ، الزر الأحمر ، و الأزرق ، ثم البرتقالي .

طريقة إدخال الأزرار بسيطة للغاية ، فأثناء التدوين و بعد إنشاء رابط ما ، نُحول إلى الـHTML حيث ستجد أن رابطك عبارة عن عنصر <a> .

و لجعل مظهره مثل الزر نضيف سمة التعريف بالكلاس بالقيم التالية :

<a class="button" src="...">الزر الأبيض</a>    الزر الأبيض

<a class="blueButton" src="...">الزر الأزرق</a>   الزر الأزرق

<a class="redButton" src="...">الزر الأحمر</a>   الزر الأحمر

<a class="orangeButton" src="...">الزر البرتقالي<a>   الزر البتقالي

<a class="button down" src="...">زر التحميل<a>   زر التحميل

زر التحميل هو نفسه الزر الأبيض ، لكم مع إضافة القيمة down تزداد أيقونة التحميل في الزر ، و هذه التقنية لا تصلح مع الأزرار الأخرى .

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

فقبل كتابة الأكواد نُحول إلى HTML و نكتب ما يلي :

<div dir="ltr" class="codeBox"> الأكواد هنا </div>

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

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

هذا كل شيء عن القالب و أتمنى أن تستخدموه في ما يرضي الله سبحانه و تعالى ، و أكره أن يتم التلاعب بحقوق القالب .