طريقة تغيير لون قالب مدونتك بطريقة احترافية [فيديو]


درس رائع جديد من تلك المميزة التي عودناكم عليها ..
بعدما تعلمت كيف تعرب قالب بلوجر وكيف تغير خطوط المدونة
لابد أنك توقعت أن الخطوة القادمة هي كيف تقوم بتغيير لون المدونة .. وهذا ما حدث !

إليك الشرح بالفيديو من قناتنا على اليوتيوب :
https://www.youtube.com/watch?v=moVvYJyFxFo


هل تكره الفيديوهات ؟! هذا حقك  .. إليك :

شرح كتابي للطريقة ..


1- استخدم برنامج color crop لتحديد كود اللون المراد تغيير في مدوتك .. وذلك بسحب أداة الماصة أو eyedropper (شبيهة بالقلم) ناحية اللون ثم إفلاتها .. بعد هذا انسخ الكود الذي يظهر .. بالضغط على ctrl + c




2- * توجه إلى لوحة التحكم >> قالب >> تحرير HTML
*اضغط ctrl + shift + R

3-الصق الكود الأول في المربع الذي يضهر .. ثم انتظر حتى تنفيذ الخطوة الثالثة ..

4- *على طريقة الخطوة الأولى .. اعرف كود اللون الجديد المراد تركيبه على المدونة .. اسحبه من موقع آخر أو برنامج .. الخ ..

*قم بلصق كود اللون الجديد في المربع الذي ظهر لك بعد تنفيذ الخطوة الثانية ctrl + v


5- اضغط على حفظ النموذج
ومبروك عليك اللون الجديد !

**ملحوظة مهمة**

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

كيفية تغيير شكل فيديو اليوتيوب على مدونتك


  السلام عليكم ورحمة الله وبركاته ..

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

  الطريقة غاية في البساطة ..

  اتجه إلى لوحة التحكم واضغط على رمز القلم : لكتابة موضوع جديد .
بعد كتابة ما تود كتابته ليظهر فوق الفيديو ، اضغط على زر [HTML] بدلا من [تحرير] الموجود في محرر المشاركات

افرغ مساحة قبل كود </div>

في المساحة الخالية .. ضع الكود التالي :


<embed allowfullscreen="true" allowscriptaccess="always" height="400px" src="http://www.youtube.com/v/cjb8Oa5BnFw&amp;feature=youtu.be&amp;rel=0&amp;theme=light&amp;showinfo=0&amp;color=white" type="application/x-shockwave-flash" width="100%"></embed> 

مع استبدال ما باللون الأحمر برابط الفيديو على اليوتيوب .

كما يظهر في الصورة التالية :



ثم تنشر تدوينتك ^_^

لمعاينة الشكل الجديد للفيديو : اضغط هنا

اذا أعجبك الفيديو شاركه أو ارسله لأصدقائك ، فالدال على الخير كفاعله .

كيفية إضافة كتاب ومشرفين لمدونات بلوجر وجعل المدونة جماعية


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

ولكن يجب أن تفرق أولا بين الكتاب والمشرفين ....
الكاتب يقتصر دوره على كتابة التدوينات ... وليس لديه أي دخل بالقالب والإعدادات أو حتى التعليقات ...
أي أن الكاتب عندما يقوم بفتح لوحة تحكم المدونة سوف يجد قسم التدوينات فقط ...
ولا يمكن لكاتب أن يعدل إلا على التدوينات التي قام بنشرها ...
أما المشرف فيمكنه التحكم بكل شئ في المدونة الإعدادات والقالب والإضافات والتعليقات ... إلخ ..

لإضافة الكتاب والمشرفين قم باتباع الخطوات التالية :
أولا توجه لــــ لوحة التحكم >> الإعدادات >> أساسي


بعد ذلك توجه لـ"الأذونات" واضغط على "إضافة مؤلفين"

بعد ذلك سيظهر لك مربع ... قم بكتابة البريد الالكتروني للشخص أو الأشخاص الذي تريد إضافتهم لفريق العمل ثم اضغط على "دعوة مؤلفين"

