بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين .


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

أخوكم محمد

...تابع القراءة

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


.
.
.

...تابع القراءة

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


ثم عند بدأ تدوينة جديدة سنستفيد من الخاصية عبر ضغط زر الفصل كما هو مبين فيما يلي

أما إن كنت تستعمل html لتنسيق التدوينة فيمكنك استعمال هذا الكود لتعيين مكان الفصل

<!--more-->

و فيما يلي الكود الذي لا بد من إضافته لإظهار رابط " اقرأ المزيد " في القوالب المستوردة و طبعا كالعادة نحفظ نسخة احتياطية من القالب :
نضع علامة على المربع الصغير لتوسيع القوالب و نبحث عما يلي :

<data:post.body/>

ثم بعده نضيف هذا الكود و نحفظ القالب :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

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

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

تحياتي!

...تابع القراءة

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

مثال حي يمكن مشاهدته من هنـــــــــا
و هذه صورة للفهرس


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

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://doaib.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

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


رابعا يجب وضع رابط لصفحة الفهرس على الصفحة الرئيسية كما أفعل في مدونتي حيث وضعته بالقائمة العلوية ، أو يوضع بالقائمة الجانبية ... حتى يصل إليه زوار المدونة .
تحياتي :)

...تابع القراءة

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



فورم "اتصل بنا" بواسطة Tom Kenny



تحميل | مشاهدة Demo



فقاعات title بتأثير جميل بواسطة Fez Soft



شرح التركيب | مشاهدة Demo



قائمة مبوبة بتأثير flip بواسطة Webdeveloperplus



شرح التركيب | مشاهدة Demo



فقاعات بتأثير جميل بواسطة Jqueryfordesigners



شرح التركيب | مشاهدة Demo



زر لجميع المفضلات الاجتماعية بواسطة Artviper



شرح التركيب | مشاهدة Demo

...تابع القراءة

بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين. إخواني الكرام في هذا الموضوع سنتعرف و رفقتكم الطيبة إلى طريقة إدراج الأكواد باستعمال SyntaxHighlighter في مدونات بلوجر Blogger و في مدونات ووردبريس Wordpress كذلك. و تجدر الإشارة إلى أن هذه الإضافة تفيد المدونات التعليمية التي اعتاد أصحابها على إدراج أكواد فيها قصد الشرح و التوضيح . لا استعملها في مدونتي و اكتفي بخاصية الاقتباس لعرض الأكواد بغية التبسيط لا غير و لكن سأستعملها في هذا الموضوع توضيحا و تمكينا من التجريب.
أولا هكذا سيظهر الكود بعد تنصيب الإضافة: (هذا الكود لا علاقة له بالإضافة، فقط للمعاينة)

.box-heart{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

1- طريقة تنصيب الإضافة في مدونات بلوجر Blogger

من لوحة التحكم نفتح صفحة تحرير html ثم نحفظ نسخة احتياطية من القالب قبل بدء التعديل.
و نبحث عن :

</head>

قبلها أي فوقها مباشرة نلصق الكود الموالي:

<link href='http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js' type='text/javascript'/>

مرة أخرى نبحث عن:

</body>

و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.ClipboardSwf = &#39;/flash/clipboard.swf&#39;;
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;, true, true, false, 1, false);
}
window.onload = start;
</script>

الآن بعد حفظ القالب سنتعرف طريقة وضع الكود بالتدوينة أو الموضوع.
كما لاحظتم في الكود الأول فإن الإضافة بها عدة ملفات جافاسكريبت كل واحد منها مختص بعرض أكواد لغة برمجة معينة ك php ، java ، javascript ، xml ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :

<pre name="code" class="css">
هنا يوضع الكود
</pre>

أو

<textarea name="code" class="css">
هنا يوضع الكود
</textarea>

طبعا هذا الكود معد لعرض css و منه لعرض أكواد أي لغة أخرى نستبدل css باسم تلك اللغة.
باستعمال pre لعرض كود html تأكد من تعويض الأقواس المعقوفة < و > بما يلي

- < إلى &lt;
- > إلى &gt;

و يمكن القيام بهذه العملية باستعمال هذه الاداة التي تعوض كل الأقواس بكود html دفعة واحدة .
أما إذا استعملت textarea فالمتصفح يتجاهل ما بين وسميها و يعرضها نصا ، إذا فهذه تعد الأبسط و الأسرع.

2 - طريقة تركيب الإضافة على مدونات ووردبريس

• تحميل الإضافة من هنا SyntaxHighlighter Plus
• فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
• تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .
• ثم في التدوينة أو الموضوع ندرج الكود كما يلي:
  

[sourcecode language='css']هنا يوضع الكود[/sourcecode]<br />
يعوض css برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.

تحياتي!

...تابع القراءة

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

الجديد يظهر في هذه الصورة.

مفتاح:
1 - خيار عرض كل التصنيفات أو بعضها فقط ، عند تحديد الثاني يظهر خيار التعديل في أسفله.
2 - عند ضغط "تعديل" تظهر النافذة الصغيرة كما في الصورة و منها يمكنك اختيار التصنيفات التي تريد إظهارها.
3 - هذه لاختيار شكل عرض الأداة، إما لائحة بشكلها العادي أو سحابة أوسمة. يفضل وضع أداتين ، واحدة بشكل لائحة و الأخرى سحابة أوسمة.
4 - تفعيل أو تعطيل عرض الأرقام التي تظهر بجانب التصنيفات و التي تدل على عدد التدوينات المصنفة تحتها.

...تابع القراءة

في هذا الموضوع سنتعرف و رفقتكم الطيبة طريقة إدراج زر نشر التدوينة في تويتر. و كما يعلم الجميع فتويتر أصبح من أكثر الخدمات استعمالا و الكثير من المتصفحين يميل لمشاركة ما وجده من مواضيع مفيدة مع إصدقائه عبر هذه الخدمة السلسة و السهلة . إذن فوضع زر قد يشجع الزوار على ذلك و يسهل عليهم تلك المهمة . لنتابع معا.
القاعدة الذهبية : حفظ نسخة احتياطية من القالب قبل بدء التعديل.
نتوجه وفق هذا المسار: » لوحة تحكم المدونة » التخطيط » تحرير html ثم نضع علامة في خانة توسيع القالب .
و نبحث عن هذا الكود أو ما يشبهه (للبحث في متصفحك اضغط Ctrl+F)

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

ثم بعده مباشرة سنضيف كود الزر المطلوب و نحفظ القالب.
الزر الكبير

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script>
</div>

الزر الصغير

<div style='float:left; margin-right:10px;'>
<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

إما إن أحببت وضع أحد الزرين في جسم التدوينة محاطا بالنص فما عليك سوى إضافة أحد الكودين السابقين (كود الزر الكبير أو كود الصغير) مباشرة قبل هذا الكود

<data:post.body/>

و سيبدو هكذا :

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

.

...تابع القراءة