أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

تصميم قوالب البلوجر - الدرس السابع : تعريف كل وسوم البلوجر الجزء الأول

هناك 18 تعليقًا:
السلام عليكم ورحمة الله تعالى وبركاته

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

درسنا اليوم هو :

تعريف كل وسوم البلوجر الجزء الأول

هاته الصورة ستشرح لكم الأمر لكن انا سأضيف وصفا لكل وسم
وهاته  الوسوم هي التي أستعملها كثير وكثيرا ما تجدها بقوالب بلوجر وطبعا لك الحق في تغييرها عند تصميم قالب خاص بك
 
 
body : وهو جسم المدونة أي الجزء الكلي للمدونة وهو الخاص بوضع خلفية المدونة مثلا.
Outer-wrapper : لديه نفس دور جسم المدونة لكن لديه دور التوسيط وهو اهم دور وهو يحتوي على الأجزاء الثلاث الهيدر و المحتوى والفوتر.
Header-wrapper : خاص برأس الصفحة أي الهيدر ويحتوي على شعار المدونة والإعلان إذا أردت. 
Header : شعار المدونة اي اللوجو.
Top-Ads : وهو الإعلان ويمكنك وضعه أولا وبالمقاس الذي تريده أنت.
content-wrapper : وهو المحتوى الذي يشمل الـ main-wrapper و الـ Sidebar كذلك هو خاص بالتوسيط مثلا وعمل خلفية خاصة بالمحتوى تكون مغايرة لخلفية الجسم.
main-wrapper : وهو الجزء الخاص بالتدوينات فقط.
Post : وهي التدوينات حيث يمكننا جعل شكل التدوينة بتنسيق احترافي ولتخصيص أكثر فهي تحتوي على التالي مثلا :
Post H2 : عنوان التدوينات.
post-meta : هذاالوسم ليس افتراضي ولايكون على البلوجر بل يجب إضافته عبرإضافات البلوجر بالمدونات وعمت درس حول إضافتها.
post-body : وهو جسم التدوينات.
sidebar-wrapper : وهي الجزء الخاص بالقائمة التي تكون بالمدونة ويمكن عمل قائمة واحدة او إثنان كما بمدونتي :) .
Sidebar : وهي القائمة الجانبية ولتخصيص اكثر نجدها بهاته الوسوم على css مثلا :
.sidebar
.sidebar h2
.sidebar ul
.sidebar ul li
.sidebar ul li a
.sidebar .widget
Footer-wrapper : وهو ذيل القالب اي الفوتر يشمل ثلاث أقسام من القوائم و كذلك الجزء الخاص بالحقوق وحقوق مصمم القالب مثلا.
 
 الآن تعرفنا على الوسوم الاساسية التي قد نبني بها قالب بلوجر
وسنتمم باقي العناصر كالتعليقات والبروفيل والأرشيف إلخ....
إلا هنا ننتهي من هذا الجزء وبانتظار تعليقاتكم وشكرا

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


دورة برمجة وتصميم الألعاب - الدرس الأول

هناك 22 تعليقًا:
السلام عليكم ورحمه الله وبركاته

أهلا وسهلا بكم أحبائي الكرام

أقدم لكم دورة من دوراتنا الجدية والحصرية

دورة برمجة وتصميم لعبتك الخاصة

طبعا العديد منا يحب ولو يبرمج لعبة ولو كانت بسيطة لكن مع ذلك فهو سيفتخر بأنه برمجة لعبة خاصة به

الدورة صوت وصورة أي فيديو

لذلك أتشرف بوضعها بهاته المدونة الحبيبة

أخوكم أحمد البولاقي

أتشرف بالتدوين بهاته المدونة العزيزة لإكسابها المزيد من الدورات التعليمية

جانبا إلى أخي العزيز أسامة

اقدم لكم اليوم

 

 الدرس الاول



لتحميل البرنامج المستعمل


ارجو ان تعجبكم والمرجوا التعليق لمن يريد تعلم كل الجديد

وإن شاء نتمم الدورة بإذن الله

احذف البرامج من جهازك ولو بالقوة مع برنامج Revo Uninstaller Pro ومن جذورها + مع التفعيل المجاني

