مساحة إعلانية

السبت، 17 مايو، 2014

السبت، 17 مايو، 2014

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

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

<script src='https://cnmu.googlecode.com/svn/trunk/smiley.js' type='text/javascript'/> /*Smile*/
.cnmu-smilet {
  background: url("https://lh4.googleusercontent.com/-b9XQATW9z_g/UwYbrkQLHoI/AAAAAAAADb0/y0NaaxW9mWQ/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
السطر هو رموز الإبتسامات وبالتالي لم تتكلف اى شئ اضافي لإظهاره بعكس الإضافات الأخرى التي تحتاج اكواد مستقله للرسالة
أمر أخير يخص تنسيق الرسالة نفسها , ان اردت توسيط الكتابة في الرسالة يمكنك ان تستخدم الكود التالي
#threaded-comment-form p, .comment-form p {text-align: center !important;}
يمكنك ايضاًُ مراجعة هذا الموضوع ان اردت تركيب التعليقات التفاعلية او ضبط الرسالة بحيث تظهر دائما فوق الصندوق ان كانت تظهر لديك تحته بعد التعليق

هناك 44 تعليقًا:

  1. =q مشكووور اخي على الاضافة الرائعة

    ردحذف
    الردود
    1. الشكر لله يا طيب سررت بمرورك =r

      حذف
  2. يعطيك الف عافية يا غالي

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

    شكرا لك

    =r

    ردحذف
    الردود
    1. لله الحمد وتمنياتي لك بالتوفيق يا طيب

      حذف
  3. شكراً إلك :) لأنك لبيت الطلب أخي =y

    ردحذف
    الردود
    1. =s يسرني ان تجد طلبك في مدونتي المتواضعة يا طيب وشاكر لمرورك العطر =r

      حذف
  4. تم بنجاااااااح
    جداااااااا روووووووووووعه شكرا لكم
    وأضفت هالآية تحت الرموز عشان كل واحد يعلق يتذكر ان في من يراقبه

    ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

    ردحذف
    الردود
    1. بارك الله فيك فالتذكير بالله من أفضل الاعمال جعله الله في ميزان حسناتك وتشرفت بمرورك الكريم

      حذف
  5. اخي الفاضل أنا اضفتها ولكن عند نشر تعليق لاتظهر به ماهو الحل
    انا لا احب نشر الروابط في التعليقات ولكن للمعاينة مدونة بوزوم

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

    ردحذف
  7. أخي ظهرت والحمد الله شكرا علي هذه الاضافة الرائعة والخفيفة جدا با صراحة والله
    هذه الابتسامات خفيفة وجميلة شكرا علي هذا الموضوع المتميز وان شاء الله في انتظار المزيد منك
    بخصوص اخي هل وصلتك رسالة علي ايميلك

    ردحذف
    الردود
    1. شاكر مرورك العطر اخي الكريم واسأل الله لك التوفيق
      بالنسبة للرسالة الحقيقة لا اعلم عن اى رسالة بالضبط تتحدث لكن ان كنت ارسلتها خلال الأسبوع الماضي فيرجى اعادة ارسالها مرة أخرى فلقد كان لدي انقطاع في الإنترنت وتراكمت الرسائل وربما فاتني قراءة بعضها بسبب الكم الكبير

      حذف
  8. =q=q=q=q=q=q=q=q=q=q=q=q=q=q=q=q=q=q=q

    ردحذف
  9. أخي بخصوص كود توسيط الرسالة أضفته ولكن لم يعمل معي هل من حل للمعاينة
    http://ndb2.blogspot.com/2014/07/blog-post_23.html

    ردحذف
    الردود
    1. أخي اضف الكود التالي فوق الوسم ]]></b:skin>
      #respond p {
      text-align: center;
      }

      حذف
  10. اخي عمرو الابتسامات لا تعمل مع العلم اني طبقت الشرح كما ان كود التوسيط ايضا لايعمل هل من حل للمعاينة
    http://blogbzm.blogspot.com/

    ردحذف
    الردود
    1. أخي أكواد الستايل لا تظهر أنها مضافة في مدونتك
      يعني الأكواد التي تضاف فوق الوسم ]]></b:skin>
      لا تظهرو كأنها مضافة نهائياً فإن لم تضيفها أعد اضافتها وان كنت اضفتها جرب تنقل مكانها ستجد كود مشابه لهذا في القالب
      #comments {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 1px solid #FFFFFF;
      font-family: tahoma;
      margin-bottom: 20px;
      padding: 15px 15px 0;
      width: 600px;
      }
      انقلها تحته

      حذف
  11. أخي عمرو انظر الي الابتسامات كيف تظهر عندي والله حيرتني كثيرا
    http://ndb2.blogspot.com/2014/07/alexa.html
    ممكن الحل أخي الكريم أطال الله عمرك

    ردحذف
    الردود
    1. ابحث في قالبك عن كود يشبه هذا أخي الكريم
      #main-wrapper {
      text-shadow: 0 1px 0 #FFFFFF;
      word-wrap: break-word;
      }
      واحذف منه هذا السطر
      text-shadow: 0 1px 0 #FFFFFF;
      ربما تجد الحرف F مكرر ثلاثة مرات فقط لا مشكلة هو الكود فإحذفه
      وبالتوفيق

      حذف
  12. عاشت ايدك اخ كن مبرمج لكن اعتقد انت مبرمج بلغه html لان لاحضتك تتعامل مع اوسمة html بطريقه صحيحة 😄 عاشت ايدك

    ردحذف
    الردود
    1. شكراً لك أخي الفاضل على مرورك ونعم طبيعي في عمل بلوجر يتم استخدام لغة التخطيط HTML لهذا انا اجيد التعامل بها بفضل الله
      تحياتي لك

      حذف
  13. السلام عليكم ورحمة الله

    شكرا لك اخي عمرو على الإضافة الرائعة , تم تـركيبها بنـجاح , الحمد لله

    اخي لدي استفسار اذا ممكن , اذا دخل شخص للمدونة وقام بالتعليق مثلا @@@@@@@@@@@@@@@@@@@@ ... ( بشكل اكثر طبعا )
    يخرج الكلام خارج الإطار , هل ممكن نحدد عرض الكتابة بحيث ما يخرب شكل الصفحة

    وشكرا لك

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      التعليقات لاتي تكون بدون فواصل يعني كـ @@@@@@ قد تخرج عن الإطار في بعض القوالب فالعيب في التعليق نفسه يجب ان يتم كتابته بشكل مضبوط التعليقات التي بهذا الشكل يمكنك حذفها

      حذف
    2. صحيح كلامك اخي , لاني جربت كل الطرق وما عرفت , مساحة التعليق عندي محدودة شوي

      شكرا لك يا غالي , =r

      حذف
  14. r= جزاك الله خيرا

    عند اضافة بتسامه لاتظهر في الرد

    ردحذف
    الردود
    1. لعلك تكتب الكود خطأ فالكود في التعليق يظهر من اليمين لليسار في اللغة العربية انت عليك ان تكتبه كما هو دون النظر عن مظهره داخل صندوق التعليق مثال
      =r ظهرت ايقونة الوردة r= لم تظهر

      حذف
  15. ما قدرت اعملها ساعدوني وقت ما ابحث على ..> ما بلاقيه

    ردحذف
    الردود
    1. الاكواد التي يجب البحث عنها هي جزء من القالب يجب تواجدها
      يرجى مراجعة الشرح التالي لمعرفة طريقة البحث الصحيحة
      http://cnmu.blogspot.com/2013/04/improvements-to-blogger-template.html

      حذف
  16. شكرا لك اخي على الشرح الرائع والاضافة الرائعة لقد سهلت علي كثيرا وهي مختلفة عن الشكل القديم وافضل منه شكرا لك كنت ابحث عنها كثير وبخصوص من يقول انه لا تعمل عند وضعها في التعليقات فتكون من القالب نفسه فأنا جربتها على قالب مدونتي القديم ولم تعمل ولكني الان اضعها على قالب مدونتي الجديد وهي تعمل جيدا وانا اقوم بتطويرها لتكون افضل شكرا لك اخي على الطرح الرائع r=

    ردحذف
  17. =q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

    ردحذف
  18. لو سمحت

    المدونة لما يكون فيها تعليق واحد علي الموضوع تظهر الابتسمات اسفل تعليقات
    ولما المدونة يكون فيها 2 تعليقين علي الموضوع تكون الابتسمات فوق تعليقات
    هل هناك حل لي اجعل الابتسمات فوق تعليقات علي طول ؟

    ردحذف
    الردود
    1. أخي الكريم أنا نوهت عن ذلك في نهاية الموضوع ووضعت رابط موضوع آخر به حل تلك المشكلة هذا هو
      http://cnmu.blogspot.com/2013/04/Blogger-Threaded-Comments.html
      راجع النقطة الثانية في مرحلة لضبط فيه تخص الرسالة ومكان ظهورها
      وبالتوفيق

      حذف
    2. شرح وافي جدا شكرا لشخصك الكريم =r
      لاكن احب ان انوهك علي امر خطير وهي ان جوجل كود سوف تغلق فيجب نقل جميع الاكواد من جوجل كود الي
      github.com
      بلتوفيق لكم جميعا :)

      حذف
    3. حياك الله يا طيب
      جوجل كود قامت بعمل ارشيف للاكواد السابقة ربما تحتفظ بها بهذا الوقع ولا تحذفها
      هي فقط لا تقبل اكواد جديدة وان حدث وحذفت انا بالفعل نقلت الأكواد لعدة حسابات على مواقع مختلفة فلا تقلوا من هذا الامر

      حذف
  19. جميل بس لو عايز اضيف ابتسامة جديدة غير الموجودة ؟ انا ملاحظ ان الاكواد الي مرفوعة علي جوجل كود في اعداد بتزيد 30 رقم دي عشان اضيف ابتسامة جديدة خاصة يعني ازود 30 علي العدد الي قبل اخر سطر ولو مش فاهمني دي صورة بتوضح
    http://up.th3web-ar.ml/do.php?imgf=1448829702971.png

    ردحذف
    الردود
    1. زيادة الإبتسامات يحتاج تعديل كامل على الإضافة هذا الرقم الذي يزيد هو لان جميع الإبتسامات هي صورة واحده فقط
      https://lh4.googleusercontent.com/-b9XQATW9z_g/UwYbrkQLHoI/AAAAAAAADb0/y0NaaxW9mWQ/s3512/smily.png
      وهذا موقع كل ابتسامه , فيجب عليك لتزيد الإبتسامات ان تعدل على الصورة وتزيد عليها بطريقة مضبوطة ثم بعد ذلك تكرر كود السطر وتعدل على رقم موقع الإبتسامات الجديدة

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©