| 26 تعليقات ]

بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين. إخواني الكرام في هذا الموضوع سنتعرف و رفقتكم الطيبة إلى طريقة إدراج الأكواد باستعمال 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]

يعوض css برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.

تحياتي!


التعليقات : 26

S.M.G

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

أسامة..

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

Unknown

طريقة احترافية..
لكن، يبدو أنها تعتمد على الجافاسكريبت بشكل كبير، مما سيسبب في ثقل التصفح (نوعا ما)..
لذلك، بالنسبة للمستخدمين الذين لا يحتاجون لعرض أكواد بشكل مستمر، تكفيهم الطريقة التالية:
الدخول لBlogger اللوحة التجريبية:
draft.blogger.com
يكتب موضوعه، ويضيف الأكواد بشكل عادي، ثم يؤشر على "إظهار HTML فعليا" في خيارات الرسائل..
بهذه الطريقة ستظهر جميع الأكواد دون تحرير HTML.. ولمن يريد نتيجة أكثر غني يمكنه دمج الكود داخل الإقتباس، ويخصص كلاس محدد بcss لها ليميزها عن بقية الإقتباسات، مثلا..

Unknown

تختلف النتيجة الآن!
غريب، قبل قليل لم يكن الجافاسكريبت يعمل؟
أم أنها معدتي الفارغة فلم أعد أحسن تصفحا :D

Unknown

أخي S.M.G
حياك الله ، الله يحفظك و يحفظ طيب خلقك و كلامك!

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

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

oilgague

بوركت اخي دؤيب

أحمد بن عمر باجابر

أخي (ذئب)

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

من جهة أخرى:
عذرا على عدم الرد على سؤالك الذي سألتنيه في مدونتي عن التعليقات، نعم يا ذؤيب أوقفتها لأسباب يطول شرحها، وأنا هذه الأيام مشغول جدا جدا! (جدا)

ولكن ما زلت أكتب من حين لآخر في المدونة بعض الأشياء لعلك تتابعها، ولم أنسك يا ذؤيب وأنسى خدماتك لي جزاك الله خيرا

Unknown

مرحبا أخي oilgague بوركت و بورك طيب كلمك :)

أخي أحمد مرحبا بك !
بالتوفيق ننتظر دروسك بشغف و ترقب . و الله لك نسال التوفيق و السداد و تيسير الأمور.
أنا دائم المتابعة لمدونتك الغنية!
تقبل الله صيامكم و قيامكم.

أزهار قلبي

إستخدام SyntaxHighlighter عند عرض الأكواد يجعلها تظهر بمظهر جميل ولائق ويضفي على المدونة مزيدا من الاحترام.

جزاك الله كل خير.

أسامة..

أشكرك كثيراً أخي ذؤيب .. هذا ما أقصده وعرفت الطريقة من خلال شرحك

أسامة..

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

Unknown

و عليكم السلام و رحمة الله
مرحبا بكم إخواني الكرام و شكرا على طيب الكلام.

أخي أسامة
1 - توجه إلى صفحة تحرير html و ابحث عن هذا

outer-wrapper
إلى جانبه ستجد
margin:0 auto; width:980px; text-align:left;

2 - استبدل left ب right

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

أسامة..

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

Denvoizer

chokran jaziiiilan akhi

المفكر التربوي إبراهيم رشيد .. اختصاصي صعوبات التعلم والنطق وتعديل السلوك

الاخ ذؤيب حفظه الله
مدونتك اكثر من رائعة
رجاء مدني بنقطة من بحر خبرتك
تصور انني لا استطيع ان اضيف مقالة
وان انسق مدونتي مثلك
مع كل احترامي لكم
وانا اكتب انتطر الرد

--
و تفضلوا بزيارة مدونتي ابراهيم رشيد أبو عمرو
http://alrashid2222gmailcom.blogspot.com
على هذه المدونة يوجد برامج تعليمية مجانية للأطفال يمكنك تنزيلها على جهازك ومواضيع اجتماعية هادفة
alrashid2222@gmail.com

Unknown

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

akhi Denvoizer
barak lahho fik ya akhi lhabib :)

