أقسام المدونة
- أخبار و منوعات
- ادارة المنتديات
- ادارة المواقع Site management
- ادوات و برامج
- البنوك الإلكترونية E-Banks
- التدوين و المدونات Blogger
- الربح من المدونات Blog Money
- المفضلات الجماعية Social Sites
- بيدفرتايزر Bidvertiser
- تحسين نتائج البحث SEO
- تقنيات جلب الزوار Traffic
- تويتر Twitter
- جوجل أدسنس AdSense
- جوجل ادوردز Google Adwords
- دورة تصميم ستايلات بلوجر
- صباح الخير أدسنس
- عروض الاستضافة و الدومينات Domain Names
- فرص للربح من الإنترنت
- قسم أسئلة الزوار Questions
- لقاءات و حوار Publishers Talk
- مواقع تحت الضوء
أرشيف مواضيع المدونة
أدلة مدونات
أضف موقعك إلينا
انسخ هذا الكود و الصقه في موقعك او
مدونتك:
www.adsense-pub.blogspot.com. يتم التشغيل بواسطة Blogger.
الادلة
الدرس 2 : كيف تصنع هيدر احترافي لمدونتك | دورة تصميم ستايلات بلوجر
4:35 ص | مرسلة بواسطة
العربي |
الدرس الماضي شفنا مكونات مدونة بلوجر و من اين يمكننا التعديل على ستايلها بكل سهولة.
و اليوم رح نتعلم صنع هيدر جميل و احترافي في مدونات بلوجر،،
باسم و نتكول على الله،،
1) التصميم بالفتوشوب:
- نختار ابعاد للهيدر (اللوجو) الذي سنقوم بتصميمه
- نختار الوان جميلة و تتناسب مع موضوع المدونة.
- نقوم بتحضير الصور و الايقونات التي سنستخدمها.
و نبدأ بالرسم و الخربشة،،
و مثلا انا طلع لي الهيدر التالي:
جميل جدا، اليس كذلك؟!
(قولوا ايه علشان مزعلش)
* * بعد ذلك انشئ مدونة تجارب،، و اختر هذا الستايل البسيط التالي،،
لانه سيساعدنا على التصميم خاصة للمبتدئين:
==========
2) تركيب الهيدر في المدونة:
-أ- التركيب من جهة عناصر المدونة:
ادخل الى مدونتك و الى عناصر المدونة Layout
ثم اضغط تحرير في منطقة الهيدر (رأس الصفحة)
و بعدين تطلعلك خيارات:
حيث يمكنك ان تقوم برفع الهيدر من جهازك او ان تقوم بوضع وصلة له في حالة انك
رفعته على استضافة صور اخرى.
ثم قم بالاختيار اما تكون الصورة فوق عنوان المدونة و الوصف
او تكون تحت المدونة و الوصف.
ثم اضغط على حفظ و ها قد قمت بتركيبه.
===============
-ب- التركيب من جهة تحرير HTML
و هاذي الطريقة جميلة كذلك و خاصة اذا كنت تفهم في ال CSS
اولا ادخل الى تحرير HTML
و ابحث لنا عن الكود التالي:
#header-wrapper {
و هنا ضع خاصية الخلفية مثل:
background: url(http://yourstite.com/image.jpeg) ;
و استبدل وصلة الصورة بمكان الصورة التي صممتها.
- لون خلفية صورة الهيدر:
اذا كانت صورة الهيدر لديك صغيرة،، فستحتاج الى لون الخلفية + مكان هذه الصورة في الخلفية:
background: #000000 url(http://www.site.com/image.jpeg) no-repeat top right;
حيث:
#000000 لون خلفية الهيدر
http://www.site.com/image.jpeg مكان صورة الهيدر
no-repeat لا نريد تكرير الصورة في الخلفية
top right مكان الصور: اعلى اليمين
==========
تعديل ستايل عنوان و وصف المدونة:
ابحث لنا عن:
#header h1 {
و ابدأ في تغيير القيم الى القيمة التي تريد
مثلا الخط:
font: 100% Arial;
قم بتغيير قيمة 100% الى قيمة تريدها او استعمل وحدة البكسل اذا اردت.
- و الآن الى وصف المدونة:
ابحث عن:
.descriptionwrapper {
و ابدأ في التعديل على راحتك و زي ما انت عايز.
تعديل عرض و ارتفاع الهيدر:
في خصائص الهيدر،،
width: 960px;
height:210px;
قم بتغييرها الى ما يناسبك.
و الآن انظروا النتيجة التي حصلت عليها:
قبل:
بعد:
قد تكون بشعة قليلا،، لأنني صنعتها في عجلة من امري، و انا واثق ان لديكم تصاميم و الوان افضل.
=======
خصائص CSS التي عدلت عليها في هذا الدرس:
#outer-wrapper
#header-wrapper
#header
h1.title
h1.title a, h1.title a:visited
#header .description
انظروا المثال الذي حصلت عليه:- مدونة تجارب نووية
و يمكنك تحميل الستايل في هذه المرحلة من الدورة: من هنا
========
هذه هي اهم الاشياء،، و هناك المزيد من الخصائص لا يمكننا ذكرها كلها.
و اذا كان لديك سؤال او اضافة،، فتفضل و ان شاء الله سأجيبك.
و ادعوا لي الله التوفيق لاكمال الدورة.
و اليوم رح نتعلم صنع هيدر جميل و احترافي في مدونات بلوجر،،
باسم و نتكول على الله،،
1) التصميم بالفتوشوب:
- نختار ابعاد للهيدر (اللوجو) الذي سنقوم بتصميمه
- نختار الوان جميلة و تتناسب مع موضوع المدونة.
- نقوم بتحضير الصور و الايقونات التي سنستخدمها.
و نبدأ بالرسم و الخربشة،،
و مثلا انا طلع لي الهيدر التالي:
جميل جدا، اليس كذلك؟!
(قولوا ايه علشان مزعلش)
* * بعد ذلك انشئ مدونة تجارب،، و اختر هذا الستايل البسيط التالي،،
لانه سيساعدنا على التصميم خاصة للمبتدئين:
==========
2) تركيب الهيدر في المدونة:
-أ- التركيب من جهة عناصر المدونة:
ادخل الى مدونتك و الى عناصر المدونة Layout
ثم اضغط تحرير في منطقة الهيدر (رأس الصفحة)
و بعدين تطلعلك خيارات:
حيث يمكنك ان تقوم برفع الهيدر من جهازك او ان تقوم بوضع وصلة له في حالة انك
رفعته على استضافة صور اخرى.
ثم قم بالاختيار اما تكون الصورة فوق عنوان المدونة و الوصف
او تكون تحت المدونة و الوصف.
ثم اضغط على حفظ و ها قد قمت بتركيبه.
===============
-ب- التركيب من جهة تحرير HTML
و هاذي الطريقة جميلة كذلك و خاصة اذا كنت تفهم في ال CSS
اولا ادخل الى تحرير HTML
و ابحث لنا عن الكود التالي:
#header-wrapper {
و هنا ضع خاصية الخلفية مثل:
background: url(http://yourstite.com/image.jpeg) ;
و استبدل وصلة الصورة بمكان الصورة التي صممتها.
- لون خلفية صورة الهيدر:
اذا كانت صورة الهيدر لديك صغيرة،، فستحتاج الى لون الخلفية + مكان هذه الصورة في الخلفية:
background: #000000 url(http://www.site.com/image.jpeg) no-repeat top right;
حيث:
#000000 لون خلفية الهيدر
http://www.site.com/image.jpeg مكان صورة الهيدر
no-repeat لا نريد تكرير الصورة في الخلفية
top right مكان الصور: اعلى اليمين
==========
تعديل ستايل عنوان و وصف المدونة:
ابحث لنا عن:
#header h1 {
و ابدأ في تغيير القيم الى القيمة التي تريد
مثلا الخط:
font: 100% Arial;
قم بتغيير قيمة 100% الى قيمة تريدها او استعمل وحدة البكسل اذا اردت.
- و الآن الى وصف المدونة:
ابحث عن:
.descriptionwrapper {
و ابدأ في التعديل على راحتك و زي ما انت عايز.
تعديل عرض و ارتفاع الهيدر:
في خصائص الهيدر،،
width: 960px;
height:210px;
قم بتغييرها الى ما يناسبك.
و الآن انظروا النتيجة التي حصلت عليها:
قبل:
بعد:
قد تكون بشعة قليلا،، لأنني صنعتها في عجلة من امري، و انا واثق ان لديكم تصاميم و الوان افضل.
=======
خصائص CSS التي عدلت عليها في هذا الدرس:
#outer-wrapper
#header-wrapper
#header
h1.title
h1.title a, h1.title a:visited
#header .description
انظروا المثال الذي حصلت عليه:- مدونة تجارب نووية
و يمكنك تحميل الستايل في هذه المرحلة من الدورة: من هنا
========
هذه هي اهم الاشياء،، و هناك المزيد من الخصائص لا يمكننا ذكرها كلها.
و اذا كان لديك سؤال او اضافة،، فتفضل و ان شاء الله سأجيبك.
و ادعوا لي الله التوفيق لاكمال الدورة.
التسميات:
دورة تصميم ستايلات بلوجر
الاشتراك في:
تعليقات الرسالة (Atom)
2 التعليقات:
4 أغسطس 2009 في 4:11 م
يقول...الطريقة لا تشتغل مع التحديثات الجديدة لمدونات بلوجر
6 سبتمبر 2009 في 9:46 ص
يقول...جزاك الله خيرا وجاري التطبيق
تحيات مدونة الألمانية للجميع
إرسال تعليق