إبتسامات للتعليقات في بلوجر

 

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

لنمر إذا الآن إلى طريقة التركيب وهي سهلة جدا، حيث أن أول ما يتوجب علينا فعله هو الدخول إلى القالب ثم تعديل HTML وبعد ذلك نضيف الكود التالي قبل وسم </body> 

<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://arblab.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>

</b:if>

الآن وقبل ]]></b:skin> نضيف الكود التالي :

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

  right:10px;

  border-top:10px solid #860000;

  border-left:20px solid transparent;

  width:0;

  height:0;

  line-height:0;

} 

وأخيرا نضيف هذا الكود قبل وسم </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

 ولأي سؤال أو مشكل الرجاء التفضل عبر التعليقات