الصفحة الرئيسية
اخر المواضيع
بلوجر
فوتوشوب
الالعاب
برامج

حمل تطبيقنا على الجوال لتتمتع فتجربة أفضل في تصفح اخر اخبار الموقع

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

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




سوف نتعرف اليوم علي طريقة جميلة جدا لوضع تأتيرات متحركه فى التعليقات ،هذه الخاصية تعطي لتعليقات مدونتك جمالية وتنسيق رائع .

اولآ لتركيب الاضافة 

  1. ندخل الى لوحة التحكم فى بلوجر
  2. نقوم باختيار القالب
  3. نقوم بالضغط على تحرير Html
  4. نقوم بالبحث عن الوسام </body>  (نقوم بالبحث بالضغط على Ctrl+F)
  5. نضع الكود التالى فوق الوسام </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'/>

واتمنى ان تعجبكم الاضافة و لا تبخلو علينا بردودكم المشجعة




الاشتراك في: تعليقات الرسالة (Atom)