إبحث في شبكة الإنترنت
بحث مخصص
كتاب زورو في رياضيات الربح من أدسنس
دورة تصميم ستايلات بلوجر
بعد ان انتهينا من طريقة زخرفة و تزيين منطقة المواضيع في المدونة،، اليوم رح ننتقل الى
السايد بار و نحاول اننا نعدل فيه علشان نحصل على نتيجة جميلة باذن الله.
درس اليوم رح يكون بسيط و رح نتكلم عن السايد بار بشكل عام،، و عناصر السايد بار
(عنوان الاداة + محتوى الاداة).
لذا من الافضل ان نبدأ و نتوكل على الله.
*) التحكم بستايل السايد بار بشكل عام:
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% مع اغلب المتصفحات.
لذا لا تقلق اثناء وضعها.
+ لرؤية مثال حي عن الدرس: مدونة تجارب نووية .
+ تحميل الستايل في هذه المرحلة: من هنــــا
ارجو ان يفيدكم درس اليوم و تقبلوا تحياتي.
السايد بار و نحاول اننا نعدل فيه علشان نحصل على نتيجة جميلة باذن الله.
درس اليوم رح يكون بسيط و رح نتكلم عن السايد بار بشكل عام،، و عناصر السايد بار
(عنوان الاداة + محتوى الاداة).
لذا من الافضل ان نبدأ و نتوكل على الله.
*) التحكم بستايل السايد بار بشكل عام:
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% مع اغلب المتصفحات.
لذا لا تقلق اثناء وضعها.
+ لرؤية مثال حي عن الدرس: مدونة تجارب نووية .
+ تحميل الستايل في هذه المرحلة: من هنــــا
ارجو ان يفيدكم درس اليوم و تقبلوا تحياتي.
التسميات
الاشتراك في:
تعليقات الرسالة (Atom)
13 تعليقات:
الثلاثاء, يوليو 14, 2009
يقول...الله يجزيك كل خير يأخى على حسن المواضيع والمساعدة
انا لدى مشكلة بالسايت بار ماهى مشكلة بالظبط وشكل المدونة هكذا ليس سىء ولكن احبذ ان ارجعها كما كانت
السايت بار به الكتابة والروابط ومابداخله عموما تأخذ اقصى اليسار هكذا http://img263.imageshack.us/img263/450/31646560.jpg حيث كانت مسبقا على يمين السايت بار وليس يساره وهذا الطبيعى http://img154.imageshack.us/img154/3624/47952429.jpg
الثلاثاء, يوليو 14, 2009
يقول...الاخت سارا//
يمكننا حل هذه المشكلة بكل سهولة،،
ادخلي الى تحرير HTML
و ابحثي عن هذه المنطقة:
#content-wrapper {
و بداخلها استبدلي:
text-align: left;
بــ:
text-align: right;
و هذا سيحل هذه المشكلة،، و مشكلة عنوان الموضوع ايضا فهو حسب ما ارى يظهر على اليسار.
اذا واجهت اي مشكلة، اسئليني.
تحياتي.
الثلاثاء, يوليو 14, 2009
يقول...الله يكرمك
الحمد لله المشكل انحلت والحمد لله البلوج بقت تماما
جزاك الله كل خير على حسن المساعدة
الثلاثاء, يوليو 14, 2009
يقول...اخى وجدها عندى هكذا
text-align: $startSide
وعندما حولتها ليمين text-align: right;
جاءت اقصى يمين السايدت بار فتمسح جزء من اول الكلام
الثلاثاء, يوليو 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;
}
و سينحل المشكل باذن الله.
و لن يختفي المحتوى.
تحياتي.
السبت, يوليو 25, 2009
يقول...ما شاء الله دروس قيمة فعلا
بانتظار جديدك
الثلاثاء, يوليو 28, 2009
يقول...السلام عليكم
لو سمحت لمل بعدل فى الوان المدونة بتتغير اتجاه العناصر
ممكن تقلى امل ايه علشان اعدلها تانى لاصلها
الاثنين, نوفمبر 09, 2009
يقول...بارك الله فيك اخي على الدرس الرائع مع انو اتعبني كثيرا حتى وصلت الى النتيجة المرجوة يمكنك الاطلاع على النتيجة واعطاء رايك من هنا:
http://asirdabe.blogspot.com
شكرا لك وفي انتظار الجديد والافضل .
الثلاثاء, نوفمبر 24, 2009
يقول...ميرسى بجد ليك
كتير استفدت
مجهود كبير جزاك الله خير
الأحد, ديسمبر 27, 2009
يقول...مشكور أخي على الدرس
و لكن لم أفهم كيفية اضافة اداة جميلة الى السايد بار
الرجاء المساعدة
الثلاثاء, ديسمبر 29, 2009
يقول...الاخ help //
قم بالدخول الى عناصر الصفحة ، و اضف اداة جديدة،
ثم اختر اداة HTML/JavaScript و اضف بداخلها محتويات الاداة، و غير ما يجب تغييره، ثم اضغط على حفظ.
و استمتع.
شكرا لمرورك.
الأحد, مايو 02, 2010
يقول...جزاك الله كل خير
بس عاوزة اعرف ازاى اخلي الحدود مصقولة " او مقوسة شوية عند الاطراف !!
الجمعة, يونيو 11, 2010
يقول...طب ممكن لو سمحت ان ازاى نضيف بار جديد واية الكود اللى نحطة ونحطة فى اى منطقة وبعدين نبقى نعدل فية لأن فى ستايلات مفهاش البار بتاع الرئيسية وشكرا وارجو منك الرد سريعا.........
إرسال تعليق