بسم الله الرحمن الرحيم

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

والآن الخطوات:

*لا تنسى أن تقوم بحفظ نسخة احتياطية للقالب،تجنباً لحدوث أخطاء.


اذهب إلى لوحة تحكم مدونتك.
ثم اضغط على قالب>>تحرير HTML.

ابحث عن ]]>
ثم ضع الكود التالي فوقه مباشره (قبله):

.MyWeatherDiv .centerContainer { width: 300px; text-align: left; margin-bottom: 200px; } .green { color: #a6e22d; } .teal { color: #66d9ef; } .purp { color: #ae81ff; } .pink { color: #f92772; } .yellow { color: #e6db74; } .white { color: #f8f8f2; } .grey { color: #616161; } .f12 { font-size: 12px; } .MyWeatherDiv img { height: 64px; width: 64px; } .weatherInfoRight { z-index: 999; position: fixed; top: 10px; right: 10px; } .weatherInfoLeft { z-index: 999; position: fixed; top: 10px; left: 10px; } .weatherInfoBottomRight { z-index: 999; position: fixed; bottom: 10px; right: 10px; } .weatherInfoBottomLeft { z-index: 999; position: fixed; bottom: 10px; left: 10px; } .MyWeatherDiv { display: none; background-color: #272822; padding: 5px; -webkit-border-radius: 10px; border-radius: 10px; } .MyWeatherInfo { text-align: center; font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif; color: white; font-size: 14px; } #divMyImage { display: none; } .MyWeatherClose { font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif; cursor: pointer; position: absolute; right: 10px; color: white; font-size: 20px; } .MWTemperature { display: block; } .MWPlace { display: block; } .MWIP { display: block; } #clear-day { display: none; } #clear-night { display: none; } #partly-cloudy-day { display: none; } #partly-cloudy-night { display: none; } #cloudy { display: none; } #rain { display: none; } #sleet { display: none; } #snow { display: none; } #wind { display: none; } #fog { display: none; }


ثم ابحث عن
وضع الكود التالي فوقه مباشره:




بعد ذلك ابحث أيضاً عن
وضع قبله الكود الآتي:





والآن قم بحفظ القالب.

يمنع نقل الرابط بدون ذكر المصدر

المصدر: إضافة أداة حالة الطقس بلوجر - Blogger In Arabic بلوجر بالعربية