الثلاثاء، 9 ديسمبر 2014

إضافة ابتسامات متحركة لمدونات بلوجر

إضافة ابتسامات متحركة لمدونات بلوجر

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

الإبتسامات والرموز من الإضافات التي  لا انصح بعدم تركيبها نظراً لانها تسبب الكثير من الثقل في مدونات بلوجر لان غالباً إضافات الإبتسامات تتكون من صور منفرده ومتحركه وجلب كل تلك الروابط يعد عبئ اضافة حتى لطرق اظهارها لكن الإبتسامات والرموز من اكثر الإضافات التي تعطي حيوية للتعليقات وقد تحل محل كثير من الكلمات وتعبر بشكل طيب عن بعض ما قد لا تعطيه الكلمات من معاني لكن الان تم تطويرها وهي صورة واحده يتم تجزئتها وهي تصميم حصري وطريقة تركيبها ايضاً سهله ولا تؤثر في سرعة المدونة ويمكنك تركيبها بإتباع التالي


شرح التركيب

 
  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML

ابحث عن</head>و اضف الكود التالي فوقه
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
الان قم بالبحث عن </body>واضف فوقه هذا الكود
<!-- mudwnp Smily.-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.emoWrap{position:relative;
padding:10px;
margin-bottom:7px;
background:#fff;
background-image:-ms-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:-moz-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:-o-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#fff),color-stop(1,#fff9f2));
background-image:-webkit-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:linear-gradient(to right,#fff 0,#fff9f2 100%);
border:1px solid #ccc;
-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-size:14px;color:#333}
.emoWrap:after{content:&quot;&quot;;position:absolute;bottom:-10px;right:10px;border-top:10px solid #ccc;border-left:20px solid transparent;
width:0;
height:0;
line-height:0}
</style>
<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://dl.dropboxusercontent.com/s/s7x5nalqkatxtlq/bloggerknown-emo.js' type='text/javascript'/></b:if>

اهم الاعدادات

    1. قم بتغيير 14px التي باللون الازرق لتغيير حجم الخط
    2. قم بتغيير #333 لتغيير لون الخط استخدم اكواد الالوان
    3. قم بتغيير الكلمات التي باللون الاحمر بما يناسب مدونتك


      إذا لم تظهر الابتسامات ارجو ترك تعليق لأستطيع حل المشكلة لك

      في امان الله 

      0 التعليقات:

      إرسال تعليق