تجربة قوالب

قواعد اساسية لابد منها لتعريف كتابة اوامر الـ CSS

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

درسنا اليوم من اوائل دروس دورة تعلم الكتابة لغة CSS
يدور حول اساسيات و قواعد لابد من توفرها حتى يتاح لك استخدام هذه الخاصية بنجاح.
بالنسبة للمدونات بلوجر فدائماً هنام قاعدة ثابتة وهي , اكواد CSS تبدأ بوسم وتنتهي بوسم كما التالي:

<b:skin><![CDATA[
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
]]></b:skin>

اما في المواقع والمدونات الآخرى وايضاً بلوجر يتم استخدام الآكواد بالشكل التالي:

<style type='text/css'>
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
</style>

ما هي القاعدة الثابتة في كتابة أكواد CSS ؟ التالي ..

#outer-wrapper {padding: 3px;}

سوف نأخذهم بالتدريج من الشمال لليمين ونشرح اسم كل جزء ملون في هذا الكود

# المعرف الذي يوضع في صفحات html والذي يسمى id ويمكن ان يكون مكانه فئة وهي النقطة التي تسمى class , ويمكن استخدام كل شئ في صفحة html من روابط و معرفات وفئات

outer-wrapper يسمى في الكود Selector او المُحدد ولا يشترط ان يكون outer-wrapper, بل المقصود الموضع نفسه في الكود

} بداية كتابة الكود

padding هي من ضمن الخصائص التي تتحكم في تصميم الموقع او المدونة , وليس المقصود هنا padding بل المقصود المكان نفسه في الكود وينتهي دائماً ب نقطتين فوق بعضهم هكذا :

3px هذا المكان في الكود يُسمى value او القيمة المعطاه للخاصية المحددة

; الفاصلة المنقوطة تكون فاصل بين كل كود والاخر مثال الكود هذا

#outer-wrapper {padding: 3px; margin: 0px;}

{ نهاية مجموعة الأكواد كما في الكود السابق هذا

وبهذا نكون قد اطلعنا على اساس وضع اكواد هذه التقنية الجميلة

اترككم في رعاية الله إلى درساً جديد من دروس الدورة

مزيد من المعلومات »

ما هو id وما هو class والفرق بينهم

Rafat 12:41 م 2 CSS , CSS3 , HTML , HTML 5

السلام عليكم ورحمة الله وبركاته
درسنا اليوم من دروس دورة تعلم تقنية CSS وهو التعرف على الفئات والمعرفات id و class والفرق بينهم
الـ id و الـ class هما المعرفات الاساسية التي توضع داخل وسوم HTML و XML لتتعرف عليها تقنية الـ CSS ويتاح لك التعديل على كل كبيرة وصغيرة بالموقع من خلفية للموقع واطارت و الوان للخطوط و الوان لكل شئ و خلفيات للصور و تحديد حجم الصور و الخطوط ايضاً وشكلها
باختصار تستطيع ان تقول ان تقنية الـ CSS مسئولة عن كل شئ مرتبط بشكل وتنسيق وتصميم الموقع.

إجابة سؤالنا, ما هو id وما هو class والفرق بينهم، التالي :
id يسمى مُعرف .. class يسمى فئة
id يمكن أن يندرج تحته فئات كثيرة ولا يمكن ان يتكرر اسمه .. class يمكن ان يتكرر اسمه مرات ومرات على عكس id
id يكتب قبله # .. class يكتب قبله دائماً . نقطة ,, ودعونا نأخذ مثال عملي :

-id مكتوب في صفحة HTML:

<div id='welcome'>to MiniSoft</div>

-id مكتوب في صفحة CSS

#welcome {
color: #000000 ;
font: normal normal 12px Tahoma, Geneva, sans-serif;
}