أخي الحبيب إبراهيم رشيد أبو عمرو
العفو أخي ، الحمد لله كلنا مبتدئون و بالتعاون إن شاء الله نوفق . هذا مسنجري أضفني كي نتواصل خصوصا و أنك مهتم بالحقل التربوي مثلي :)
tsunamix5x@hotmail.com
عيدكم مبارك سعيد.

غير معرف

لم ينحج الامر

غير معرف

السلام عليكم اخي اريد رايك في موقعي الشخصي
http://www.cinfilm.com

محمد غراب - الحساب القديم

بعد التركيب أقوم بحفظ التدوينة تظهر لدي رسالة خطأ :
لا يمكن قبول HTML خاصتك: Tag is not allowed: HEAD
إيقاف عرض أخطاء HTML لنص هذه المشاركة
و لابد ان اقوم بالتأشير علي الإختيار الثاني.
لدي استفسار استخدم مواقع تخويل الأقواس المعقوفة؟ للكود الداخلي الذي سوف يظهر في الصندوق أم للكود الأساسي المسئول عن عرض الكود ؟

محمد غراب - الحساب القديم

قمت بتطبيق الدرس علي القالب بطريقة سليمة و متأكد منها 100%
أنظهر هذه التدوينة قمت بعمل تدوينة مشابهة لهذه و أستخدمت الأكواد بشكل سليم و لكن تظهر بداخل صندوق عادي.

ابراهيم رشيد

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الأخ الفاضل ذؤيب حفظكم لله
الشكر كل الشكر
جزآك الله خيرُا لكم مني سلام حار مع احترامي
ويسرني أن أكون متواصلا بشكل دائم معكم اكرر شكري وتقديري واعتزازي بكم
كلنا كالقمر لنا جانب مظلم وانتم البدر...
يا
نورنا من إشعاعات نوركم ونحن حقــًا نتعلم منكم
وتشجيعكم وتوجيهاتكم وتعليقاتكم البناءة سبب لي ولكم بعد الله في النجاح ؛؛
ونفعنا الله وإياكم بما نقدم من أجل الخير والى الأمام دائمًا
وتواصلكم وانضمامكم إلى مجموعتي على facebook يزيدني فخرًا فهذا نبلا منكم
http://www.facebook.com/group.php?gid=123644750984043
شرف لي وتواضعا منكم للضغط على الرابط والانضمام لمجموعتي
"صعوبات التعلم والمفكر التربوي إبراهيم رشيد "
http://alrashid2222gmailcom.blogspot.com/

غير معرف

@ذؤيب
عالمنا

kisho mshakl

تسلم ايدك يا ريس
مدونه فيلم السهره /http://filmevening.blogspot.com

مدونه مسلسلات تركى /http://turkyaonline.blogspot.com

Ell top

شكرا على الموضوع
BookMark
BookMark
BookMark
BookMark

Unknown


دردشة بنات مصرية
لعبه تلبيس البطريق
لعبه قص الاضافر
لعبة الحرب الجديده 2013
لعبه سوبر ماريو الجديده
لعبه المزرعه السعيده
لعبه الدررجات انااريه 2013
لعبه العربيات الجديده
تحميل لعبه توم واجيري 2013
لعبة حرب الدبابات 2013
لعبه حرامي السيارات
لعبه سوبر ماريو الجزء الثاني
لعبة الجراج الجديده
لعبة سوبر ماريو القديمه
لعبه اسبونج بوب 2013
لعبه مايك اب للبنات فقط
لعبه تلبيس للبنات فقط
لعبه تكن
العاب تلبيس للبنات
لعبه تلبيس حقيقي

html5 keygen

Merci :)

إرسال تعليق


يمكن استخدام بعض علامات HTML، مثل <b>, <i>, <a>

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

» معرض قوالب بلوجر مدونة لعرض أفضل القوالب المطروحة على معهد خبراء بلوجر : منتدى خاص بالبلوجر لتبادل الخبرات بين مدوني البلوجر ومشاركة القوالب العربية والمعربة أو الأجنبية إضافة إلى التبادل الإعلاني وطرق الربح عن طريق مدونات بلوجر.