Arab-Publishers Sur FaceBook

إعصار الزوار

إبحث في شبكة الإنترنت


بحث مخصص

كتاب زورو في رياضيات الربح من أدسنس

زورو في رياضيات الربح

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

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

T'chat

أدلة مدونات

اربط موقعك بمدونة الناشرون العرب

انسخ هذا الكود و الصقه في موقعك او مدونتك:

بعد ان انتهينا من طريقة زخرفة و تزيين منطقة المواضيع في المدونة،، اليوم رح ننتقل الى

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


درس اليوم رح يكون بسيط و رح نتكلم عن السايد بار بشكل عام،، و عناصر السايد بار

(عنوان الاداة + محتوى الاداة).

لذا من الافضل ان نبدأ و نتوكل على الله.


*) التحكم بستايل السايد بار بشكل عام:

1) كيف تغير عرض السايد بار:

تحرير HTML

ثم ابحث عن ستايل الغلاف و هو :


#sidebar-wrapper {


و عدل في العرض لتحصل على ما تريد،،


width: 320px;

و طبعا راعي في ذلك عرض غلاف المواضيع،، و الا سينزل السايد بار للاسفل لان عرضه كبير.


2) كيف تغير خلفية السايد بار.

في نفس المنطقة:


#sidebar-wrapper {


قم بتغيير لون الخلفية،، او حتى يمكنك اضافة صورة تتكرر في الخلفية،،


background-color: #ffffff;



3) كيف تضيف حدود للسايد بار:

في نفس المنطقة،،


#sidebar-wrapper {


اضف التالي:


border: 1px solid #000000;


و طبعا غير لون و حجم الحد كما تريد.


*) التحكم في ستايل عنوان الاداة:


1) التحكم في حجم و نوع الخط:

مثال عن النتيجة:



ابحث عن هذه المنطقة:


.sidebar h2 {


و اضف بداخلها،، ستايل الخط الذي تريد،،

مثلا:


font: bold 16px Arial;


و احذف هاذي:


font-size:100%;


حتى لا نقع في تكرير.



2) كيف تغير في خلفية عنوان الاداة:


لو نريد ان نضع خلفية جميلة لعنوان الادوات في السايد بار او تغير لون الخلفية الحالي نتبع ما يلي:

نصمم خلفية جميلة بالفتوشوب او باي برنامج رسم،،

و طبعا نراعي عرض و ارتفاع الخلفية اللي رح نصممها،، و طبعا سيكون عرضها نفس عرض

السايد بار و ارتفاعها معقول شوية مثلا:

325px × 32px (على سبيل المثال فقط)


و انا طلعي التصميم التالي:



ثم نقوم برفعه و الان لنقم بتركيبه:

تحرير HTML >> وابحث عن الكود التالي:


.sidebar h2 {


و احذف التالي حتى لا يتخلبط التصميم:

padding: 4px 5px;

و اضف بداخله:


padding:10px;

background: #ffffff url(http://site.com/image.jpg) no-repeat center right;



و طبعا قم بتغيير عنوان الصورة.

و اضغط على حفظ.


*) التحكم في ستايل محتوى الاداة:


1) تغيير الخلفية:

ابحث عن:


.sidebar .widget-content {


و اضف بداخله:


background:#000000;


واختر اللون الذي يعجبك.

و اذا اردت وضع صورة كخلفية فلا يوجد اي مشكل،،

ضع الكود التالي بدل الذي في الاعلى:


background: #ffffff url(http://url.com/image.jpeg) no-repeat top center;


و قم بالحفظ.



2) كيف تضع حدود:

في نفس المنطقة:


.sidebar .widget-content {


قم بوضع كود وضع الحدود:


border:1px solid #000000;


و غير في شكل الحدود زي ما انت عايز،،

و قم بالحفظ.


*) بونس الدرس:

اضافة اداة جميلة الى السايد بار،،

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

في كل مدونة احترافية،، و هي:

وصلة الى الصفحة الرئيسية + وصلة اضافة الى المفضلة + وصلة الاشتراك RSS


مثال عن الاداة:




-) قم باضافة اداة HTML جديدة في السايد بار:

و انسخ الكود التالي و الصقه:


<center>

<div style="padding:10px;">

<a href="http://arab-publishers.blogspot.com">

<img style="padding:5px;" src="http://img230.imageshack.us/img230/4144/home48.png"/>

</a>

<script>

function bookmark(address,sitename)

{

if (window.sidebar)

{

window.sidebar.addPanel(sitename, address,"");

}

else if( document.all )

{

window.external.AddFavorite(address, sitename);

}

else if( window.opera && window.print )

{

return true;

}

}


