إضافة إيقونات الإبتسامات في تعليقات مدونات بلوجر

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

• الطريقة الأولى :

سوف نقوم بعمل أيقونات على هذا الشكل و تكون فوق صندوق التعليقات 

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

<b:if cond='data:post.embedCommentForm'>

 ثم قم بلصق الكود التالي بعده :

<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>

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

الآن قم بالبحث عن هذا الكود :

</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.monte-escalier-prix.org' 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.monte-escalier-prix.org' 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.monte-escalier-prix.org' 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.monte-escalier-prix.org'>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 {

 وأخيرا قم بحفظ القالب  . 

أتمنى أن تعجبكم كلتا الطريقتين ،فلكم حرية الإختيار ،في إنتظار آرائكم وإقتراحاتكم ،دمتم بود