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

 أيقونات ابتسامات





 السلام عليكم ....موضوع اليوم سوف نقوم بعمل 

أيقونات ذات الشكل احترافي وتكون فوق صندوق 

التعليقات مثل مدونة فرست ، هذه الإضافة مهمة 

لكل مدون ،بحيث تتيح لمتتبعي مدونتك من تعبير 

عن أرائهم بواسطة تعابير الوجه ، إضافة الى 

ذلك 

الشكل الذي تتخده المدونة .


 نحن كما تعلمون أن في بعض الأحيان نحتاج 

للتعبير عن ما بداخلنا ،لكن الكلمات أحيانا لا

 تفي بالغرض لذلك سوف نقوم بإضافة أيقونات 

تعبيرية نستغني بها أحيانا عن الكلام .


تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.



1. تسجيل حسابك في Blogger

2. على لوحة التحكم الرئيسية اختر 

قالب » تحرير HTML

3.
قم بالبحث عن الكود </body> بالإستعانة بلوحة التحكم (CTRL+F).

4.قم بوضع الكود التالى فوقة


  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(document).ready(function () {emoticonx({
    emoRange:"#comments p, div.emoWrap",
    putEmoAbove:"iframe#comment-editor",
    topText:"اضغط لمشاهدة رمز!",
    emoMessage:"لإدخال التعبيرات واحد على الأقل مسافة قبل رموز التعبيرات"
    })
    });
    //]]>
    </script>
    <script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
    </b:if>


5.قم بالبحث عن الكود  ]]></b:skin> بالإستعانة بلوحة التحكم (CTRL+F).

6.قم بوضع الكود التالى فوقة


 .emoWrap {
      position:relative;
      padding:10px;
      margin-bottom:7px;
      background:#fff;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
    /* Opera */
    background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
      border:3px solid #860000;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
      font-weight:normal;
      color:#333;
    }
    .emoWrap:after {
      content:"";
      position:absolute;
      bottom:-10px;
      left:10px;
      border-top:10px solid #860000;
      border-right:20px solid transparent;
      width:0;
      height:0;
      line-height:0;
    }





قد يعجيك هذا أيضًا

ليست هناك تعليقات:

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي