2009-04-07

خط النهاية

السلام عليكم ورحمة الله تعالى وبركاته .
بعد أخذ ورد ، وبعد تفكير مطول وتردد كبير ، قرر الأخ أحمد  أن يترك مجال التدوين على الأقل في هذه المدونة ، لذلك إن لم يتوصل أي أحد برد عن تسائل أو استفسار فليكن بعلمه ان الأخ أحمد غير متواجد على الأنترنت لظروف صحية وليس لأنه لا يريد ان يجيب عن ذلك .
دمتم بود وتحيات الأخ أحمد لكل الإخوة والزوار .

2009-02-16

طريقة إظهار أكواد HTML أو java داخل تدويناتك في البلوجر

حقيقة هذه الأيام تكاسلت كثيرا على هذه المدونة ، أصبحت لا أدخلها إلا مرة كل يومين فقط لقراءة تعليقات الزوار أو لمشاهدة ترتيب المدونة ، وأظن أن هذه أنانية مني اتجاهكم لذلك أنا أعتذر من كل زوار المدونة على هذا التقصير ...
قبل الدخول في الموضوع أريد أن أشير إلى أن أحد الإخوان والذي لم أتشرف باسمه لحد الآن هو من سبق و قام بسؤالي عن هذا الموضوع ولولاه لما كنت أكتبه الآن .
حسنا لندخل في الموضوع الآن ، الموضوع وببساطة كما هو العنوان سيقوم بتوضيح طريقة إظهار كود سواء HTML أو java في تدوينتك ، ومن المعروف أنه عندما تقوم بكتابة كود HTML أو java في موضوع فإنه لا يظهر والسبب في ذلك هو أن محرر HTML يعتبره خطأ في التدوينة وبالتالي فإنه يتغاضى عن ترجمته ، لكن نحن لا نريد من المحرر أن يقوم بترجمة الكود بل بإظهاره كما هو وللقيام بهذا سنحتاج المرور من عدة خطوات لن أقول أنها صعبة لكنها تحتاج بعض التركيز لكي تخرج النتيجة كما نريدها ، أظن أن فكرة الموضوع قد وصلت لذلك سأبدأ في شرح خطوات العمل ، والنتيجة ستكون كما الصورة التالية :

HTML أو java

الخطوة الأولى وكما هو معتاد قم بأخذ نسخة احتياطية من قالب مدونتك حتى نتجنب أي كارثة لا قدر الله ، وللقيام بذلك توجه إلى التخطيط ثم تحرير HTML ثم تزيل قالب المدونة كامل .

الخطوة الثانية : اذهب إلى قالبك من خلال تخطيط ثم تحرير HTML ثم قم بالتعليم على خانة توسيع قالب المدونة ، بعد التوسيع اضغط على CTRL+F من أجل البحث عن الكود التالي :
]]></b:skin>
الخطوة الثالثة : بعد الوصول إلى الكود السابق قم بإضافة هذا الكود فوقه ، مهم قم بإضافته فوق الكود السابق .
pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}
الخطوة الرابعة : تأكد من أنك حصلت على نتيجة تشبهة الصورة التالية :
إن حصلت على نتيجة مشابهة ، قم بمعاينة القالب إن لم يظهر أي خطأ فهنيئا لك لقد نجحت في إضافة الكود ، ماعليك الآن سوى حفظ القالب ، والإستعداد إلى الخطوة النهائية .
لكن قبل ذلك لنتوقف قليلا مع الكود الذي أضفناه قبل قليل ، هذا الكود هو عبارة عن أمر يقوم بتأطير الكتابة التي نريدها بواسطة إطار مميز لتلك الكتابة ، وأن تعمدت قول الكتابة وليس كود html لأنه يقوم بتأطير أي شيء يوجد بداخله سواء كتابة أو كود html أو كود java أو حتى صورة .
تستطيع من خلال هذا الكود أيضا أن تتحكم في شكل الإطار ولونه وأبعاده وسمكه ، والصورة التي أمامكم توضح تلك الخواص القابلة للتعديل وهي سهلة للغاية .
لكن السؤال الأهم والضروري وهو كيف أتحكم في الكتابة داخل الإطار وخارجها وقت ما أريد ؟ ، أو بمعنى أصح هو كيف أعلم أنني أكتب داخل الإطار وليس خارجه ؟ .
الإجابة سهلة وهي أن هناك كود آخر يقوم بمناداة الكود السابق لكي يقوم بتأطير الكتابة التي نريدها ، والكود كالتالي :

<pre></pre>


ولكي تظهر الكتابة يجب أن نضيفها داخل <pre> و </pre> وأي كتابة خارج هاذين الكودين ستظهر بشكلها الطبيعي .
وهذه صورة مثال عما أتحدث عليه :


وهذه النتيجة :


الخطوة الخامسة والأخيرة : ما قلته في الخطوة الرابعة ينطبق على الكتابة بالحروف فقط ، أما الكتابة بأكواد html أو java فإليكم الطريقة .
سنحتاج بشكل مستمر إلى أداة postable وهي أداة لا غنى عنها في الوقت الحالي ، وهي تقوم بتحويل الأكواد إلى ما يسمى بالأكواد الصديقة للـ html .
ولكي تستوعب ما أتحدث عنه قم بالتالي : قم بنسخ أي كود يقع تحت عينيك حاليا ، توجه إلى أداة postable قم بلصق الكود داخل المستطيل واضغط على MAKE IT FREINDLY ، ستجد أن الكود قد تحول إلى كتابة غير مفهومة وهذا ما نريد بالضبط أن نصل إليه .

تلخيص لخطوات العمل بكاملها :
بعد أن تصيف الكود إلى قالبك في الخطوات الأولى والثانية والثالثة ، قم بحفظ القالب .
الآن إذا أردت أن تكتب موضوع في مدونتك والموضوع يحتوي بداخله على أكواد فيجب أن تقوم بالتالي :
حول الكود الذي تريد أن تكتبه في موضوعك إلى كود صديق من خلال أداة postable .
الكود الذي حصلت عليه ضعه داخل الكودين التاليين <pre> و </pre> ، من خلال وضع تحرير HTML وليس وضع تأليف .
وهكذا سيظهر الكود مأطر وبشكل سليم داخل التدوينة ، والصورتين في الخطوة الرابعة توضحان الطريقة والنتيجة .

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

2009-02-12

موقع Roundpic لتحديد نمط زاوية الصور

تحديد نمط زاوية الصور
السلام عليكم ورحمة الله تعالى وبركاته .
أصبحنا حاليا وفي أغلب وظائف الأنترنت نستعمل صور بزاوية مستديرة بدرجات مختلفة لعدة أسباب منها أنها تضفي جمالية أكثرللصورة وللمكان الموضوعة فيه ، لكن أبرز سبب يجعل الأغلبية تفضل هذه النوعية الجديدة من الصور هو أنها تجدب انتباه العين ، ففي عدة احصائيات مختلفة كانت نتائج هذه الصور أكثر اجابية من غيرها ، لدى فأغلب المواقع الآن تستخدم هذه الطريقة في الإعلانات لجلب أكثر عدد من الظغطات وهذا ينجح كثيرا .
قبل أن يقدم هذا الموقع خدمة
تحديد نمط زاوية الصور كانت تتم عن طريق برامج تصميم مختلفة وكذلك برامج مخصصة فقط لهذا الغرض ، وفي الغالب كانت تأخذ وقتا أكثر من اللازم ، وطبعا هذا لمن يعرف طريقة تحديدها أما لمن لا يعرف فتلك مشكلة أخرى ، وهذا يبين بالواضح دور هذا الموقع والخدمة القيمة التي يقدمها .
لنتوقف قليلا مع مميزات هذه الخدمة وبعض الملاحظات عليها .
الموقع هو Roundpic وتستطيع من خلاله أن تجعل زوايا الصور مستديرة مثل هذه الصورة :تحديد نمط زاوية الصور
يمكنك كذلك من خلال هذا الموقع أن تحدد أبعاد الصورة وجودتها .
يمكنك أن تختار نوعية الصورة بين العادية JPG و الشفافة PNG .
تستطيع أن تختار حجم الإستدارة التي تريدها ، وهناك 12 حجم مختلف يمكنك أن تختار التي تريده بينها .
لديك الإختيار كذلك في أن تجعل الإستدارة في بعض الزوايا دون غيرها .
يمكنك أن تسمي الصورة قبل أن تحملها .
وطبعا آخر خدمة وهي رفع الصور بحيث بعد الإنتهاء من تعديل الصورة ستجدها مرفوعة على سيرفر الموقع تلقائيا .

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

2009-02-09

إضافة أداة " أعلى الصفحة " إلى البلوجر

أداة  بكل تأكيد سبق لك وشاهدت هذه الإضافة في الكثير من المدونات أو المواقع ، وخصوصا المدونات ذات الصفحة الطويلة جدا التي تجعل الزائر يضيع الكثير من وقته في مشاهدة الصفحة صعودا ونزولا ، لذلك تأتي هذه الأداة لتساعد الزائر في تقليص مدة مشاهدته للصفحة وبالتالي في تسهيل اختياره للموضوع الذي يود قرائته ، كيف ذلك ؟
الأداة مبرمجة لكي تظهر في كل مرة تقوم فيها بالنزول في اتجاه أسفل الصفحة وعندما تقوم بالضغط عليها فهي تقوم بترجمة تلك الضغطة على أنها أمر منك للصعود أعلى الصفحة مرة أخرى بشكل سريع جدا ، وهكذا أنت تقضي وقتك في تصفح الصفحة نزولا فقط وبالتالي فإنك تكسب نصف وقت التصفح الذي تقضيه في الصعود ، ويمكنك أن تجرب الأداة من خلال صفحتي الحالية .
حسنا أظن أن فكرة الأداة قد وصلت وجاء وقت التركيب :
  1. قم بتسجيل دخولك إلى البلوجر ، وتوجه نحو التخطيط ثم عناصر الصفحة
  2. اختر أين تريد أن تضع الأداة ومن الأفضل أن تكون على يمين الصفحة لأن الزائر يستعمل الفأرة بيمينه وبالتالي سيسهل عليه الضغط على الأداة بها .
  3. اضغط على إضافة أداة .
  4. اختر من بين تلك الخواص خاصية HTML/JavaScript .
  5. الآن قم بنسخ هذا الكود وألصقه داخل HTML/JavaScript ، قم بحفظ الأداة تكون قد انتهيت من تركيبها .
<a style="display:scroll;
position:fixed;bottom:5px;right:5px;" href="#"
title="Back to Top"><
img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif"
/></a>
الآن جاء وقت بعض التخصيص داخل الأداة :
ما هو باللون الأحمر هو اتجاه ظهور الأداة يمكنك أن تغيره بهذه الكلمة Left وسيظهر في اليسار عوض اليمين .
ما هو بالصفر هو رابط صورة الأداة إذا كنت لا تحبد الصورة الحالية أو أنها لا تناسب تصميم مدونتك فيمكنك تصميم صورة خاصة بك ورفعها وتعويض الرابط السابق بالرابط الذي الجديد .
هناك أشياء بسيطة يمكنك أن تغيرها داخل الكود لكنها لن تأثر بشكل كبير باستثناء الملاحظتين السابقتين .

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

2009-02-08

إعادة توجيه مدونة البلوجر إلى موقع آخر تختاره

السلام عليكم ورحمة الله تعالى وبركاته .
اليوم سنتحدث عن موضوع مهم جدا وأهميته تكمن في أنه مهما طالت مدة استعمالنا للبلوجر فبالتأكيد سيأتي يوم سنرغب فيه بالإنتقال إلى استضافة خاصة غير مجانية خصوصا لمن هم جادين في تدويناتهم ، لكن ماذا سيحدث لو أن المدونة كسبت زوار أوفياء كثر كيف يمكن أن نخبرهم بالرابط الجديد مع العلم أننا لا نعرف بريدهم الإلكتروني ، هذا فقط بالنسبة للزوار الأوفياء فماذا إذن عن الزوار الآتون عن طريق البحث في كوكل فالبتأكيد هم ضعف العدد السابق ، ستكون حقا خسارة كبيرة جدا لعمل أخد منك جهد كبير ، لذلك هذا الموضوع سيقوم بشرح إعادة توجيه المدونة إلى الموقع الجديد أو إلى مدونة أخرى أو إلى أي رابط تختاره أنت .
الموضوع سينقسم إلى قسمين الأول طريقة إعادة توجيه المدونة والثاني وضع رسالة في واجهة المدونة تخبر فيها الزائر بالرابط الجديد .