</script>

<a href="#" onclick="bookmark('http://arab-publishers.blogspot.com','Arab Publishers')">

<img style="padding:5px;" src="http://img525.imageshack.us/img525/1916/heart48.png"/>
</a>

<a href="http://feeds.feedburner.com/ArabPublishers">

<img style="padding:5px;" src="http://img40.imageshack.us/img40/2025/feedburner48.png"/>

</a>

<br/>

</div></center>



و غير ما يجب تغييره،،


-) ملاحظة:

وصلة الاضافة الى المفضلة،، انا متأكد انها تعمل 100% مع اغلب المتصفحات.

لذا لا تقلق اثناء وضعها.


+ لرؤية مثال حي عن الدرس: مدونة تجارب نووية .


+ تحميل الستايل في هذه المرحلة: من هنــــا



ارجو ان يفيدكم درس اليوم و تقبلوا تحياتي.



13 تعليقات:

سارة العطار

الثلاثاء, يوليو 14, 2009

يقول...

الله يجزيك كل خير يأخى على حسن المواضيع والمساعدة
انا لدى مشكلة بالسايت بار ماهى مشكلة بالظبط وشكل المدونة هكذا ليس سىء ولكن احبذ ان ارجعها كما كانت
السايت بار به الكتابة والروابط ومابداخله عموما تأخذ اقصى اليسار هكذا http://img263.imageshack.us/img263/450/31646560.jpg حيث كانت مسبقا على يمين السايت بار وليس يساره وهذا الطبيعى http://img154.imageshack.us/img154/3624/47952429.jpg


Souhail Omar

الثلاثاء, يوليو 14, 2009

يقول...

الاخت سارا//
يمكننا حل هذه المشكلة بكل سهولة،،

ادخلي الى تحرير HTML

و ابحثي عن هذه المنطقة:

#content-wrapper {

و بداخلها استبدلي:

text-align: left;

بــ:

text-align: right;


و هذا سيحل هذه المشكلة،، و مشكلة عنوان الموضوع ايضا فهو حسب ما ارى يظهر على اليسار.

اذا واجهت اي مشكلة، اسئليني.
تحياتي.


سارة العطار

الثلاثاء, يوليو 14, 2009

يقول...

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


سارة العطار

الثلاثاء, يوليو 14, 2009

يقول...

اخى وجدها عندى هكذا
text-align: $startSide
وعندما حولتها ليمين text-align: right;
جاءت اقصى يمين السايدت بار فتمسح جزء من اول الكلام


Souhail Omar

الثلاثاء, يوليو 14, 2009

يقول...

مرحبا،،
الاخت سارا//

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

+

ابحثي عن منطقة القوائم،، و هي كالتالي:

.sidebar li {
margin: 0;
padding-top: 0;
.....
.....
.....
}

و استبدليها بالتالي:

.sidebar li {
margin: 0;
padding-top: 0;
padding-left: 0;
padding-bottom: .5em;
padding-right: 15px;
text-indent: -15px;
line-height: 1.5em;
}

و سينحل المشكل باذن الله.
و لن يختفي المحتوى.

تحياتي.


New Project

السبت, يوليو 25, 2009

يقول...

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


غير معرف

الثلاثاء, يوليو 28, 2009

يقول...

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


فتح الله

الاثنين, نوفمبر 09, 2009

يقول...

بارك الله فيك اخي على الدرس الرائع مع انو اتعبني كثيرا حتى وصلت الى النتيجة المرجوة يمكنك الاطلاع على النتيجة واعطاء رايك من هنا:

http://asirdabe.blogspot.com
شكرا لك وفي انتظار الجديد والافضل .


el7hanona

الثلاثاء, نوفمبر 24, 2009

يقول...

ميرسى بجد ليك

كتير استفدت

مجهود كبير جزاك الله خير


help

الأحد, ديسمبر 27, 2009

يقول...

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

الرجاء المساعدة


Souhail Omar

الثلاثاء, ديسمبر 29, 2009

يقول...

الاخ help //
قم بالدخول الى عناصر الصفحة ، و اضف اداة جديدة،
ثم اختر اداة HTML/JavaScript و اضف بداخلها محتويات الاداة، و غير ما يجب تغييره، ثم اضغط على حفظ.

و استمتع.

شكرا لمرورك.


أع ـقل مـ ج ـنـونــة

الأحد, مايو 02, 2010

يقول...

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


Unknown

الجمعة, يونيو 11, 2010

يقول...

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


إرسال تعليق