دورة تصميم ستايلات بلوجر
الادلة
الدرس 4 : تصميم سايد بار جميل | دورة تصميم ستايلات بلوجر
10:21 ص | مرسلة بواسطة
العربي |
1 التعليقات
1 التعليقات
بعد ان انتهينا من طريقة زخرفة و تزيين منطقة المواضيع في المدونة،، اليوم رح ننتقل الى
السايد بار و نحاول اننا نعدل فيه علشان نحصل على نتيجة جميلة باذن الله.
درس اليوم رح يكون بسيط و رح نتكلم عن السايد بار بشكل عام،، و عناصر السايد بار
(عنوان الاداة + محتوى الاداة).
لذا من الافضل ان نبدأ و نتوكل على الله.
*) التحكم بستايل السايد بار بشكل عام:
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)