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

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

يمكنك معاينة شكل الاضافة قبل الشروع فى تركيبها >> من هنا

طريقة التركيب 

قم بالدخول إلى القالب ثم تحرير 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;
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'/> 

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

√ فى انتظار تعليقاتكم المشجعة √