الخميس، 29 أغسطس 2013

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


اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم موضوع مميز ستجده فى مدونات عدة ولكن ليس بالطريقة الذى ستقدمها لكم مدونة ابداعاتى ، الموضوع عبارة عن شرح لكيفية اضافة سمايلات متحركة للتعليق على المواضيع فى بلوجر ، الاضافة بسيطة جدا وجميلة للغاية فهى تكسب تعليقاتك الرونق والجمال والان هيا بنا للمعاينة
يمكنك معاينة شكل الاضافة قبل الشروع فى تركيبها >> من هنا
طريقة التركيب 
قم بالدخول إلى القالب ثم تحرير 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'/> 
ثم فى النهاية قم بحفظ النموذج وعاين الاضافة فى اى موضوع من مدونتك 

√ فى انتظار تعليقاتكم المشجعة √
من فضلك اضغظ لايك لمشاهدة لينك التحميل

2 التعليقات:

  1. شكراً أخي الكريم
    لاكن في الأضافة يضهر حولها لون أحمر ممكن كفية أزالته أليك مثال على ذالك في هذا الرابط
    http://abdullahali89.blogspot.com/2013/12/download-whatsapp-computer.html
    لا حظ الشريط الأحمر ممكن كفية أزالته

    ردحذف
    الردود
    1. الامر بسيط اخى العزيز
      ابحث عن 3px solid #860000 واستبدل رقم 3 بالصفر
      ثم ابحث عن 10px solid #860000 واستبدل رقم 10 بالصفر
      اريدك ان تجعل القيم بصفر لكى تغييرها بما يناسبك فيما بعد اذا أردت

      حذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار