أرشيف مواضيع المدونة

أدلة مدونات

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

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

أضف موقعك إلينا

انسخ هذا الكود و الصقه في موقعك او مدونتك:
www.adsense-pub.blogspot.com. يتم التشغيل بواسطة Blogger.

هل لديك العديد من المدونات او المواقع ؟ و ليس لديك الوقت للاضافة جديدها الى تويتر،

لذا لا تقلق، فخدمة موقع تويتر فييد، توفر عليك عناء وضع تحديثات موقعك او مدونتك.

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

و البدء في استخدامها، لذا تابع معي عملية التسجيل:


-) ادخل الى الموقع من هنا:

Twitterfeed.com

ثم اختر التسجيل:





بعد التسجيل، تأتيك صفحة اضافة تغذية جديدة،

عندها سيطلب منك السماح لتويتر فييد، بالدخول الى حسابك في تويتر.

و اتبع التالي مثل الصورة:






-) اضغط على Allow لتسمح للموقع بدخول حسابك على تويتر:






بعد ذلك اكتب اسم التغذية و بعد ذلك عنوان تغذية RSS لموقعك او مدونتك،

و اضغط على Create Feed ، مثل الصورة:





-) عندها سيقوم الموقع بالتحقق من موقعك في كل ساعة اذا كان يوجد جديد به،

ثم يقوم بتوترته في تويتر، و طبعا يمكنك تعديل هذه المدة لتزيد او لتقصر.

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







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



لنقل انه في يوم من الايام حصلت على النتيجة الاولى في جوجل عند البحث عن جملة معينة،

فهل تعتقد ان هذه النتيجة هي في جميع فروع جوجل العالمية؟، انت مخطئ تماما !



فحتى في نتائج البحث يستخدم جوجل الاستهداف الجغرافي (Geo Targeting)، فنتيجة بحث مناسبة

في السعودية، قد لا تكون مناسبة في الجزائر، و هذا حسب المنطقة.

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



صورة لسباق الخيل بغرداية الجزائر ، لتوفيق خريش



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

و اذا لم تكن قد حصلت على النتيجة الاولى في جوجل الانجليزي، فلا تقلق فقد تكون

قد حصلت عليها في جوجل الهند !

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


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

و كما يعرف الجميع : محركات البحث تحب المواقع الغنية بالمحتوى المفيد للزوار.


اغرب ما في الامر هو ظهور هذا الموقع بدون مقدمات و اسباب واضحة، فهو مثله مثل اي موقع

اجتماعي آخر، فهو يمزج في خدماته بين البحث عن اصدقاء و التعارف و التحدث معهم.

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

مع اصدقاءك و كأنك فاتح الماسنجر فعلا.





هدف هذه الخدمة حسب ما يقوله الموقع هو : تسهيل التعارف و الحصول على اصدقاء و البقاء متصلا،

مما قد يجعلك تتساءل : لماذا مثل هذا الموقع؟ و ما هي خطة مايكروسوفت،

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


اذا بدأت في تصفح ويندوز لايف بلانت ، ستجد انه يجمع بين خدمات من مثل : فايسبوك، و تويتر و فرند فييد،

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

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

بعض من الاصدقاء الجدد.


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


اليوم سأشرح طريقة وضع اكواد HTML او PHP او اي اكواد اخرى بداخل مواضيع مدونة بلوجر،

المشكلة انه لو انت وضعت الكود مباشرة في الموضوع، فسيتم معالجته على انه كود HTML و يتم

ترجمته من طرف المتصفح. و لن يظهر كما تريده. لذا لحل هذه المشكلة، اتبع الطريقة التالية.


1) كتابة اكواد HTML بداخل مواضيع بلوجر:


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

و الصقه في هذا الموقع:

http://centricle.com/tools/html-entities/

ثم اضغط على encode مثل ما هو مبيّن في الصورة:



بعد ذلك ينتج لك كود جديد (معدّل من السابق).