نلاحظ أن id اصبح ( # ) وكتبت بجانبه welcome لأنها مكتوبة بجانب id في صفحة HTML

-class مكتوب في صحفحة HTML

<div class='mini'>soft</div>

-class مكتوب في صفحة CSS

.mini {
background-color: #CC0000;
text-align: center;
}

نلاحظ أن class اصبح نقطة ( . ) و كتبت بجانبها mini لأنها مكتوبة بجانب class في صفحة HTML

نأخذ مثال آخر على كيفية تكرار الفئة class :

<div class='mini'>ميني سوفت على تويتر</div>
<div class='mini'>ميني سوفت على جوجل كروم</div>
<div class='mini'>ميني سوفت ع الفيس بوك</div>

كل هذه الوسوم المتشابهه تكتب في صفحة CSS هكذا:

.mini {
background-color: #CC0000;
text-align: center;
}

.إذاً فهمنا أن الوسم هو الملون و الذي يوجد بداخله كلمات كما رأينا, هذا بعكس المعرف id لا يمكن ان يتكرر نفس الوسم في نفس الصفحة او القالب كاملاً,,,

اتمنى ان تكون وصلت المعلومة والى اللقاء ان شاء الله في درس آخر من دروس الدورة

السلام عليكم

مزيد من المعلومات »

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

Rafat 11:33 م شروحات بلوجر , blogger , Facebook

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

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

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

وايضاً بعد التعديلات التي وجب ان ننشرها لكم حتى يضبط الشرح مع الجميع بكل سهولة.

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

ملاحظة هامة: لرؤية صور الشرح بوضوح تام إضغط على الصورة مرة واحد فقط .

إذهب إلى هذا الرابط ( هنا ) ثم تابع الصور.

بمجرد دخولك للموقع ستجد هذه النافذة
1- اكتب مثلاً تعليقات الفيس بوك
2- اكتب اي شئ بالانجليزية
3- اتركها اخرى
4- اضغط متابعة

اكتب ما تراه امامك في هذا المربع ثم إضغط متابعه

ستنتقل الى هذه الصفحة إضغط على Edit App

بعد ذلك تنتقل الى هذه الصفحة وهي المهمة
1- أكتب دومين بلوجرblogspot.com إن كنت صاحب موقع واسمه مثلاً ahmad فأكتب ahmad.com
2- اجعل هذه معطلة
3- اضغط هنا ثم اكتب في الخانه رقم 4 اسم موقعك كاملاً
5- اضغط حفظ التغييرات

ثم إحفظ الرقم الذي تجده في هذا المكان لأننا سوف نحتاجه

إلى هنا انتهى دور الفيس بوك في شرحنا , بقى فقط التعديل على قالب المدونة , اتبع التالي:

من لوحة تحكم مدونتك إختر قالب

ثم إختر تحرير HTML

في أول القالب ستجد هذا الوسم

<HTML

ستجد بجواره روابط او تجده فارغاً المهم سوف نضع بجانبه التالي

prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'

ليبقى هكذا

<HTML prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'

ثم ابحث عن الوسم

</body>

وضع فوقه مباشرتاً هذا الكود

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({xfbml: true, appId: كود الفيس بوك });};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ar_AR/all.js'
document.getElementById('fb-root').appendChild(e);}());
</script>

الان ابحث عن هذا الوسم و لسهولة البحث ابحث تحديداً عن كلمة comments ثم قارن شكل الوسم بالوسم الذي تحصل عليه

<div class='comments' id='comments'>

ثم ضع تحته هذا الكود مع تغيير الرقم 600 ليتناسب مع عرض مدونتك او اتركه ثم نفذ الخطوات وغيره فيما بعد

<b:if cond='data:blog.pageType == "item"'>
<div>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/><fb:comments width='600' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>

الآن ابحث عن الوسم <head> ثم ضع تحته هذا الكود

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='اسم المدونة مع وصف قصير ' property='og:site_name'/>
<meta content='صورة 256×256 تعبر عن مدونتك' property='og:image'/>
<meta content='كود الفيسبوك' property='fb:app_id'/>
<meta content='معرف حسابك ع الفيسبوك' property='fb:admins'/>
<meta content='website' property='og:type'/>
<meta content='article' property='og:type'/>

ضع اسم المدونة مع وصف قصير : ميني سوفت للشروحات والبلوجر

صورة تحمل شعار مدونتك

كود الفيس بوك الذي احتفظنا من قبل

معرف حسابك على الفيس بوك كيف تأتي به ؟ افتح الرابط التالي

https://graph.facebook.com/Min0oSoft