القسم الأول :
الخطوة الأولى وكما اقتضت العادة قم بأخذ نسخة احتياطية من مدونتك عن طريق : التخطيط ثم تحرير HTML ثم تنزيل قالب كامل .
الخطوة الثانية وهي التعديل في قالب المدونة وسنقوم فيها أولا بالبحث عن الكود التالي عن طريق الضغط على CTRL+F وإدخال الكود :
<head>
الخطوة الثالثة وهي أن تضيف هذا الكود مباشرة أسفل الكود السابق :
<meta content='1;url=http://www.website.com/blog/' http-equiv='refresh'/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
سنتوقف برهة لنشرح فيها الكود السابق وماذا يعني :
الكود بالأزرق هو مكان الرابط الذي سيتتم إعادة التوجيه له .
الرقم 1 بالأصفر هي المدة المستغرقة بالثانية لإعادة التوجيه .
الكود بالأصفر يقول لمحرك البحث كوكل بأن يتوقف عن أرشفة مواضيع المدونة وهو أمر موجه إلى ملف الروبوتس ROBOTS .

حسنا الآن انتهينا من شرح وإضافة القسم الأول من الموضوع إذا كنت تريد فقط إعادة توجيه المدونة فهذا القسم يكفيك ولا تنسى أن تقوم بحفظ القالب ، أما إذا كنت تريد أن تظهر رسالة في واجهة المدونة فقم بإكمال قراءة الجزء الثاني من الموضوع .

القسم الثاني :
الخطوة الأولى سنقوم فيها بالبحث عن الكود التالي بعد أن نقوم بتوسيع القالب من خلال التأشير على خانة توسيع قوالب عناصر واجهة المستخدم :
<b:section class='main' id='main' showaddelement='no'>
الخطوة الثانية وهي إضافة الكود التالي مباشرة أسفل الكود السابق الذي بحثنا عليه :
<div style='position: absolute; top: 0; left: 0; margin: 30px;
border: solid 2px #333; color: #000; background-color: yellow;
padding: 25px; width: 85%; z-index: 5;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;'>
<p><strong>My blog has moved!</strong></p>
<p>من المفترض أن توجه إلى الموقع الجديد .
إذا لم يحدث ذلك فأرجو أن تضغط على الرابط التالي :
<br/> <a style="color:red;"
href='http://www.website.com/blog/'>
<strong>http://www.website.com/blog/</strong></a>
<br/> ولا تنسى أن تحدث مفضلاتك .</p></div>
لنتوقف أيضا بعض الشيء مع هذا الكود لنقوم بشرح ماهيته :
الأخضر عبارة عن لون الكتابة وخلفية المستطيل الذي سيظهر .
الأصفر حجم الكتابة .
الأحمر وهي الجملة التي تريدها أن تظهر يمكنك أن تغيرها بأي شيء تريده .
الأزرق وهو الرابط الذي تريده أن يظهر داخل المستطيل .

ملاحظات مهمة :
أي شيء ملون هو قابل للتعديل ، ويمكنك أن تختار الألوان التي تريدها من خلال هذا الموضوع .
الجزء الأول من الموضوع يمكنك فيه أن تحذف الجزء الثاني من الكود والذي يقول لمحرك البحث كوكل بأن يتوقف عن أرشفة مواضيع المدونة وهو أمر موجه إلى ملف الروبوتس ROBOTS ، ولن يحدث أي تغيير في إعادة توجيه المدونة .
يمكنك استعمال الكود الأول دون الثاني أو هما معا .
لا تنسى أن تقوم بتوسيع القالب ، وأيضا بحفظه عندما تنتهي من إضافة الأكواد .

انتهى الموضوع بحمد الله ، وتذكر دائما أن الردود مفتوحة لأي استفسار ، ملاحظة أو حتى انتقاد