هناك 5 تعليقات:
على اغلبيتنا وبالتحديد مستخدموا انظمة تشغيل الوندوز من مايكروسوفت يعانون من مشكلة تثبيث البرامج من غير قصد كبرامج ال Toolbar وغيرها من البرامج ... وقد نجد صعوبة عند محاولة لحذفها اثر الازعاج الذي تسببه ومن ثقل سلبي على الجهاز فان الحل اليوم مع برنامجRevo Uninstaller Pro لحذف البرامج من جهازك ولو بالقوة ومن جذورها دون ان تخلف اثرا لملفات البرنامج المراد حذفه .




قائمة عليا كالتي بمدونتنا الحالية بشكل مميز وجذاب بأقسام فرعية على شكل عمودين

هناك 34 تعليقًا:
السلام عليكم ورحمة الله تعالى

اليوم أقدم لكم القائمة العليا كالتي بمدونتنا الحالية

إنها قائمة مميزة ومايميزها ظهور أقسام فرعية على شكل عمودين

هاته القائمة إهداء لكل زواري بشكل عام وإلى أخي الكريم Ðř Ăệrǿ بشكل خاص

صورة القائمة

كما تلاحظون إنها مميزة وجميلة جدا
وستنال إعجايكم إن شاء الله واحب أن أقول أنني قد أمدكم بكل ماهو في قالبي الحالي مع مرور الوقت

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

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

كفى كلاما وهيا إلى الشرح

شرح الإضافة

 اكواد html القائمة
<div class='topNav'>
   <div class='topMenu'>
 <ul id='dropmenu'>
  
 <li><a href='/'>الصفحة الرئيسية</a></li>
  
 <li><a href='#'>المنتدى</a></li>
  
   <li><a href='#'>البلوجر</a>
 <ul>
 <li><a href='#'>دروس البلوجر</a></li>
 <li><a href='#'>إضافات البلوجر</a></li>
  <li><a href='#'>قوالب بلوجر</a></li>

 </ul>
 </li>
  
  <li><a href='#'>دورات تعليمية</a>
 <ul>
 <li><a href='#'>تصميم قوالب بلوجر</a></li>
 <li><a href='#'>الربح من أدسنس</a></li>
 <li><a href='#'>التسويق الإلكتروني</a></li>
 <li><a href='#'>إنشاء منتدى vb</a></li>
 <li><a href='#'>دروس الفوتوشوب</a></li>
 <li><a href='#'>إحترف لغة البرمجة</a></li>

 </ul>
 </li>

 <li><a href='#'>برامج كاملة</a></li>

</ul>
</div>
</div>
<div style='clear:both;'/>


تخصيص الإضافة حسب الألوان


الأقسام الرئيسية بالقائمة
الأقسام الفرعية بالقائمة
 روابط الأقسام

كود الـ CSS الخاص بالإضافة

.topNav {
    width:100%;
    height:40px;
    overflow:visible;
    margin:0 auto;
    background: -webkit-linear-gradient(top, #41434f, #272931);
    background: -moz-linear-gradient(top, #41434f, #272931);
    background: -ms-linear-gradient(top, #41434f, #272931);
    background: -o-linear-gradient(top, #41434f, #272931);
    border-bottom:1px solid #444;
}
.topMenu {
    height:40px;
    width:100%;
    float:right;
    overflow:visible;
    margin:0px 0 0 0;
}
.topMenu ul {
    margin: 0px 10px 0 0;
    text-align:right;
}
.topMenu ul li {
   
}
.topMenu ul li a {
}
.topMenu ul li a:hover {
    color:#fff;
}
#dropmenu, #dropmenu ul {
    margin: 0px 10px 0 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
    z-index: 999;
    width: 100%;
    font-weight: bold;
}
#dropmenu a {
    -moz-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ;
    -webkit-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
    display:block;
    font: normal 11px/42px Tahoma, Geneva, sans-serif;
    color:#1599ae;
    height:40px;
    display:block;
    text-shadow:0 1px #1a1b20;
    padding: 0 20px;
}
#dropmenu a:hover {
}
#dropmenu .current a, #dropmenu li:hover &gt; a {
    color:#fff;
    text-shadow:0 1px #000;
    background:#14161c;
}
#dropmenu li {
    float:right;
    height:40px;
    border-left:1px solid #262831;
    position: relative;
}
#dropmenu li:last-child {
    background: none;
}
#dropmenu ul {
    padding: 10px 5px 2px 0;
    position: absolute;
    display: none;
    width: 293px;
    top: 40px;
    right: -15px;
    background:#14161c;
}
#dropmenu ul a {
}
#dropmenu li ul li {
    float: right;
    background: none !important;
    height: 29px;
    width: 130px;
    padding:0 !important;
    margin: 0px 9px 10px 4px !important;
}
#dropmenu li ul li:hover {
    background: none !important;
    height: 29px !important;
    width: 130px !important;
}
#dropmenu li ul a {
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    padding:0 !important;
    float: right;
    height: 29px;
    width: 130px;
    color: #000;
    text-shadow:0 1px #ffffff;
    background:#ffffff;
    text-align:right;
    text-indent:8px;
}
#dropmenu li ul a:hover {
    background: #18acbd;
    color: #000 !important;
    height: 29px;
    text-shadow:0 1px #1dbecb;
    width: 130px;
    font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
    border-top:none !important;
}
#dropmenu ul ul {
    top: auto;
}
#dropmenu li ul ul {
    left: 12em;
    margin: 0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
    display: none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
    display: block;
}

