الدرس الخامس
افكار و حيل متنوعه لتخصيص مظهر المدونه
فى الدرس السابق بدأنا فى التعامل مع مولد التصاميم الجديد لبلوجر الذى يمكنك من الحصول على شكل رائع و مميز
بدون الحاجه الى خبره برمجيه او تعقيد
اليوم بمشيئه الله سنستكمل الدرس السابق و نغير مظهر المدونه تماما بمجموعه من الأفكار المتنوعه
لا تقلد ما يتم طرحه و تميز دائما
تذكر دائما اخذ نسخه احتياطيه قبل القيام بأى تغيير
تغيير ايقونه المدونه
ما هى ايقونه المدونه ؟
ببساطه شديده هى الصوره الصغيره التى تظهر بجوار رابط الموقع فى شريط المتصفح
ثانيا:- يجب ان تكون ابعاد الصوره 16 x 16
او اكبر بقليل
اذا لم تظهر على الفور لا تقلق حدث الصفحه
و ان لم تظهر فلن تتأخر عن يوم
ازاله شريط بلوجر اعلى المدونه
فى كل مدونات بلوجر يظهر شريط علوى سنزيله لأعطاء طابع احترافى على المدونه
معاينه قبل الأزاله
و بعد الأزاله
نلاحظ اختفاء الشريط العلوى
لا تنسى اخذ نسخه احتياطيه قبل اى تغييرات
من لوحه التحكم نختار قالب ثم نختار تحرير html
تابع الصور
اضغط على متابعه
اختر توسيع العناصر
ابحث عن كود
body {
و اضف فوقه مباشره
/* === hide the navbar === */ .navbar { visibility:hidden; display: None; } /* === hide the navbar === */
ثم اضغط على حفظ النموذج و لاحظ الفارق
مشكله التصغير التلقائى للصور الكبيره
معاينه للمشكله
و نلاحظ خروج الصوره بشكل كبير عن المدونه
لحل هذه المشكله نتوجه الى
لوحه التحكم نختار قالب ثم نختار تحرير html
و نبحث عن الكود التالى
]></b:skin>
و نضع فوقه مباشره
و اخيرا و ليس اخرا
ينتهى الى هنا درس اليوم
القاكم فى الدرس القادم
ضبط اضافات المدونه بلوجر
تحياتى دائما
ببساطه شديده هى الصوره الصغيره التى تظهر بجوار رابط الموقع فى شريط المتصفح
ما هي فائدة favicon للمدونه ؟
الصوره المميزه تجذب الأنظار الى مدونتك كما تعطي انطباع افضل لزائري المدونه , فهو بمثابة ماركة مسجلة تذكر الزوار بالمدونه ومضمونه وتجعله يبدو اكثر حرفية .
الصوره المميزه تجذب الأنظار الى مدونتك كما تعطي انطباع افضل لزائري المدونه , فهو بمثابة ماركة مسجلة تذكر الزوار بالمدونه ومضمونه وتجعله يبدو اكثر حرفية .
كيف اضيف favicon للمدونتى ؟
فى السابق كنا نلجأ الى بعض الأكواد التى تقوم بهذه المهمه و لكن اليوم هناك طرقه اسهل و أأمن لفعل ذلك .
اولا:- يجب ان تكون الصوره بالأمتداد ico. و لو عجزت عن تحويلها فاستخدم الموقع الآتى : Online ICO converter
فى السابق كنا نلجأ الى بعض الأكواد التى تقوم بهذه المهمه و لكن اليوم هناك طرقه اسهل و أأمن لفعل ذلك .
اولا:- يجب ان تكون الصوره بالأمتداد ico. و لو عجزت عن تحويلها فاستخدم الموقع الآتى : Online ICO converter
او اكبر بقليل
و بعد الضغط على تحويل
و هكذا اصبح لدينا الصوره بالأمتداد المطلوب
بعد ذلك و من لوحه تحكم المدونه ندخل الى تخطيط
و من اعلى اليسار نختار تحرير كما الصوره
و من الصوره التاليه نختار مكان الصوره التى حولناها سابقا
و نضغط على حفظ
نلاحظ ظهور الصوره
بالعوده الى التخطيط
نلاحظ تغيير ايقونه المدونه
اذا لم تظهر على الفور لا تقلق حدث الصفحه
و ان لم تظهر فلن تتأخر عن يوم
ازاله شريط بلوجر اعلى المدونه
فى كل مدونات بلوجر يظهر شريط علوى سنزيله لأعطاء طابع احترافى على المدونه
معاينه قبل الأزاله
و بعد الأزاله
نلاحظ اختفاء الشريط العلوى
لا تنسى اخذ نسخه احتياطيه قبل اى تغييرات
من لوحه التحكم نختار قالب ثم نختار تحرير html
تابع الصور
اضغط على متابعه
اختر توسيع العناصر
ابحث عن كود
body {
و اضف فوقه مباشره
/* === hide the navbar === */ .navbar { visibility:hidden; display: None; } /* === hide the navbar === */
ثم اضغط على حفظ النموذج و لاحظ الفارق
مشكله التصغير التلقائى للصور الكبيره
معاينه للمشكله
و نلاحظ خروج الصوره بشكل كبير عن المدونه
لحل هذه المشكله نتوجه الى
لوحه التحكم نختار قالب ثم نختار تحرير html
و نبحث عن الكود التالى
]></b:skin>
و نضع فوقه مباشره
.post img { max-width: 540px; width: expression(this.width > 540 ? 540: true); }
غير الأرقام الموجوده بالكود الى المناسبه لمدونتك
للمعاينه بعد التطبيق
معاينه مباشره للمدونه من هنا
غير الأرقام الموجوده بالكود الى المناسبه لمدونتك
للمعاينه بعد التطبيق
معاينه مباشره للمدونه من هنا
و اخيرا و ليس اخرا
ينتهى الى هنا درس اليوم
القاكم فى الدرس القادم
ضبط اضافات المدونه بلوجر
تحياتى دائما
0 التعليقات:
إرسال تعليق
لمزيد من المواضيع فى مجال التدوين و غيره زورونا فى بوابه انجاز التقنيه