الدرس الرابع ( عمل مدونة ناجحة 2013 )

رابط الدرس السابق http://adf.ly/OUGgI

الدرس الخامس افكار و حيل متنوعه لتخصيص مظهر المدونه

الدرس الخامس

افكار و حيل متنوعه لتخصيص مظهر المدونه

فى الدرس السابق بدأنا فى التعامل مع مولد التصاميم الجديد لبلوجر الذى يمكنك من الحصول على شكل رائع و مميز
بدون الحاجه الى خبره برمجيه او تعقيد
اليوم بمشيئه الله سنستكمل الدرس السابق و نغير مظهر المدونه تماما بمجموعه من الأفكار المتنوعه
لا تقلد ما يتم طرحه و تميز دائما
تذكر دائما اخذ نسخه احتياطيه قبل القيام بأى تغيير



تغيير ايقونه المدونه

ما هى ايقونه المدونه ؟

ببساطه شديده هى الصوره الصغيره التى تظهر بجوار رابط الموقع فى شريط المتصفح

ما هي فائدة favicon للمدونه ؟


الصوره المميزه تجذب الأنظار الى مدونتك كما تعطي انطباع افضل لزائري المدونه , فهو بمثابة ماركة مسجلة تذكر الزوار بالمدونه ومضمونه وتجعله يبدو اكثر حرفية .

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 650x40 .

كيف اضيف favicon للمدونتى ؟


فى السابق كنا نلجأ الى بعض الأكواد التى تقوم بهذه المهمه و لكن اليوم هناك طرقه اسهل و أأمن لفعل ذلك .


اولا:- يجب ان تكون الصوره بالأمتداد ico. و لو عجزت عن تحويلها فاستخدم الموقع الآتى : Online ICO converter

ثانيا:- يجب ان تكون ابعاد الصوره 16 x 16
او اكبر بقليل

اتبع الصور

ادخل الى الموقع التالى
Online ICO converter

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 805x434 .

و بعد الضغط على تحويل



و هكذا اصبح لدينا الصوره بالأمتداد المطلوب

بعد ذلك و من لوحه تحكم المدونه ندخل الى تخطيط
و من اعلى اليسار نختار تحرير كما الصوره

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 1232x443 .

و من الصوره التاليه نختار مكان الصوره التى حولناها سابقا
و نضغط على حفظ
نلاحظ ظهور الصوره



بالعوده الى التخطيط
نلاحظ تغيير ايقونه المدونه

اذا لم تظهر على الفور لا تقلق حدث الصفحه
و ان لم تظهر فلن تتأخر عن يوم



ازاله شريط بلوجر اعلى المدونه

فى كل مدونات بلوجر يظهر شريط علوى سنزيله لأعطاء طابع احترافى على المدونه

معاينه قبل الأزاله

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 871x197 .

و بعد الأزاله
نلاحظ اختفاء الشريط العلوى

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 900x212 .

لا تنسى اخذ نسخه احتياطيه قبل اى تغييرات

من لوحه التحكم نختار قالب ثم نختار تحرير html

تابع الصور

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 618x445 .

اضغط على متابعه

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 714x288 .

اختر توسيع العناصر

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 752x530 .

ابحث عن كود

body {

و اضف فوقه مباشره

/* === hide the navbar === */ .navbar { visibility:hidden; display: None; } /* === hide the navbar === */

ثم اضغط على حفظ النموذج و لاحظ الفارق





مشكله التصغير التلقائى للصور الكبيره

معاينه للمشكله
و نلاحظ خروج الصوره بشكل كبير عن المدونه

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 1240x583 .

لحل هذه المشكله نتوجه الى
لوحه التحكم نختار قالب ثم نختار تحرير html
و نبحث عن الكود التالى

]></b:skin>

و نضع فوقه مباشره

.post img { max-width: 540px; width: expression(this.width > 540 ? 540: true); }

غير الأرقام الموجوده بالكود الى المناسبه لمدونتك

للمعاينه بعد التطبيق

هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 865x542 .

و اخيرا و ليس اخرا
ينتهى الى هنا درس اليوم
القاكم فى الدرس القادم

الدرس التالى http://adf.ly/OUHpx

التصنيفـات الربح من الانترنت ,انشاء مدونة ناجحة مجاناً