هههههه الأكواد كثيرة لكن هاته القائمة حقا تتطلب مجهود كبير فهي ليس بسيطة نوعا ما

لمن أراد إضافتها إلى بلوجر بقالبه فقط فل يبحث عن هذا الكود

    <div id='header-wrapper'>

أو هذا

    <div id='header'>
وليضع اكواد html القائمة قبله

وأكواد الـ CSS قبل الكود التالي

]]></b:skin>

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


القالب الإحترافي السابق الإصدار الثالث للفتيات ومحبي اللون الوردي لبلوجر مجانا

هناك 18 تعليقًا:

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

اليوم والحمد لله إنتهيت من إتمام الإصدار الثالث لقالب مدونتي القديم
 
arabetutorial-template v0.3

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

ها انا أقدم لكم قالب جميل

نفس مميزات القالب ذو الإصدار الأول

لكنه مدمج بـسلايدر شو ممتاز وجذاب

صورة القالب





وفي الأخير ألتمس منكم التعليق تقديرا للمجهود وتحفيزي لإنشاء المزيد مجانا لزواري وأحبائي الكرام ^^
 
والسلام عليكم ورحمة الله تعالى وبركاته

هام جدا : إعلان حول افتتاح قسمي سجل الزوار وطلبات الدعم الفني

هناك 8 تعليقات:
السلام عليكم روحمة الله تعالى وبركاته
 
بسم الله الرحمان الرحيم
اليوم تم وبحمد الله فتح صفحة خاصة بـسجل الزوار
وفتح صفحة خاصة بـالدعم الفني
 

سجل الزوار


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

في انتظار آرائكم واقتراحاتكم إخوتي الكرام
 

طلبات الدعم الفني

 
طبعا هاته الصفحة ستكون عبارة عن طرح مشاكل و إيجاد حلول
أنا عملت هاته الصفحة لمساعدة الإخوة الذين يواجهون مشاكل في قوالب البلوجر أو إضافة مستعصية لاتشتغل بمدونتك
وذللك بموجب التقيد بهاته الصفحة فقط لطرح مشاكلكم نظرا لبعض الردود والتعليقات العشوائية
على سبيل المثال أضع تدوينة حول موضوع ما ويأتي شخص ويذكر أن لديه مشكلة ليس لها أي رابط مع الموضوع
وأذكر أن التقيد بهاته الصفحة مهم جدا لأنني سأجيب عن مشاكلكم من هنا
وهذا فقط لتكون المدونة منتظمة ومنسقة
ولمن لم بجد حلا لمشكلته في بلوجر مثلا فل يدع لنا الأمر عبر دعمه فنيا ومباشرة فقط عبر إرسال دعوة الإشراف على مدونته من هذا الإيميل
big2012barsa@gmail.com
بعدما نحل المشكلة يمكنه حذف الإشراف عنا
وهاته الطريقة قمنا بها مع العديد من الإخوة فلا خوف على مدوناتكم من السرقة او شيئا من هذا القبيل
نحن هنا للمساعدة لا لإيدائكم
 
والسلام عليكم ورحمة الله تعالى وبركاته
 

