salima
11-01-2013, بتوقيت غرينيتش 07:58 AM
السلام عليكم ورحمة الله تعالى وبركاته ،توصلت بعدة رسائل تطلب مني شرح طريقة إضافات أيقونات الإبتسامات على تعليقات المدونة blog ،فها أنا ذا ألبي الطلب بكل سرور ،كما تعلمون أن في بعض الأحيان نحتاج للتعبير عن ما بداخلنا ،لكن الكلمات أحيانا لا تفي بالغرض لذلك سوف نقوم بإضافة أيقونات تعبيرية نستغني بها أحيانا عن الكلام .
سوف أعرض عليكم اليوم طريقتين لعمل ذلك أو بالأحرى نوعين من الأيقونات ،أولها قام بعملها ا صاحب مدونة blog Leblogger (http://www.leblogger.com/) والطريقة الثانية من إجتهادي الخاص .
http://img682.imageshack.us/img682/9782/emotional.gif
الطريقة الأولى :
سوف نقوم بعمل أيقونات على هذا الشكل و تكون فوق صندوق التعليقات
http://4.bp.blogspot.com/_xDpoN6UfFFY/Swg7XvW7GEI/AAAAAAAABM4/maen3zGlguo/s1600/Onions33.png (http://4.bp.blogspot.com/_xDpoN6UfFFY/Swg7XvW7GEI/AAAAAAAABM4/maen3zGlguo/s1600/Onions33.png)
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة interface المستخدم.
قم بالبحث عن الكود code التالي بالإستعانة بلوحة التحكم (CTRL+F ).
ثم قم بلصق الكود code التالي بعده :
رمز PHP:
<code style="white-space:nowrap"> <code> <div style='background:#F8F8FF; 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/2014/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/2014/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>
</code> </code>
ملاحظة : عند تطبيقي لهذا الكود code لأول مرة واجهتني مشكلة تنسيق الأيقونات مع الرموز الخاصة بها حيث كانت تظهر بشكل مبعثر حتى قمت بإضافة الوسم direction:ltr ثم حلت المشكلة ،فهذا راجع إلى أن المدونة blog معربة لذلك إذا كانت مدونتك ذات محتوى إنجليزي قم بحذف ذلك الوسم من الكود code .
الآن قم بالبحث عن هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> </body>
</code> </code>
ثم قم بوضع الكود code التالي قبله :
رمز PHP:
<code style="white-space:nowrap"> <code> <script src='http://leblogger.googlecode.com/files/LeBloggerOnions30.js' type='text/javascript'/><noscript><a href="http://www.leblogger.com/2014/11/onion-head-smileys-commentaire-messages.html">Onion</a><a href="http://www.leblogger.com">blogspot</a></noscript>
</code> </code>
وأخيرا قم بحفظ القالب template .
الطريقة الثانية :
سوف نقوم بعمل أيقونات على هذا الشكل,وكما أضعها الآن في مدونتي ,حيث حصلت على هذه الأيقونات من عند صديقي العزيز أحمد ،صاحب مدونة blog "عربية جرافيكس" (http://www.3arbia.info/2014/01/40.html) الذي أوجه له شكري على كل ما قدمه للمدونة blog .
https://sites.google.com/site/lightbox007/emoticon/emoticonblogger.JPG (https://sites.google.com/site/lightbox007/emoticon/emoticonblogger.JPG)
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة interface المستخدم.
قم بالبحث عن الكود code التالي بالإستعانة بلوحة التحكم (CTRL+F ).
رمز PHP:
<code style="white-space:nowrap"> <code> <b:if cond='data:post.embedCommentForm'>
</code> </code>
ثم قم بلصق الكود code التالي بعده :
رمز PHP:
<code style="white-space:nowrap"> <code> <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'/> =))</b></div>
</code> </code>
الآن قم بالبحث عن هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> </body>
</code> </code>
ثم قم بوضع الكود code التالي قبله :
رمز PHP:
<code style="white-space:nowrap"> <code> <script src='http://abu-iyad.googlecode.com/files/abuiyadOnionSmiley.js.txt' type='text/javascript'/><noscript><a href='http://www.abu-iyad.com/2014/12/blogger-onion-head-smileys.html'>Onion</a><a href='http://www.abu-iyad.com'>smiley</a></noscript>وأخيرا قم بح
</code> </code>
فظ القالب template .
ملاحظة هامة : إذا كنت تستعمل إضافة " تمييز تعليق الكاتب عن الزوار " فهناك إحتمال أن لا تظهر لك الأيقونات عندما تكتبها أنت ،لذلك يجب عليك القيام ببعض التعديلات لإصلاح الأمر ,قم بمعاينة الأداة قبل تطبيق ما يلي
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة interface المستخدم.
قم بالبحث عن الكود code التالي بالإستعانة بلوحة التحكم (CTRL+F ).
رمز PHP:
<code style="white-space:nowrap"> <code> <b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>
</code> </code>
ثم قم ببإستبداله بهذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
</code> </code>
بعد ذلك ، إبحث عن هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> .blog-author-comment {
</code> </code>
ثم قم ببإستبداله بهذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> .comment-body-author {
</code> </code>
وأخيرا قم بحفظ القالب template .
منقـــول من abu-iyad
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
سوف أعرض عليكم اليوم طريقتين لعمل ذلك أو بالأحرى نوعين من الأيقونات ،أولها قام بعملها ا صاحب مدونة blog Leblogger (http://www.leblogger.com/) والطريقة الثانية من إجتهادي الخاص .
http://img682.imageshack.us/img682/9782/emotional.gif
الطريقة الأولى :
سوف نقوم بعمل أيقونات على هذا الشكل و تكون فوق صندوق التعليقات
http://4.bp.blogspot.com/_xDpoN6UfFFY/Swg7XvW7GEI/AAAAAAAABM4/maen3zGlguo/s1600/Onions33.png (http://4.bp.blogspot.com/_xDpoN6UfFFY/Swg7XvW7GEI/AAAAAAAABM4/maen3zGlguo/s1600/Onions33.png)
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة interface المستخدم.
قم بالبحث عن الكود code التالي بالإستعانة بلوحة التحكم (CTRL+F ).
ثم قم بلصق الكود code التالي بعده :
رمز PHP:
<code style="white-space:nowrap"> <code> <div style='background:#F8F8FF; 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/2014/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/2014/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>
</code> </code>
ملاحظة : عند تطبيقي لهذا الكود code لأول مرة واجهتني مشكلة تنسيق الأيقونات مع الرموز الخاصة بها حيث كانت تظهر بشكل مبعثر حتى قمت بإضافة الوسم direction:ltr ثم حلت المشكلة ،فهذا راجع إلى أن المدونة blog معربة لذلك إذا كانت مدونتك ذات محتوى إنجليزي قم بحذف ذلك الوسم من الكود code .
الآن قم بالبحث عن هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> </body>
</code> </code>
ثم قم بوضع الكود code التالي قبله :
رمز PHP:
<code style="white-space:nowrap"> <code> <script src='http://leblogger.googlecode.com/files/LeBloggerOnions30.js' type='text/javascript'/><noscript><a href="http://www.leblogger.com/2014/11/onion-head-smileys-commentaire-messages.html">Onion</a><a href="http://www.leblogger.com">blogspot</a></noscript>
</code> </code>
وأخيرا قم بحفظ القالب template .
الطريقة الثانية :
سوف نقوم بعمل أيقونات على هذا الشكل,وكما أضعها الآن في مدونتي ,حيث حصلت على هذه الأيقونات من عند صديقي العزيز أحمد ،صاحب مدونة blog "عربية جرافيكس" (http://www.3arbia.info/2014/01/40.html) الذي أوجه له شكري على كل ما قدمه للمدونة blog .
https://sites.google.com/site/lightbox007/emoticon/emoticonblogger.JPG (https://sites.google.com/site/lightbox007/emoticon/emoticonblogger.JPG)
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة interface المستخدم.
قم بالبحث عن الكود code التالي بالإستعانة بلوحة التحكم (CTRL+F ).
رمز PHP:
<code style="white-space:nowrap"> <code> <b:if cond='data:post.embedCommentForm'>
</code> </code>
ثم قم بلصق الكود code التالي بعده :
رمز PHP:
<code style="white-space:nowrap"> <code> <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'/> =))</b></div>
</code> </code>
الآن قم بالبحث عن هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> </body>
</code> </code>
ثم قم بوضع الكود code التالي قبله :
رمز PHP:
<code style="white-space:nowrap"> <code> <script src='http://abu-iyad.googlecode.com/files/abuiyadOnionSmiley.js.txt' type='text/javascript'/><noscript><a href='http://www.abu-iyad.com/2014/12/blogger-onion-head-smileys.html'>Onion</a><a href='http://www.abu-iyad.com'>smiley</a></noscript>وأخيرا قم بح
</code> </code>
فظ القالب template .
ملاحظة هامة : إذا كنت تستعمل إضافة " تمييز تعليق الكاتب عن الزوار " فهناك إحتمال أن لا تظهر لك الأيقونات عندما تكتبها أنت ،لذلك يجب عليك القيام ببعض التعديلات لإصلاح الأمر ,قم بمعاينة الأداة قبل تطبيق ما يلي
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة interface المستخدم.
قم بالبحث عن الكود code التالي بالإستعانة بلوحة التحكم (CTRL+F ).
رمز PHP:
<code style="white-space:nowrap"> <code> <b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>
</code> </code>
ثم قم ببإستبداله بهذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> <b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
</code> </code>
بعد ذلك ، إبحث عن هذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> .blog-author-comment {
</code> </code>
ثم قم ببإستبداله بهذا الكود code :
رمز PHP:
<code style="white-space:nowrap"> <code> .comment-body-author {
</code> </code>
وأخيرا قم بحفظ القالب template .
منقـــول من abu-iyad
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
