الأحد، 14 أكتوبر 2012

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



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


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



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

      سوف نقوم بعمل أيقونات على هذا الشكل و تكون فوق صندوق التعليقات
      طريقتين لاضافة إيقونات الإبتسامات في تعليقات مدونات blogger | ابداع ديزاين abda3 design


      انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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://abda3design.blogspot.com/2012/10/blogger_14.html">Onion</a><a href="http://abda3design.blogspot.com">blogspot</a></noscript>
      وأخيرا قم بحفظ القالب  .

        الطريقة الثانية :

           سوف نقوم بعمل أيقونات على هذا الشكل .
          طريقتين لاضافة إيقونات الإبتسامات في تعليقات مدونات blogger | ابداع ديزاين abda3 design


          انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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://abda3design.blogspot.com/2012/10/blogger_14.html'>Onion</a><a href='http://abda3design.blogspot.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 {
           وأخيرا قم بحفظ القالب  .

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

          faseel

          لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل

           





          ضع تعليقك

          0 التعليقات:

          البحــث

          English French German Spain Italian Dutch

          Russian Portuguese Japanese Korean Arabic Chinese Simplified

          المتابعون

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