دورة تصميم قوالب بلوجر - الدرس السادس : التسميات (Labels)

هناك 19 تعليقًا:
السلام عليكم ورحمة الله تعالى وبركاته

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

وذلك بتفاعلكم معها فطبعا من واجبي إتمامهما بإذن الله

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

نمر إلى درسنا اليوم شرح التعامل مع التسميات بشكل بسيط وهذا الدرس مهم أيضا




Labels وهي التسميات أو التصنيفات أو أقسام المدونة

فهي أكثر أهمية في البلوجر حيث أن لها دور كبير في تسهيل البحث عن القارئ

 أي الزائر لمدونتك ليقصد القسم الذي ريده

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

الشكل الأول : الصندوق Label لعرض التسميات بمربعات القائمة الجانبية widget


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

ولها شكلين إما على شكل قائمة أو سحابة

وبعلامة الشرط يمكنك أن تُظهر محتويات أعلى هذا الصندوق أو أسفله

 أو تتحكم في بقية عناصر الصفحة عن طريق css والشرط كالتالي:

<b:if cond='data:blog.url == data:label.url'>
أظهرني فقط في الصفحات التى تظهر عند الضغط على اي تسميه
</b:if>
رغم أن الشرط السابق يدخل ضمن صفحات الروابط كما تعلمنا سابقاً

إلا أنني لم أدرجه معهم لأنه يكون فعال فقط في حاله وضعه ضمن الصندوق Label 

ويظهر مفعوله في الصفحات التى تعرض النتائج بعد الضغط على أي تسميه.
 

الشكل الثاني: داخل التدوينات التى تحمل تسميه معينه


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

تسميه معينه كالتالي:

<b:if cond='data:label.name == &quot; المدونة التعليمية للحاسوب&quot;'>
أظهرني فقط في التدوينات التى تحمل التسميه المدونة التعليمية للحاسوب
</b:if>
كل ما يمكنك فعله هنا هو تحديد محتوى مخصص يظهر فقط عندما يقرأ الزائر التدوينات التى تحمل التسميه المحددة كإعلان مثلاً 

أو 

أيقونة تميز بها مواضع قسم معين

مثلا أن تعرض اعلانات أدسنس لنوع معين من التدوينات لها شعبيه كبيرة، أو حتى لتجنب المخالفة بعدم عرض اعلاناتك في التدوينات التى تخالف سياسه استخدام الخدمة.
  

الحلقات التكرارية loops

لتطبيق أي من الشرطين السابقين يلزم وضعهم داخل حلقة loops وهي موجودة في كل لغات البرمجة تمكني من تكرار كود معين لعدد من المرات، وتجدها في القوالب بالتعليقات comments والتدوينات post و موجودة أيضا في غالبية مربعات القائمة الجانبية widget ومن بينها الصندوق Label.
لتفعيل الشرط داخل القائمة الجانبية يوضع داخل loop بهذا الشكل:

<b:loop values='data:labels' var='label'>

  <b:if cond='data:blog.url == data:label.url'>
  أظهرني فقط في الصفحات التى تظهر عند الضغط على اي تسميه
  </b:if>

</b:loop>
وداخل التدوينات يوضع في loop آخر بهذا الشكل:

<b:loop values='data:post.labels' var='label'>

  <b:if cond='data:label.name == &quot;المدونة التعليمية للحاسوب&quot;'>
  أظهرني فقط في التدوينات التى تحمل التسميه المدونة التعليمية للحاسوب
  </b:if>

</b:loop>

هذا النوع من علامات الشرط يعتبر أكثر تعقيداً لأنها مرتطبه بمتغيرات أخرى، وتستغرق وقت أطول لاستخدامها بكفاءة ولكن مع كثرة التجربه سوف يسهل عليك تطويعها بالقالب وتخصيص تدويناتك بشكل جذاب

إلى اللقاء في الدرس القادم وبعد الدرس العاشر سيبدأ التطبيق صوت وصورة إنشاء الله

إضافة نبذة عن الكاتب حصرية من تصميمي لبلوجر

هناك 22 تعليقًا:
السلام عليكم ورحمة الله تعالى وبركاته

الكثير منا يحاول الإبداع في تصميم إضافات بلوجر خاصة به

