728X90

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

0

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

اضف الكود التالي فوق الوسم </body>

<script src='https://cnmu.googlecode.com/svn/trunk/smiley.js' type='text/javascript'/>

وأضف الكود التالي فوق الوسم ]]></b:skin>

/*Smile*/
.cnmu-smilet {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrztqngvrUeC07EJivSWjHgomj4fyEbm0wfmkn8ajHp8ueVfcB_-957KlldBadzneejzShnCFXTd8h4fGEJ3PAtINfERkvccGlHL2M-gGLpi5lo7dns5srRCg0RtTqdnXBdWomdVdtS_C/s3512/smily.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0) !important;
  display: inline-block;
  height: 20px;
  position: relative;
  width: 20px;
  font: bold 16px arial;
  direction: ltr;
}
.cnmu-smilet:hover {cursor: default;}
.cnmu-smilet:hover:after {
  background: #fff;
  border: 2px solid #0062C4;
  border-radius: 100%;
  bottom: 26px;
  color: #000;
  content: attr(title);
  direction: ltr !important;
  display: inline-block;
  font: bold 16px arial;
  left: 20%;
  padding: 5px 1px;
  position: absolute;
  text-align: center;
  width: 30px;
  z-index: 98;
}

مع تغيير هذا اللون #0062C4 وهو لون إطار التلميحات التي تظهر عند تمرير الماوس على التسميات بلون مناسب لقالبك
فعلياً انت الآن ركبت الإضافة لكن بقي أمر وهو ان توضح للزوار كيف يستخدمونها
قم بالدخول الى إعدادات المدونة ثم >> مشاركات وتعليقات >> ثم قم بتحرير رسالة نموذج التعليقهذه هي الرسالة التي تظهر فوق صندوق التعليق قم بكتابة ما تريد مثلا
"مرر الماوس على الإبتسامات لمعرفة الكود "
أو اى شئ كما تريد ثم اضف السطر التالي في الرسالة

=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

السطر هو رموز الإبتسامات وبالتالي لم تتكلف اى شئ اضافي لإظهاره بعكس الإضافات الأخرى التي تحتاج اكواد مستقله للرسالة
أمر أخير يخص تنسيق الرسالة نفسها , ان اردت توسيط الكتابة في الرسالة يمكنك ان تضيف الكود التالي فوق الوسم ]]></b:skin>

#threaded-comment-form p, .comment-form p {text-align: center !important;}


بقلم محمدعلاء و اسلام تايجر

مدون مصري , ابلغ من العمر 16 سنة , طالب ثانوي , أدون حول البلوجر والتدوين بشكل عام , واكتب مقالات حول تطوير الويب ولغات التصميم وبرامج التصاميم والجرافيك

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)
جميع الحقوق محفوظة لــ مدونة محترف مصر تعمل وبكل فخر بواسطة بلوجر