قم بنسخه، و ضعه في الموضوع عادي جدا،

و عندما تنشر الموضوع سيظهر الكود بشكل جيد للزوار و بدون اي مشكل.


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

<hr>
<p>Arab publishers Blog</p>



2) تنسيق الاكواد في مدونة بلوجر:



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

على عشرات الاسطر، حتما سيأخذ مكانا كبيرا من الموضوع، فما رأيك ان نقوم بتنسيقها و نضعها

بداخل اطار جميل و بالعرض و الارتفاع الذي نريده، تابع معي.


ادخل الى تحرير HTLM في لوحة تحكم مدونتك.

و ابحث لنا عن التالي:


]]></b:skin>


و اضف قبله التالي:


#code {

padding:5px;

border:1px dashed;

background-color:#a4ddff;

direction: ltr;

text-align: left;

height:100px;

overflow-y:scroll;

}


* خلفية اطار الكود


* ارتفاع اطار الكود


و قم بالحفظ.

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


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

ثم اضغط على HTML في صندوق تحرير الموضوع.



ثم ابحث عن الكود الذي وضعته.


و اضفه بداخل اطار (خلية) مستعملا تنسيق الاطار الذي وضعناه.

مثل ما هو موضح في الصورة:




شرح اكثر لما قمنا به:


<div id="code">

<hr>

<p>Arab publishers Blog</p>

</div>



مثال عن النتيجة، بعد النشر:


<hr>
<p>Arab publishers Blog</p>



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

في تطبيق الدرس، خاصة المبرمجين العرب.



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

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


1) قائمة آخر مواضيع المدونة:


هذه اضافة مميزة فهي تسهل على الزائر رؤية آخر مواضيع المدونة و هكذا لن يفوت اي موضوع

في مدونتك، و لاضافته اتبع الطريقة التالية:


ادخل الى التخطيط >> عناصر الصفحة

و اضف اداة جديدة في السايد بار : و هي تغذية Feed




و اكتب العنوان التالي فيها:

http://arab-publishers.blogspot.com/rss.xml


و طبعا غير المنطقة الملونة الى عنوان مدونتك.

و اضغط على المواصلة.

و اختر الاعدادات التي تريد، و قم بتسمية الاداة مثلما تشاء، مثلا: آخر مواضيع المدونة


ثم اضغط على حفظ، و ها قد حصلة على قائمة بآخر مواضيع مدونتك

و يمكنك كذلك ان تضع آخر مواضيع مدونة آخرى غير مدونتك.


2) قائمة آخر التعليقات:


و طريقة الحصول عليها مثل طريقة آخر مواضيع المدونة،،

اتبع التالي:


التخطيط >> عناصر الصفحة

و اضف اداة جديدة في سايد بار/فوتر مدونتك ، تغذية Feed




و اكتب العنوان التالي:

http://arab-publishers.blogspot.com/feeds/comments/default

و طبعا غير المنطقة الملونة الى عنوان مدونتك.

و اضغط على المواصلة

و سيظهر لك التالي:




و اختر عدد التعليقات الذي تريد عرضه و الاعدادات الاخرى

ثم اضغط على حفظ.


3) اداة تحديثات تويتر:


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

بلوجر تمكنك من عرض تحديثاتك و للحصول عليها :


اضف اداة جديدة في السايد بار/فوتر مدونتك

و اتبع مثل ما هو في الصورة،




بعد ذلك اختر الاعدادات مثل: اسم حسابك على تويتر، عدد التحديثات،،

و الاعدادت الاخرى او اترك الافتراضية و اضغط على حفظ.


و ها قد انهيت.


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

اللهم استرنا فوق الارض و تحت الارض و يوم العرض انك غفور رحيم.


ارجو ان تكونوا استفدتم، و اي استفسار عن الدورة تفضلوا

و تحياتي اليكم ايها الناشرون العرب.


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