وطبعا مدونتنا المتواضعة تسعى لإكسابكم خبرة حول تصميم وصنع إضافات خاصة بكم

أحسن من البحث عنها وتكون لدى الجميع مثلها

المهم مع ذلك أريد أن أتقاسم معكم هاته الإضافة الخاصة بقالب مدونتي الحالي

صورة الإضافة



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

كفى كلاما وهيا إلى الشرح

شرح الإضافة


إبحث في القالب عن

<div class='post-header-line-1'/>

أو

<div class='post-body entry-content'>

وضع بعدهما الإضافة

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
 
<div class='postauthor'>
<div id='post1'>
 <img alt='' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyRRk52YSgr8lxFHm8ghgrticGgTMwtcSbqvdOD5ZmRquKbwhJUSnoL24iPx2K3pUoDXpQEQ299yEoW7D4o7J1LGrBUIzP5lXYmmi0KdWVpuKS9CO4cFlvfrsA0AeA7sZH4ODDkQ3xYZ1/s1600/avatar_2.png' width='80'/>
 <h3>بقلم <a href='Blog Link'> أسامة بويردن </a></h3>
 <p> أنا من المغرب&#1548; احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم&#1548; وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها&#1548; فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني. </p>
  </div>

 <div id='post2'>
 <div class='postauthor_fans'>
  <a href='http://www.facebook.com/pages/Arabe-Tutorial/466698286722927'><img src='http://im34.gulfup.com/tctnp.png'/></a>
 <a href='http://www.twitter.com/arabetutorial'><img src='http://im34.gulfup.com/7MzXJ.png'/></a>
  <a href='http://www.youtube.com/channel/UCySu-3Oucf2VGXantUArTAg?feature=watch'><img src='http://im34.gulfup.com/5Soef.png'/></a>
 <a href='https://plus.google.com/u/0/105578058496878662654'><img src='http://im34.gulfup.com/tD1QJ.png'/></a>
 <a href='http://feeds.feedburner.com/arabetutorial'><img src='http://im34.gulfup.com/WzRJi.png'/></a>

<div class='postauthor_rss'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=arabetutorial&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input gtbfieldid='3' id='rssquery' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكتروني هنا...&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك الإلكتروني هنا...&quot;) {this.value = &quot;&quot;;}' type='text' value='أدخل بريدك الإلكتروني هنا...'/>
<input name='uri' type='hidden' value='arabetutorial'/><input name='loc' type='hidden' value='en_US'/>
<input id='rssbtn' type='submit' value='إشتراك'/>
</form>
   </div>

 </div>
</div>

 </div>
</b:if>

تخصيص الإضافة بك حسب الألوان


غيرها بصورتك
إسمك
نبذة عنك
صفحتك على الفيس بوك
رابطك على تويتر
قناتك على اليوتوب
حسابك على جوجل+
رابط خلاصات مدونتك
غيره بإسم الخلاصات

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



دورة احتراف CSS - الدرس الأول : الصيغة العامة Syntax

هناك 3 تعليقات:

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

درسنا اليوم هو اول درس لبداية مشوارنا في احتراف الـ CSS
وطبعا إنه لشيء جميل أن تكون محترف فيه حيث يخول لك العديد من الإمكانيات
للإبداع في تصميم موقعك او مدونتك

درسنا اليوم هو

الدرس الأول : الصيغة العامة Syntax



السؤال الأول المطروح كيف نكتب الصيغة العامة الخاصة بـ Css ؟

يوجد ثلاث جزئيات :
 أول جزئية هي المحدد (Selector) الخاص بالوسم الذي بالـ Html
مثلا نريد ان نعمل على ذلك الوسم تأثريات الـ Css
الجزء الثاني هي الخاصية (Property) أي إسم التأثير وفي خواص ثابتة للـ Css
والجزئية الثالثة هي القيمة (Value)  أو التأثير الذي أنا أريد عمله
هاته هي الصيغة العامة للـ Css
 
 
ملحوظة : إذا أردنا إضافة اكثر من تأثير يلزم أن نقوم بوضع الفاصلة ; بين كل تأثير

مثلا لنعمل تأثير على هذا الوسم الخاص بالفقرة

<p>السلام عليكم ورحمة الله تعالى وبركاته</p>

أولا نبدأ بإسم الوسم الذي هو p

