السلام عليكم ورحمة الله تعالى وبركاته ،توصلت بعدة رسائل تطلب مني شرح إضافات أيقونات الإبتسامات على تعليقات المدونة ،فها أنا ذا ألبي الطلب بكل سرور ،كما تعلمون أن في بعض الأحيان نحتاج للتعبير عن ما بداخلنا ،لكن الكلمات أحيانا لا تفي بالغرض لذلك سوف نقوم بإضافة أيقونات تعبيرية نستغني بها أحيانا عن الكلام .
سوف أعرض عليكم اليوم طريقتين لعمل ذلك أو بالأحرى نوعين من الأيقونات ،أولها قام بعملها الأخ الكريم سفيان صاحب مدونة Leblogger والطريقة الثانية من إجتهادي الخاص .
الآن قم بالبحث عن هذا الكود :
ملاحظة هامة : إذا كنت تستعمل إضافة " تمييز تعليق الكاتب عن الزوار " فهناك إحتمال أن لا تظهر لك الأيقونات عندما تكتبها أنت ،لذلك يجب عليك القيام ببعض التعديلات لإصلاح الأمر ,قم بمعاينة الأداة قبل تطبيق ما يلي
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
أتمنى أن تعجبكم كلتا الطريقتين ،فلكم حرية الإختيار ،في إنتظار آرائكم وإقتراحاتكم ،دمتم بود
سوف أعرض عليكم اليوم طريقتين لعمل ذلك أو بالأحرى نوعين من الأيقونات ،أولها قام بعملها الأخ الكريم سفيان صاحب مدونة Leblogger والطريقة الثانية من إجتهادي الخاص .
- الطريقة الأولى :
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).ثم قم بلصق الكود التالي بعده :<b:if cond='data:post.embedCommentForm'>
ملاحظة : عند تطبيقي لهذا الكود لأول مرة واجهتني مشكلة تنسيق الأيقونات مع الرموز الخاصة بها حيث كانت تظهر بشكل مبعثر حتى قمت بإضافة الوسم direction:ltr ثم حلت المشكلة ،فهذا راجع إلى أن المدونة معربة لذلك إذا كانت مدونتك ذات محتوى إنجليزي قم بحذف ذلك الوسم من الكود .<div style='background:#FFFFFF; border:2px solid #EDEDED; display:block; padding: 1px 1px 1px 1px; margin: 1px 3px 1px 3px;text-align: center; direction:ltr; color:#ccc;'><b><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger1.gif' width='30'/> :)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger2.gif' width='30'/> =))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger3.gif' width='30'/> :-T<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger4.gif' width='30'/> =((<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger5.gif' width='30'/> :-L<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger6.gif' width='30'/> b-(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger7.gif' width='30'/> :)(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger8.gif' width='30'/> ;))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger9.gif' width='30'/> :(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger10.gif' width='30'/> :x<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger11.gif' width='30'/> :z<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger12.gif' width='30'/> ;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger13.gif' width='30'/> :D<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger14.gif' width='30'/> :a<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger15.gif' width='30'/> :((<a href='http://wwww.leblogger.com' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger16.gif' width='30'/> x(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger17.gif' width='30'/> ;;)<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger18.gif' width='30'/> =)(<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger19.gif' width='30'/> :p<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger20.gif' width='30'/> :))<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger21.gif' width='30'/> :-o<img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger22.gif' width='30'/> :-*<a href='http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html' style='display:none;'>Blogger</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger23.gif' width='30'/> 8-)<a href='http://www.leblogger.com/2009/06/smiley-emoticone-commentaire-blogger.html' style='display:none;'>Smiley</a><img border='0' height='30' src='http://lewordpress.com/Blogger/Image/Onion30/LeBlogger24.gif' width='30'/> 8-(</b></div>
الآن قم بالبحث عن هذا الكود :
ثم قم بوضع الكود التالي قبله :</body>
وأخيرا قم بحفظ القالب .<script src='http://leblogger.googlecode.com/files/LeBloggerOnions30.js' type='text/javascript'/><noscript><a href="http://www.leblogger.com/2009/11/onion-head-smileys-commentaire-messages.html">Onion</a><a href="http://www.leblogger.com">blogspot</a></noscript>
- الطريقة الثانية :
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).ثم قم بلصق الكود التالي بعده :<b:if cond='data:post.embedCommentForm'>
الآن قم بالبحث عن هذا الكود :<div style='background:#F8F8FF; border:2px solid #F0F0F0; display:block; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;text-align:center; direction:ltr; color:#FE6000;'><b>
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2839%29.png' width='50'/> :))<a href='http://www.abu-iyad.com' style='display:none;'>Blogger</a><img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%282%29.png' width='50'/> ;))
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2828%29.png' width='50'/> ;;)
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2813%29.png' width='50'/> :D<a href='http://www.abu-iyad.com' style='display:none;'>Blogger</a><img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2835%29.png' width='50'/> ;)
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%284%29.png' width='50'/> :p
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2817%29.png' width='50'/> :((
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64.png' width='50'/> :)
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%286%29.png' width='50'/> :(<a href='http://www.abu-iyad.com' style='display:none;'>Smiley</a><img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2814%29.png' width='50'/> =((
<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2824%29.png' width='50'/> =))<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2821%29.png' width='50'/> :-*<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2820%29.png' width='50'/> :x<img border='0' height='50' src='https://sites.google.com/site/lightbox007/emoticon/64%2819%29.png' width='50'/> b-(<img border='0' height='50' src=' https://sites.google.com/site/lightbox007/emoticon/64%281%29.png' width='50'/>:-t<img border='0' height='50' src=' https://sites.google.com/site/lightbox007/emoticon/64%2822%29.png' width='50'/>8-}</b></div>
ثم قم بوضع الكود التالي قبله :</body>
وأخيرا قم بحفظ القالب .<script src='http://abu-iyad.googlecode.com/files/abuiyadSmiley.js.txt' type='text/javascript'/><noscript><a href='http://www.abu-iyad.com/2010/12/blogger-onion-head-smileys.html'>Onion</a><a href='http://www.abu-iyad.com'>smiley</a></noscript>
ملاحظة هامة : إذا كنت تستعمل إضافة " تمييز تعليق الكاتب عن الزوار " فهناك إحتمال أن لا تظهر لك الأيقونات عندما تكتبها أنت ،لذلك يجب عليك القيام ببعض التعديلات لإصلاح الأمر ,قم بمعاينة الأداة قبل تطبيق ما يلي
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
ثم قم ببإستبداله بهذا الكود :<b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>
بعد ذلك ، إبحث عن هذا الكود :<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
ثم قم ببإستبداله بهذا الكود :.blog-author-comment {
وأخيرا قم بحفظ القالب ..comment-body-author {
أتمنى أن تعجبكم كلتا الطريقتين ،فلكم حرية الإختيار ،في إنتظار آرائكم وإقتراحاتكم ،دمتم بود
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
57 التعليقات:
السلام عليكم و رحمة الله و بركاته
جزاك الله كل خير على الأضافات الرائعة و الأحترافية التي تقدمها لنا
الصراحة مدونتك أصبحت موسوعة أعتمد عليها عند تركيبي للأضافات في القوالب التي أصممها
,,
لا يجب أن تشكرني فهذا واجبي أن أساهم و لو بشئ بسيط لمدونتك الرائعة :)
@مدونة عربية جرافيكس
مرحبا بك أخي أحمد ،بارك الله فيك على كلامك المشجع ،أما بالنسبة لشكري لك فهذا أقل ما تستحق ،لأنك فعلا تستحق كل خير ،سررت بتعليقك ، دمت بود :))
دمت مبدعا أخى أبو إياد ,, أسجل متابعة ... :) )):
ممتاز سوف اجرب طريقتك وهدا لتجربة :D
:))Blogger
عليكم السلام ورحمة الله
جميلة جدا سلمت يداك وبارك الله فيك
لمسة حلوة (:
شكرا لقد طلبت ونفذ على طول شكرا
على الموضوع الرائع
جاري التجربه يا ابو إياد
إن شاء الله لما اطبقها هرجع تاني
مشكور يا ابو إياد لتلبية دايماً طلباتنا
شكرا على الاضافة الرائعة
:((
اضافة رائعه وفى غاية الجمال
شكرا لك ابو اياد على ما تقدمة للمدونين العرب
;))
تم التجربه بنجاح يا ابو اياد
مشكوووووور
:) مشكووور يا ابو اياد جزاك الله خير
السلام عليكم،
لا تظهر لديّ الرموز أبدًا؟ ما المشكلة.
قمت بتطبيق الرموز الأولى.
اخوي ابو اياد الرموز ليه ناقصه يعني انت عندك 16 وانا عندي 11
@Andalus
مرحبا أختي أندلس ،إن سبب عدم ظهور الأيقونات لديك ،هو أنك تطبقين فتح التعليقات في نافذة منبثقة ، لذلك يجب عليك إستبدال هذا الإختيار إلى الإختيار " تضمين أدناه" وذلك من إعدادات ثم تعليقات ثم موضع نموذج التعليق ثم ضعي علامة على "تم تضمين الرسالة أدناه" وإنشاء الله سوف تظهر لك الأيقونات ،بالتوفيق :((
@AL-HAGESS.VIP
:( مرحبا ،لقد قمت بإضافة الأيقونات لمدونتي بعد كتابة للموضوع ،وتلبية لرغبتك لقد قمت بإعادة وضع الأكواد مرة أخرى في الموضوع حتى تظهر لك جميع الأيقونات ، ما عليك سوى تطبيق الإضافة من جديد ، بالتوفيق
مشكور اخي الكريم و جاري التركيب :)
بصراحة فوق الرائع
جزاك ربي خيرا
لكن للأسف لم تضبط معي رغم أني لااستعمل خاصية تمييز تعليق الكاتب
@ℓoℓα
مرحبا أختي إذا كان صندوق التعليقات لا يظهر تحت المواضيع ولكتابة تعليق يجب الضغط على الكلمة " إرسال تعليق" فهذا يعني بأنك تستعملين الإختيار " ظهور التعليقات في صفحة منبثقة" لذلك يجب تغيير ذلك الإختيار إلى "تضمين أسفله" وذلك من إعدادات ثم تعليقات ثم موضع نموذج التعليق ثم ضعي علامة على "تم تضمين الرسالة أدناه" وإنشاء الله سوف تظهر لك الأيقونات ،بالتوفيق :x
وقت اضافتي للهاك كان اختياري تضمين الرد اسفل الموضوع ولم يظهر
ثم غيرت الخيار لصفحة كاملة ثم بعد قراءتي لردك مشكورا أعدته لخيار التضمين
وظهر الآن والحمدلله
وافر الشكر
@أبو إياد
شكرًا جزيلًا لك،الان ظهرت الرموز.
مدونتك رائعة بالفعل ومفيدة جدًا.
ننتظر منك الجديد دائمًا.
@Andalus
@lola:-L
يعطيك العافيه
وااااو واخيرا فيسات للبلوجر
يعطيك العافيه ابو اياد
تم تطبيق الطريقة بنجاح ^^
جزاك الله خيرا ياابو اياد
تم تطبيقها في مدونتي
من نجاح الى نجاح ان شاء الله :((
@مدونة ابو معاذ
;)مرحبا أخي أبو معاذ ،هذه العملية تحتاج الكثيرمن الوقت ،حيث يجب عليك إستبدل جميع الأيقونات الزرقاء من الكود الذي أضفته في القالب مع تغيير القياسات من 50 إلى 16 وكذلك القيام بنفس العملية وذلك بالتعديل على كود جافاسكريبت .
ألم تعجبك تلك الأيقونات أم أن حجمها كبير على التي تريد
;))
:))
جزاكم الله خيرا كثيرا
بجد حضرتك ساعدتنى كتير جدا
ربنا يجعله فى ميزان حسناتك
اضافة رائعه جدا اخى الفاضل ابو اياد استمر فى ابداعك وتميزك عن الاخرين
استفسار بسيط: كيف اتمكن من زيادة الاطار الخارجى المحيط بالايقونات حتا يكون موزاى فى الطول لصندوق التعليقات
ولك جزيل الشكر والتقدير مقدما
دومت فى رعايت الله وامنه
برجاء حذف تعليقات فى هذا الموضوع والتى ادت الى تشويش الموضوع
تم حل المشكلة بفضل الله ولك جزيل الشكر والتقدير دومت فى رعايت الله وامنه
:))Blogger
السلام عليكم
للأسف اخوي سويت كل شي
بس مارضى ((=
لما اسوي حفظ القالب مايحفظ
يقعد شوي وبعدين يعطيني خطأ في الصفحه
او لم يتم العثور ع الملقم
مع انه الاتصال تمام
والمدونه كلها شغاله معي
عدا هالاضافه مو راضيه تتصلح معي
انا توي على بداية التدوين
وهذي مدونتي ..وتسعدني زيارتك ومسااعدتي
واني استفيد من خبرااتك
http://misswaw.blogspot.com/
العذر ع الإطااله
;))
السلام عليكم ورحمة الله و بركاته
انا اكتشتفت هذه المدونة مناخرا
ولكن ولله الحمد استفد منها كثير
جزاك الله خيرا على هذه العلم الذي تقوم بشره
سلمت يمناك
تقبل مروري
فائزة بنت هادي
زبطت معي :((
تسلم اخوي أبو إياد ربي يبارك بـ ايامك
:) :)
b-(
يعطيك العافيه ابو اياد الطريقه جدا رائعه
بس ممكن تشرح لي كيف أغير الايقونات ابي غير هالشكلين او ممكن تسوي كود للفيسات الصغيره
ومشكووور =)
رائع جدا
شكرا لك
شكرا لك اخي ولا كن الأيقونات لا تظهر مع اني لا استخدم
إضافة " تمييز تعليق الكاتب عن الزوار "
اولا شكرا لك على هذه الأضافه الرائعه
ثانيا انا ما استخدم
إضافة " تمييز تعليق الكاتب عن الزوار "
وعندي موضع نموذج التعليقات "تم تضمين الرسالة أدناه " ومع ذالك مازالت الأيقونات ماتظهر
اتمنى انك تساعدني
السلام عليكمـ اولا شكرا ليك على اضافات بلوجلر وانت بجد كتير ساعدتينى
انا عندى مشكلة واتمنى منك الرد انا حبيت احط جوجل ادسينس فى المواضيع وعملت كده وكله تمام ولما اجيت احذفه من القالب اتحذفت بس حصلت مشاكل
1_الرسائل اختفت من المدونة العنونا موجودلكن محتويات الرسالة مش موجودة
2_وديه الاهمانى لما بدخل اعمل معاينة من عند القالب او اغيرو وبدوس كائنى بدوس على هوا ومش بيرضى يحفظ القالب او يعمل معاينة اتمنى منك الرد
ولك جزيل الشكـر
شكراا لك أبو إياد
شكرا جزيلا ;))
للاسف جربتها في مدونتي بس ماادري ليش مو راضيه
ودا رابط المدونه
http://nemoama.blogspot.com/
@nemoεïз
يجب عليك تغيير اللغة إلى العربية وذلك من "إعدادات" ثم "تنسيق" في الأسفل تجدين "اللغة" قومي بتغييرها للعربية
:) + ;)) + YOU ARE THE BEAST KEEP GOING ABU-IYAD
@nemoεïз
جربي أن تحذفي ما لون بالأحمر وهي الكلمة ;direction:ltr من الكود الذي قمت بلصقه
حذفته بس مااثر بشي وحاولت احذف السمايلات مارضي كمان
)):
@nemoεïз
أظن أن المشكلة في القالب ،على العموم يمكنك أن ترسلي لي قالب مدونتك للمعاينة على البريد الإلكتروني التالي
mohamed@abu-iyad.com
أخي إنت محشي الكود من روابط مدونتك!!!
إنت بتضرنا بالطريقة هي!!
@mohd amin
عجبتني كلمة "محشي" ظننت نفسي طباخا في أحد المطاعم ....نعم أخي ،كما ورد في الموضوع أن هذه الإضافة من مجهودي الشخصي ومن حقي وضع رابط مدونتي فيه ،كما يحق لك حذف الرابط إذا أردت فما الضرر في ذلك على العموم شكرا علي وجهة نظرك :((