و ذلك لظروف عائلية، اليوم نواصل، و بعد درس تصميم سايد بار جميل ننتقل اليوم الى

تصميم فوتر مدونة احترافي و نضع فيه اشياء جميلة و تزيد المدونة ابداعا و احترافية.


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

سنقوم بصنع فوتر بـ 3 خانات مثل ما هو موجود في مدونة الناشرون العرب.


1) صنع فوتر بثلاث خانات:





- اولا خذ نسخة احتياطية من ستايل المدونة حتى نتجنب الكوارث باذن الله،

و اذا كان عندك ادوات في الفوتر انقلها للسايد بار حتى لا تفقدها.


- بعد ذلك:

التخطيط >> تحرير HTML


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


]]></b:skin>

</head>



و اضف فوقه:



#footer-columns {

border-top:1px solid #999999;

clear:both;

margin:0 auto;

background: #ffffff;

}

#footer-columns h2 {

margin: 1.6em 0 .5em;

font: bold 16px Arial;

padding:10px;

background: #ffffff url(http://img159.imageshack.us/img159/9099/toolbg.jpg) no-repeat center right;

color: #9b2d15;

}

.column1 {

padding: 0px 5px 3px 5px;

width: 30%;

float: left;

margin:3px;

text-align: right;

}

.column2 {

padding: 0px 5px 3px 5px;

width: 31%;

float: left;

margin:3px 3px 3px 5px;

text-align: right;

}

.column3 {

padding: 0px 5px 3px 5px;

width: 30%;

float: right;

margin:3px;

text-align: right;

}

.addwidget {

padding: 0 0 0 0;

}

#footer-columns ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

#footer-columns li {

margin:0;

padding-top:0;

padding-left:0;

padding-bottom:.25em;

padding-right:15px;

text-indent:-15px;

line-height:1.5em;

}

body#layout #footer-columns {

width: 100%;

margin-left: auto;

margin-right: auto;

}

body#layout .column1 {

width: 32%;

float: left;

}

body#layout .column2 {

width: 32%;

float: left;

}

body#layout .column3 {

width: 32%;

float: right;

}



السطر الملون هو ستايل خلفية عنوان الادوات التي ستضعها في الفوتر، غير فيه مثلما تشاء.

و قم بالحفظ،، و نحن الان انتهينا من وضع ستايل الخانات الثلاث.


بعد ذلك ابحث عن:


<b:section class='footer' id='footer'/>


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


<div id='footer-columns'>

<div class='column1'>

<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column2'>

<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>

</b:section>

</div>

<div class='column3'>

<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>

</b:section>

</div>

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

</div>

<b:section class='footer' id='footer'/>




و بعد ذلك قم بالحفظ،،


انتقل الان الى عناصر الصفحة.

و ستجد ان شاء الله ثلاث خانات في الفوتر لتضع فيها ادواتك مثل ما يحلو لك.


2) وضع قائمة وصلات مفيدة للزائر اسفل المدونة:

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

التعرف اكثر على المدونة، مثل وصلة اتصل بنا، و خلاصة RSS و الصفحة الرئيسية الخ.

لذا سنضع الان مجموعة وصلات جميلة اسفل المدونة.


ادخل الى التخطيط >> عناصر الصفحة

و اضف اداة HTML جديدة في الفوتر.





و ضع فيها الكود التالي:


<center><a href="http://arab-publishers.blogspot.com">الصفحة الرئيسية</a> |

<a href="http://arab-publishers.blogspot.com/rss.xml">خلاصة RSS</a> |

<a href="contact link or email">اتصل بنا</a> |

<a href="about us link">عن المدونة</a> |

<a href="privacy link">privacy</a></center>


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

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


ارجو ان تستفيدوا من هذا الدرس، و اعذروني في هذه الفترة و ادعولي

و ان شاء نواصل، بارك الله فيكم.

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

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


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

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

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


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

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% مع اغلب المتصفحات.

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


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


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



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