ثم نقوم بإضافة قوسين {  }

ليكون الشكل هكذا

p {color:red;text-align:center;}


السؤال الثاني كيف أقوم بترتيب تأثيرات الـ Css لكل محدد عبر تعليقات ؟

التعليقات تبدأ بـ */
وتنتهي بـ /*

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

مثال

/*-------- تعليقك هنا --------*/

ليكون بهذا الشكل

/*العنوان*/
h1 {text-align:center;color:red;font-family:tahoma;}
 /*الفقرة*/
p {text-align:center;color:blue;font-family:arial;}

إلى هنا ينتهي الدرس الأول وهو بسيط جدا لكن سأعدكم بالتميز إن شاء الله

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



هديتي الجديدة لكم القالب الاحترافي السابق الإصدار الثاني لبلوجر مجانا لعيونكم

هناك 51 تعليقًا:
السلام عليكم ورحمة الله تعالى وبركاته

اولا أعتذر جدا جدا عن التأخير لمدة اسبوع كامل عن التدوين
وهذا راجع لضغط الإمتحانات ومشاكل خاصة

وها أنا أعوض هذا الغياب بقالب جميل بإمكانيات جميلة

وهو النسخة الثانية للقالب السابق

أرجوا أن ينال إعجابكم إخوتي الكرام

صورة القالب




مميزات القالب


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

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

فأنا محب للتفاعل لا للنقود

فلا تبخلوا علي بتعليقاتكم المشجعة لعملي

وانا لن اسامح هاته المرة منتزعي الحقوق كما جرى للنسخة الاولى

دمتم في آمان الله وأرجوا أن تتقبلوا هديتي المتواضعة لكم

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

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

هناك 42 تعليقًا:

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

أسعد الله أيامكم إخوتي 

ومرحبا بكم في تدوينة أخرى جميلة ومفيدة

موضوعنا اليوم

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


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

وطبعا العديد من لديه حساب fb

المهم لنمر إلى الشرح الشامل والمفصل

وأضمن لكم ان هاته الطريقة مضمونة مئة بالمئة وعن تجربة

أولا أدخل إلى موقع الفيسبوك الخاص بالتطبيقات

    https://developers.facebook.com/apps

إضغط إلى إنشاء تطبيق Create New App


 ستظهر بعدها هاته الرسالة الخاصة بإنشاء التطبيق
 قم بملء الفراغات بإسم التطبيق الذي تريده 
وأحبذ أن يكون إسم مدونتك أو موقعك


بعدها ستظهر الـ Recapatcha أكتب كما في الصورة التي ستظهر لديك بعدها إضغط على متابعة


بعدها هنيئا لك بالتطبيق وما نحتاجه فقط هو الـ Apps ID


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

إضغط على
Website With Facebook Login

ستظهر لك هاته الخانة ضع رابط موقعك كاملا كالتالي


الآن قم بحفظ التغييرات ومبروووك عليك التطبيق الخاص بإدراج التعليقات

الآن لنمر لكيفية إدراجه ببلوجر

توجه إلى لوحة تحكم مدونتك : تصميم > تحرير html > تنسيق القالب (لا تنس أخذ نسخة قبل ذلك)

إبحث عن

<html

وضع بعده هذا الكود مباشرة

xmlns:fb='http://www.facebook.com/2008/fbml'

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

<html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog

قم بالبحث عن هذا الوسم

 <body>

ضع بعده مباشرة الكود التالي

     <div id="fb-root"></div>

    <script>

        window.fbAsyncInit = function() {

        FB.init({
          appId  : 'ضع هنا معرف التطبيق الذي نسخته سابقا',
          status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the   session
          xfbml  : true  // parse XFBML
        });
      };
        (function() {
        var e = document.createElement('script');
          e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
        e.async = true;
          document.getElementById('fb-root').appendChild(e);
        }());
    </script>
 لاتنسى لصق المعرف ID الخاص بالتطبيق

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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='صورة لشعار مدونتك هنا'   property='og:image'/>
    <meta content=' المعرف ID الخاص بالتطبيق'   property='fb:app_id'/>
    <meta content='المعرف الخاص بحسابك الشخصي بالفيس'   property='fb:admins'/>
    <meta content='article'   property='og:type'/>

  الآن قم بضبط كل ماهو ملون بما يناسبك

