اضافة ايقونات الابتسامات متحركة

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

مرحباً بكم في شرح جديد علي مدونة محترف الانترنت

شرح اليوم متعلق بي قوالب بلوجر وهو كيفية اضافة تعبيرات الوجه عند تعليقات مثال انظر الى الصورة

كما رايتم صورة الاضافة كام هي شيك جداااً

الان ندخل في شرح

قبل كل شيئ اخذ نسخة احطياطية للقالب لتفادي الاخطاء ..

1- اذهب الى لوحة تحكم المدونة

2- ثم انقر على القالب ثم تحرير HTML

3- ابحث عن

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

background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));

background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

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'/>