اكتب بدلاً من الاسم الاحمر اسمك انت ع الفيسبوك ,, كيف تأتي به .؟؟ أنظر الصورة التالية

1- اضغط على اسم حسابك كما بالصورة
2- ستجد الاسم هكذا

بعد فتح الرابط المتبوع بأسمك ستجد كود مثل هذا

{
"id": "100004490551583",
"name": "\u0645\u064a\u0646\u064a \u0633\u0648\u0641\u062a",
"first_name": "\u0645\u064a\u0646\u064a",
"last_name": "\u0633\u0648\u0641\u062a",
"link": "http://www.facebook.com/Min0oSoft",
"username": "Min0oSoft",
"gender": "male",
"locale": "ar_AR"
}

ما يهمنا هو هذا الكود الملون بالاحمر وهو معرف حسابك , ضعه في مكانه الذي اشرنا اليه ثم انتقل الى هذا الرابط ( هنا ) واتبع التالي:

سيفتح معك الرابط صفحة بها كلمة الإعدادات كما ترى

تفتح امامك هذه النافذة فاتبع التالي
1- اذا كان اسمك على الفيسبوك عربي او انجليزي اكتب اول حرف فقط وسيظهر قائمة بأسمك واسماء اصدقاءك اختر اسمك
2- لتجده في الخانه رقم 2 كما هو موضح
3- ضع اشارة هنا
4- اختر بالتوقيت الزمني
5- اضغط حفظ

وبهذا ينتهي الشرح وشكراً لكم لحسن المتابعه

مزيد من المعلومات »

افضل الطرق في تعريب القوالب الأجنبية الإحترافية

Rafat 7:52 م شروحات بلوجر , blogger

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

اليوم إن شاء الله معنا درس من أهم الدروس في عالم البلوجر وهو تعريب القوالب الأجنبية وذلك نظراً للإحترافية الشديدة التي يحتوي عليها القالب , واتمنى أن نطور من انفسنا وقريباً نصنع هذه القوالب وبنفس الإحترافية .

تعريب القالب باختصار هو عكس القالب من الشمال الى اليمين.

تعريف بقالب البلوجر ..

قالب البلوجر هو عبارة عن ملف XML يحتوي على أكواد جافا سكربت وأكواد CSS وايضاً أكواد HTML

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

<b:skin><![CDATA[

وتنتهي عند الوسم

]]></b:skin>

ما الذي يجب التعديل عليه في القالب ؟

كلمة left جيب تغييرها الى right

وكذلك كلمة right يجب تغييرها الى left

مثال على ذلك هذه الوسوم الآتية

float: right;

right: 0;

margin-right: 0;

padding-right:

text-align: right;

border-right-color: #E6E6E6;

background: url(رابط صورة) no-repeat right 5px;

border-right: 2px solid #bf0499;

و هكذا نستنتج ان اي كلمة يمين او شمال يجب استبدالها بالعكس حتى يتم قلب القالب من الشمال الى اليمين

ولكن هناك بعض الوسوم لا تحتوي على كلمة يمين او شمال ولكنها عبارة عن ارقام

كيف نعرفها ؟ وكيف نقوم بتعريبها ؟ او كيف نقوم بقلبها من اليمين الى الشمال ؟

مثال على ذلك هذه الوسوم الآتية

padding: 0 0 0 5px;

margin: 0 0 0 5px;

أو

padding: 0 5px 0 0;

margin: 0 5px 0 0;

ماذا يُعني هذا ..؟؟

الوسم الذي يحتوي على ارعة ارقام هكذا

0 0 0 5px

يدل على ان هذا الوسم مضبوط على الجهة الشمال .. كيف هذا ؟

الرقم الاول من اليسار فوق

الرقم الثاني يمين

الرقم الثالث تحت

الرقم الرابع شمال

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

ولكن هناك قوالب تحتوي على اكواد جافا وعند تركيب القالب على المدونة العربية قد تجد ان هناك اكواد لا تعمل

الحل بسيط جداً

اولا سوف تضع هذا الوسم

dir='ltr'

بجوار الوسم html في اعلى القالب ليصبح هكذا

ستجد أن اتجاه الكلام اصبح من اليسار

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

direction:rtl;

في اماكن معينه مثل تعتمد على القالب نفسه

ما هي اسرع الطرق في تحويل الكلمات من الشمال الى اليمين.؟؟

سوف نقوم باستخدام برنامج Notepad++

يمكنك تحميله من هذا الرابط هنا

ثم قُم بتنصيبه و اتبع الصور التالية ..

افتح القالب بواسطة البرنامج ثم إضغط Ctrl + F
سوف تظهر هذه النافذة ,, في الخانة رقم واحد أكتب left
ثم انتقل لكلمة mark
وانظر الصورة التالية

بعد الإنتقال لكلمة mark
اضغط على mark all كما بالصورة

بعد الضغط على mark all ستجد عدد ظهر بالاسفل كما بالصورة
هو عدد الكلمات التي ظللت بسبب الضغط على mark all

ستجد كلمة left قد ظُللت جميعها ولكن لن نقوم بتغييرها الى right مباشرتاً
بل انظر الصورة التالية

سوف نقوم بتغيريها الى yemen مثلاً
ثم كرر نفس العملية ولكن بحثاً عن كلمة right ثم حولها الى left
ثم كرر نفس العملية بحثاً yemen استبدلها بـ right

وبهذا قد نكون انهينا تعديل الكلمات من left الى right والعكس
بقى لنا الخطوة الثانية وهي البحث عن

padding: 0 0 0 5px; - margin: 0 0 0 5px;

طبعاً مع اختلاف الارقام و امكانها , ليس شرطاً ان يكون الارقام كما هي في الموضوع

ممكن تأتي هكذا

0 5px 0 0

0 0 0 5px

0 8px 0 0

سوف نأخد الرقم الثاني نجعله في الآخر او نآخذ الرقم الآخر نجعله الثاني ,, بمعنى اوضح , لو جاءت الارقام لك كالتالي

0 0 0 5px

اجعلها هكذا

0 5px 0 0

والعكس

لم يبقى لنا اي شئ في تعديل القالب سوى الكلمات العادية مثل

home = الرئيسية

وهكذا

بعد الإنتهاء من تعريب القالب وتركيبه قد تجد أن هناك بعض الاشياء الغير مظبوطة

وايضاً قد تجد صور مقلوبة , وهذا ما سوف نأخذه في الدرس القادم بإذن الله

فكونوا معنا والله ولي التوفيق

مزيد من المعلومات »

البرنامج الأكثر من رائع في تحرير ملفات HTML و CSS و XML العملاق Notepad++ final آخر اصدار مع شرح التنصيب

Rafat 1:02 م برامج البرمجة , برامج مجانية

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

اليكم البرنامج الآكثر من رائع في تعديل وانشاء ملفات HTML و CSS و PHP , ليس هذا فحسب, بل أن البرنامج من افضل البرامج في هذا المجال حيث أنه يتميز بالاتي :

الصيغات المدعومة

C , C# , C++ , HTML . XML , YXML , PHP , Ada , ASP , Java , JavaScript , Autolt , Assembly , CMD , Bat , Text , Caml , Cmake , COBOL , CoffeScript , CSS , D , Diff , Flash ActionScript , Fortran , Gui4Cli , HasKell , INNO , JSP , KIXtart , Lisp , Lua , Makefile , Matlab , INI , INF , MS DOS Style , NSIS , VB , Tex.

والعديد من الصيغ التي لم اذكرها , تقريباً يدعم جميع انواع صيغ البرمجة .

يتميز البرنامج بشكل عرض الملفات بهذا الشكل في الصورة التالية ..

يقوم البرنامج بتلوين كل جزء من لغة البرمجة ويقوم بترقيم الاسطر وهذا يساعد على سرعة العمل واتقانه

كما يمكنك البحث في الملف المفتوح عن اي كلمة تريدها او تظليل مجموعه من الكلمات لو حتى استبدال مجموعه من الكلمات دفعه واحدة .. كل هذا والبرنامج مجاني وصغير الحجم

لتحميل البرنامج اضغط على الرابط

حجم البرنامج : 8 ميجا

الإصدار : 6.5 آخر إصدار

شرح تنصيب البرنامج