السؤال المطروح عند البعض هو كيف أحصل على المعرف الخاص بحسابي الشخصي

الجواب وهو حل بسيط ضع هذا الرابط وقم باستبدال YourProfile بحسابك أنت

https://graph.facebook.com/YourProfile
وبهذا ستجد المعرف الخاص بك وانسخه وقم بلصقه بمكانه في الكود الأول

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

</head>

وقم بلصق الكود السابق الذي ضبطته بما يناسبك

أخيرا قم بالبحث عن 

<data:post.body/>

وألصق بعده هذا الكود

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

يمكنك تغيير عرض صندوق التعليقات بما يناسب موقعك عبر التغيير في العرض 450

ملحوظة : ستجد هذا الكود <data:post.body/> مكرر مرات عدة قم بوضع الكود السابق بعدهم كلهم إن لم يعمل معك في اول لحظة

وانتظرونا في الجزء الثاني حول كيفية إدارة التعليقات التي قد تجسد صعوبة في ملاحظتها وذللك أنه لاتوجد تنبيهات لكن هناك طريقة جميلة لتعرف من علق وبأي تدوينة تم التعليق

إلى هنا نصل إلى نهاية الشرح وأرجوا أن اكون قد وفقت في الطرح :)

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

تصميم قوالب بلوجر - الدرس الخامس : أنواع الصفحات بقوالب البلوجر

هناك 25 تعليقًا:

السلام عليكم ورحمة الله تعالى وبركاته
سعدت بلقائكم في درس جديد حول دورة تصميم القوالب
وآتاسف عن التأخير في التدوين والسبب هو تصميم القالب الذي على مدونتي الآن :)
درسنا اليوم هو

الدرس الخامس : أنواع الصفحات بقوالب البلوجر



 الدرس مهم جدا جدا وأنبه إلى هذا فهذا سيفيدنا اكثر وهو خاص بالتحكم الشامل في إظهار شيئ مثلا في صفحة وعدم إظهاره في الأخرى

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

النوع 1 - صفحة المدونة الرئيسية.
النوع 2 - صفحات فردية وهي الخاصة بعرض التدوينات و التعليقات.
النوع 3 - صفحات المحتوى وتظهر عند التنقل من خلال المشاركات الأقدم والأحدث.
النوع 4 - صفحات الأرشيف.
النوع 5 - صفحات ثابتة.
النوع 6 - صفحات متغيرة.
 
الآن بعد ان عرفت الأنواع الموجودة لنشرح كل صفحة على حدى، 
وتعرف كل صفحة ودورها في قوالب البلوجر

نوع 1 :  صفحة المدونة الرئيسية data:blog.homepageUrl 


هذا النوع خاص وليس كباقي الانواع كما انه لايعتبر من الـ PageType
وهذا الاخير خاص فقط بعرض ما نريده نحن في الصفحة الرئيسية فقط

مثال

<b:if cond='data:blog.url == data:blog.homepageUrl'>
أظهر ما أريده أنا في الصفحة الرئيسية فقط
</b:if>

مثلا إذا لاحظتم واجهة الخدمات الخاصة بالتصميم ستجد انها تظهرفقط في الصفحة الرئيسية أي انني استعملت هذا النوع بالنسبة لواجهة الخدمات

النوع 2 - صفحات فردية وهي الخاصة بعرض التدوينات و التعليقات item

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
أظهر ما أريده أنا في صفحة التدوينات فقط
</b:if> 
ستجد ان داخل هذا النوع القسم الخاص بالتدوينة والتعليقات

كمثال الكل يعرف الإضافات التالية :

نبذة عن الكاتب
قد يهمك أيضا
ساعدنا بنشر هاته التدوينة

فطبعا إذا لاحظت النوع قبل هاته الإضافة ستجد انه النوع item

مثلا

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post-author'>--------------</div>
</b:if>

النوع 3 - صفحات المحتوى index

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

مثال

<b:if cond='data:blog.pageType == &quot;index&quot;'>
أظهر ما أريده أنا في صفحات المحتوى فقط
</b:if>

النوع 4 - صفحات الأرشيف archive

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

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
أظهر ما أريده أنا في صفحات الأرشيف فقط
</b:if>
النوع 5 - صفحات ثابتة static_page

