| 30 تعليقات ]

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

تحياتي!


التعليقات : 30

S.M.G

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

اسامة جاب الدين

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

محمد من المغرب

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

محمد من المغرب

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

ذؤيب

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

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

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

oilgague

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

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

أخي (ذئب)

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

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

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

ذؤيب

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

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

أزهار قلبي

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

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

اسامة جاب الدين

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

اسامة جاب الدين

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

ذؤيب

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

أخي أسامة
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

ذؤيب

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

akhi Denvoizer
barak lahho fik ya akhi lhabib :)

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

albohalia

لم ينحج الامر

غير معرف

السلام عليكم اخي اريد رايك في موقعي الشخصي
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/

غير معرف

@ذؤيب
عالمنا

Series Online

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

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

مدونة عز الشباب

شكرا جزيلا لك أخي محمد علي مجهودك

مدونة عز الشباب

إبداعات وترفيه
صوتيات ومرئيات
مناقشات وحوارات
هادف

Ell top

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

ahmed mavo


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

ahmed mavo


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

ahmed mavo


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

html5 keygen

Merci :)

صور مشبات حديثه رخام


السلام عليكم

جزاك الله خيرا اخى على الموضوع الجميل
نفعنا الله واياك بكل خير ونفع بنا العباد

تحياتى لجهدك الطيب
http://mchabat.3abber.com/

إرسال تعليق


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

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

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