طريقة اضافة سمايلات او ابتسامات الى تعليقات بلوجر

السلام عليكم ورحمة الله وبركاته .

 

اليوم وفي هذا الدرس سوف اقدم لكم اضافة رائعة جدا لمدونات بلوكر

وهي من الاضافات التي عليها طلب كثير لجماليتها واالشكل الرائع الذي تضيفه

وهي الابتسامات او السمايلات الموجوده فوق صندوق تعليقات بلوكر

والتي تعطي صندوق التعليقات شكل اكثر من رائع والتي ستكون على هذا الشكل .

 

طريقه التركيب :

اذهب الى لوحة التحكم بلوكر ثم قالب تحرير خذ نسخه احتياطيه للقالب

بحال حدوث اخطاء وابحث عن </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://boyz.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;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}

هكذا انتهى درسنا اراكم في تدوينة جديده .