هذا النوع جميل في التعامل كما انه مضاف حديثا لقوالب بلوجر وهو مازاد من جمالية البلوجر في عمل صفحات ثابتة مستقلة عن التدوينات

الكل يعرف الصفحات التالية :

إتصل بنا
إنظم إلينا
الدردشة مثلا

فهي صفحات ثابثة ومستقلة
مثال

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
أظهرني داخل الصفحات الثابته فقط 
</b:if>
فطبعا إذا لاحظت النوع قبل هاته الصفحات ستجد انه النوع static_page

كمثال بالنسبة لقالبي الجديد ستجد صفحة أسعار الخدماث أو اعمالنا أو إتفاقية الإستخدام

فهاته الصفحات هي عبارة عن صفحات مستقلة كما انها ليس عادية بل وهي بشكل انيق وجذاب عبر استخدام 
لغة الـ HTML وتقنية الـ Css

بعضكم سيخبرني كيف فعلت هذا لكن ليس الآن فلكل شيء درسه الخاص :)

إذا فهو نوع مهم ويستحق التجربة وإضافته سهلة فقط عبر لوحة التحكم ثم الصفحات

النوع 6 - صفحات متغيرة url.html

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

أظن انك قد فهمت ما ارمز إليه
الـ url.html أعني به رابط التدوينة

هل في شخص سيجرب هاته الطريقة ويضع استايل خاص بكل تدوينة ؟؟؟

المهم مثال عن هذا النوع

<b:if cond='data:blog.url == &quot;URL.html&quot;'>
 أظهرني في الصفحة المحددة فقط 
</b:if>

لكن أحب ان اقول ان له ميزة اخرى سنستعملها وهي جميلة جدا جدا واكثر من مفيدة لجميع أصحاب المدونات :)

اي انه يمكنك وضع وصف مقتطف من تلك التدوينة والكلمات الدلالية أي أن هذا النوع كما لو انه ميتاتاج لكل تدوينة وليس للمدونة باكملها
مما يعني أرشفة سريعة جدا جدا لتدويناتك وانا أخصدائما جزءا من وقتي لكي تتأرشف مواضيعي بسرعة فائقة ^^

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

<b:if cond='data:blog.url == &quot;URL.html&quot;'>
    <meta content='هنا تضع الوصف الخاص بالتدوينة' name='description'/>
    <meta content='هنا تضع الكلمات الدلالية الخاصة بالتدوينة' name='keywords'/>
</b:if>

ستقوم بتغيير URL.html  برابط التدوينة التي تريد أرشفتها

ثم تضع وصفا لها وكلمات دلالية خاصة بها

كل تدوينة أردت أرشفتها فبعد نشرك للتدوينة إذهب مباشرة واعمل هاته الخطوة وقم بإضافتها تحت كل واحدة

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

مثلا قم بالذهاب إلى جوجل وابحث عن تصميم قوالب بلوجر
وانظر للنتيجة وأرجوا إخباري في أي مرتبة ظهرت مدونتي بالنسبة لهاته الجملة

وقد تكون هاته النتيجة هي دليلنا حول الارشفة السريعة عبر هاته الطريقة لأن مدونتي هي التي تظهرفي السطر الاول باول صفحة لكن أطلب منكم ان تقولوا عبر تعليق في مرتبتي عند البحث عن تصميم قوالب بلوجر لكل شخص من بلد معين ;)

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

اضافة زر الصعود الى الاعلى فى مدونات بلوجر

هناك 7 تعليقات:

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

بسم الله و الحمدلله و الصلاو و السلام على رسول الله و بعد :-

اليوم معنا طريقة إضافة زر الصعود الى الاعلى لمدونات بلوجر 

الطريقة سهلة جدا نبدأ على بركة الله

1- نذهب الى بلوجر >>  قالب  >> تحرير html
2- ابحث عن <head/>   و أضف قبله الكود التالى 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}#w2btoTop:active, #w2btoTop:focus {outline:none;}</style><script src="http://widgets.way2blogging.org/blogger-widgets/w2b-jquery.ui.totop.js" type="text/javascript"></script><script type="text/javascript">/*<![CDATA[*/;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery); /*]]>*/</script>
 

و الان تمت الاضافة بنجاح لا تنسوا ترك تعليقاتم

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

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

تصميم : بويردن