سيتم إرسال دعوات لهم على البريد الإلكتروني ... وسيتم إضافتهم تلقائيا ككتاب ...
بعد ذلك يمكنك تحويل الكاتب إلى مشرف ...
عن طريق تغيير حالته .. هكذا ..


ملاحظة : من المستحسن أن تكون المشرف الوحيد في المدونة وتضيف باقي فريق العمل ككتاب ... لأن المشررف ستكون له نفس صلاحيات صاحب المدونة الأصلي .

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

أحدث الخطوط العربية في الويب لمدونات بلوجر

أسهل طريقة لتركيب خطوط احترافية لمدونتك

السلام عليكم ورحمة الله وبركاته ..
أهلا بكم أعضاء وزوار مدونة ابداع هاوس
هذا هو الدرس الثاني من دورة تطوير المواقع [تابع الدرس الأول : كيفية تعريب قالب بلوجر]

من خلال هذا الموضوع سوف تتمكن من اضافة أروع وأحدث الخطوط في الويب لمدونات بلوجر.
[عدد الخطوط : سبعة]

طريقة التركيب :
أولا توجه الى لوحة التحكم >> قالب >>   تحرير  Html  
ثم نبحث عن الوسم ]]></b:skin>
ونضيف قبله مباشرة كود css لخطوط المراد إضافتها للمدونة

الخط الأول : ge_dinar

أروع خط عربي احترافي


@font-face {
font-family: "ge_dinar";
src: url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.eot');
src: local("â&#732;º"), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.eot?#iefix') format('embedded-opentype'), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.otf') format('opentype');
font-weight: normal;
}



الخط الثاني : ges

أحدث الخطوط العربية



@font-face {
font-family: 'ges';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype');
}


الخط الثالث : GE-SS-Unique

خط عربي احترافي لمدونتك


@font-face {
font-family: 'GE SS Unique';
src: url('http://www.fontsaddict.com/fontface/ge-ss-unique-light.otf');
}



الخط الرابع : DroidKufi-Bold

خط جديد لمدونات بلوجر



@font-face {
font-family: "DroidKufi-Bold";
font-style: normal;
font-weight: 700;
src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf") format("truetype");
}


الخط الخامس : DroidKufi-regular

أفضل خط عربي لمواضيع المدونة


@font-face {
font-family: "DroidKufi-regular";
font-style: normal;
font-weight: 400;
src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf") format("truetype");



الخط السادس : Kaushan Script

خط عربي جميل

@font-face{  font-family:'Kaushan Script';   font-style:normal;   font-weight:400;   src:local('Kaushan Script'),local('KaushanScript-Regular'),url(http://themes.googleusercontent.com/static/fonts/kaushanscript/v1/qx1LSqts-NtiKcLw4N03IFhlQWQpSCpzb2Peu3I-Q34.woff) format('woff')
}



الخط السابع : hacen_liner

خط جديد بلوجر


@font-face {
font-family: "hacen_liner";
src: url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.eot');
src: local("â&#732;º"), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.eot?#iefix') format('embedded-opentype'), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.woff');
font-weight: normal;
}


بعدج إدراجك للأكواد السابقة ... عندما تريد اضافة /تغيير خط معين فى أي جزء في القالب (القائمة مثلا)
ستجد الكود على هذا الشكل font-family:arial , tohama
اضف اسم الخط بعد font-family: مباشرة ..
لتكون في النهاية بهذا الشكل font-family: font-name arial , tohama
طبعا استبدل font-name باسم الخط .

أما إذا أردت تعميم خط واحد على القالب بأكمله (مع العلم أنها لا تنفع مع كل القوالب) ..
ما عليك سوى البحث عن body {
وأضف بعدها font-family: font-name

 ( إذا وجدت الكود السابق لا تقوم بإضافته مرة أخرى وإنما قم بالتعديل عليه فقط ) 

الى هنا نكون قد وصلنا الى ختام موضوع اليوم ... أتمنى أن تكونو قد اسفدتم ولو بالقيل ..

إذا أعجبك الدرس لا تبخل بمشاركته مع أصدقائك .