خاصية زخرفة او تزيين مدونتك

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

http://zaharatb2.blogspot.com/

الان سوف اشرح الاكود
الكود الاول هو ما نسميه بى (body) والذي يضهر في اعلى المدموة او في رائس المدونة لتوضيح ان ارد اي شخص ان يزيد في عرض الصورة او يختار صور غيرها تحل مكان الصورة الاول عليه ان يعرف كيف يكون الكود كي يستطيع التغيير فيه

الكود الخاص بى (body)

الكود:

body{
background: url('http://i12.servimg.com/u/f12/17/99/16/42/s110.png');
background-repeat:repeat-x;
height:24px;
width:60px;
text-align:center;
}

الكود الثاني هو كود (h1 ) اي عنوان المدونة يختص دئما العنوان الرئيس بى (h1 )

الكود:

h1{
background: url('http://i12.servimg.com/u/f12/17/99/16/42/s110.png');
background-repeat:repeat-x;
height: 50px;
width:240px;
padding: 20px 25px 25px 20px;
text-align:center;
float:center;
}

الكود الثالث هو كود القائمة (PageList1)

الكود:

#PageList1{
background: url('http://i12.servimg.com/u/f12/17/99/16/42/s110.png');
background-repeat:repeat-x;
height: 50px;
width:440px;
text-align:center;
float:center;
}

الكود الرابع هو كود عنوان المشاركة هو (h3)

الكود:

h3{
background: url('http://i12.servimg.com/u/f12/17/99/16/42/s110.png');
background-repeat:repeat-x;
height:60px;
width:253px;
padding: 20px 20px 20px 20px;
text-align:center;
float:center; 
}

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

ما الان سوف اشرح إضافة أداة (HTML/JavaScript ) التي هي اساس المدونة وكيف اتعامل معها يوجد في المثل السابقة للمدونة نوعان من الصورة مع انهما يحملان نفس الكود اما الصرة تختلف عن الاخر وهدف من اختيار لصورة مختلفة عن الاخرى لتوضيح شيئ مهم لكل مبتداء كي يكون التصميم سهل بنسبة اليه
إضافة أداة (HTML/JavaScript ) هي في الاصل (h2) تأتي بعد العنوان الرئسي في الترتيب اي (h1)و (h2)و (h3) ...الى اخرى
لكن لم استعمل الاسم الاساسي إضافة أداة (HTML/JavaScript ) الذي هو (h2) بل استخدمة اسم اخر وهو اسم(id='HTML1') لانه يعطيني الترقيم لإضافة أداة (HTML/JavaScript ) من رقم اي لإضافة أداة الاول لى (HTML/JavaScript ) الى لإضافة أداة (HTML/JavaScript ) الاخير التي اضيفها الى مدونة حتى ان كان العدد تجاوز 100 اي من 1 الى 100 واستطيع التحكم في التصميم اي اعطي كل إضافة أداة (HTML/JavaScript ) تصميم خاصبها او صور
اي سوف تجد او كيف تعرف عدد إضافة أداة (HTML/JavaScript ) في مدونتك
توجه الى مدونتك تسجيل الدخول الى
لوحة التحكم ثم قالب ثم ( تحرير HTML) وانزل الى اسفل الصفحة سوف تجد مثل هاته الاكود التي نسختها من صفحة ( تحرير HTML) المدونة مدونة النموذج لزهرات البستان

الكود:

<b:section-contents id='sidebar-right-1'>
<b:widget id='HTML1' locked='false' title='اخر المواضيع منتدى زهرات البستان' type='HTML'/>
<b:widget id='HTML2' locked='false' title='اخر المواضيع منتدى زهرات البستان' type='HTML'/>

هذ ما يخص كيفية اعطاء لكل إضافة أداة (HTML/JavaScript ) تصميم خاص بها او صورة او الشكل الذي يعجبك

هذ الكود إضافة أداة (HTML/JavaScript ) رقم1

الكود:

#HTML1{
background: url('http://i12.servimg.com/u/f12/17/99/16/42/s110.png')#cccccc;
background-repeat: no-repeat;
height: 324px;
padding: 20px 25px 25px 20px;
margin: 22px  -25px -18px;
width:260px;
text-align:center;
}

هذ الكود إضافة أداة (HTML/JavaScript ) رقم2 هو نفس الكود الا الصورة تختلف على الكود رقم1

الكود:

#HTML2{
background: url('http://i12.servimg.com/u/f12/17/99/16/42/2110.gif')#cccccc;
background-repeat: no-repeat;
height: 324px;
padding: 20px 25px 25px 20px;
margin: 22px  -25px -18px;
width:260px;
text-align:center;
}

كل هاته الاكود لها مكان خاص بها وهي صفحة (css) الخاصة بالمدونة بعد تسجيل الدخةل الى مدونتك
لوحة التحكم ثم قالب ثم تخصيص ثم من القائمة متقدم ثم انزل بالقائمة المنزلق الى الاسف الفائمة اضغط على اضافة (css)
سوف تضهر لك صفحة (css) انسخ الاكواد من (body) الى (#HTML2) اي كل الاكود ثم اضغط على تطبيق على المدونة
ان اردت ان تشاهد المثل على مدونتك