24‏/09‏/2014


ا
لكل يستخدم مواقع Facebook - Google - Yahoo ...  أظن ان أول شئ صادفك عند تسجيلك  لأول مرة بالمواقع، ظهور مجموعة من التلميحات التي تعرّف لك التطبيقات الموجودة بالموقع. هذه التلميحات تظهر ايضا كلما تم إضافة تحديث او تطبيق جديد بالموقع. ودورها شرح وتوضيح طريقة عمل التطبيق وكيف تجد مركز المساعدة الخاص بوظائف التطبيق الاساسية. ايضا تستعمل في شتى المجالات ,  تم تطبيق التلميح على المدونة ويمكنك مشاهدة المثال بتمرير الماوس على الشعار الخاص بالمدونة أعلاه هذه التلميحات تطبق تلقائيا على عناصر محددة في المدونة منها الأساسية مثل العناوين المشاركات الشائعة وبعض العناصر الأخرى وأيضا تطبق يدويا وسأتطرق لشرحها بعد رفع الأكواد بموقعك 

مثال على نص


مثال على صورة





شرح طريقة التركيب



1 .نتوجه لقالب >> تحرير 

2. ابحث بإستعمال Ctrl+F عن  ]]></b:skin>

3. ضع الكود التالي قبله [ فوقه ]



 /* CSS ToolTip Hm */ .tooltip {display:none;position:absolute;border-radius:5px;box-shadow:2px 2px 3px rgba(0,0,0,.2);background-color:#333;color:#fff;padding:8px 15px;opacity:.9;z-index:10000;max-width:340px;} .tooltip:after {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid transparent;content:'';position: absolute;border-bottom: 10px solid #333;top: -20px;bottom: auto;left: 10px;margin: 0;}

4. ابحث عن <body/>

5. ضع الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[ 
$(function(){
  $('a,img,input,.menu,.close-menu,.translator,img.related-post-item-thumbnail,.fc-members, .fc-members-canvas,h2.post-title a,a.related-post-item-title').not('.paginator,.paginator span a,#subscribe-box input').hover(function(e){ // Hover event
     var titleText = $(this).attr('title');
    $(this)
      .data('tiptext', titleText)
      .removeAttr('title');
   $('<p class="tooltip"></p>')
    .text(titleText)
    .appendTo('body')
    .css('top', (e.pageY - 0) + 'px')
    .css('left', (e.pageX + 5) + 'px')
    .fadeIn('slow');
  }, function(){ // Hover off event
     $(this).attr('title', $(this).data('tiptext'));
    $('.tooltip').remove(); 
  }).mousemove(function(e){ // Mouse move event
     $('.tooltip')
      .css('top', (e.pageY - 0) + 'px')
      .css('left', (e.pageX + 5) + 'px');
 });
});
//]]>
</script>

* الكلمات المحددة بالأصفر هي عناصر رئيسية للقوالب إذا أردت إضافة عنصر ليطبق مثل Popularpost أضفه في أول السطر أو بين الكلمات مثال

 $('Here The Name,a,img,input,.menu,.close-menu,.outer-post,img.related-post-item-thumbnail,')

كما ترون ولتوضيح فقط أضفت كلمة Here The Name في الأول مع الفاصلة

لتطبيق التلميح على صورة أو كلمة معينة عليك بإدراج   ' هنا الكلمة'=Title

مثال

<img border="0" src="رابط الصورة" title="شكرا لكم">

التيتل يضاف كما في الكود المحدد باللون الأصفر

أتمنى أن تستفيدو من الإضافة وماتقدمه أي سؤال يمكن طرحه في خانة التعليقات

ا
لكل يستخدم مواقع Facebook - Google - Yahoo ...  أظن ان أول شئ صادفك عند تسجيلك  لأول مرة بالمواقع، ظهور مجموعة من التلميحات التي تعرّف لك التطبيقات الموجودة بالموقع. هذه التلميحات تظهر ايضا كلما تم إضافة تحديث او تطبيق جديد بالموقع. ودورها شرح وتوضيح طريقة عمل التطبيق وكيف تجد مركز المساعدة الخاص بوظائف التطبيق الاساسية. ايضا تستعمل في شتى المجالات ,  تم تطبيق التلميح على المدونة ويمكنك مشاهدة المثال بتمرير الماوس على الشعار الخاص بالمدونة أعلاه هذه التلميحات تطبق تلقائيا على عناصر محددة في المدونة منها الأساسية مثل العناوين المشاركات الشائعة وبعض العناصر الأخرى وأيضا تطبق يدويا وسأتطرق لشرحها بعد رفع الأكواد بموقعك 

مثال على نص


مثال على صورة





شرح طريقة التركيب



1 .نتوجه لقالب >> تحرير 

2. ابحث بإستعمال Ctrl+F عن  ]]></b:skin>

3. ضع الكود التالي قبله [ فوقه ]



 /* CSS ToolTip Hm */ .tooltip {display:none;position:absolute;border-radius:5px;box-shadow:2px 2px 3px rgba(0,0,0,.2);background-color:#333;color:#fff;padding:8px 15px;opacity:.9;z-index:10000;max-width:340px;} .tooltip:after {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid transparent;content:'';position: absolute;border-bottom: 10px solid #333;top: -20px;bottom: auto;left: 10px;margin: 0;}

4. ابحث عن <body/>

5. ضع الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[ 
$(function(){
  $('a,img,input,.menu,.close-menu,.translator,img.related-post-item-thumbnail,.fc-members, .fc-members-canvas,h2.post-title a,a.related-post-item-title').not('.paginator,.paginator span a,#subscribe-box input').hover(function(e){ // Hover event
     var titleText = $(this).attr('title');
    $(this)
      .data('tiptext', titleText)
      .removeAttr('title');
   $('<p class="tooltip"></p>')
    .text(titleText)
    .appendTo('body')
    .css('top', (e.pageY - 0) + 'px')
    .css('left', (e.pageX + 5) + 'px')
    .fadeIn('slow');
  }, function(){ // Hover off event
     $(this).attr('title', $(this).data('tiptext'));
    $('.tooltip').remove(); 
  }).mousemove(function(e){ // Mouse move event
     $('.tooltip')
      .css('top', (e.pageY - 0) + 'px')
      .css('left', (e.pageX + 5) + 'px');
 });
});
//]]>
</script>

* الكلمات المحددة بالأصفر هي عناصر رئيسية للقوالب إذا أردت إضافة عنصر ليطبق مثل Popularpost أضفه في أول السطر أو بين الكلمات مثال

 $('Here The Name,a,img,input,.menu,.close-menu,.outer-post,img.related-post-item-thumbnail,')

كما ترون ولتوضيح فقط أضفت كلمة Here The Name في الأول مع الفاصلة

لتطبيق التلميح على صورة أو كلمة معينة عليك بإدراج   ' هنا الكلمة'=Title

مثال

<img border="0" src="رابط الصورة" title="شكرا لكم">

التيتل يضاف كما في الكود المحدد باللون الأصفر

أتمنى أن تستفيدو من الإضافة وماتقدمه أي سؤال يمكن طرحه في خانة التعليقات
11 Blogger تعليقات
Disqus
11 التعليقات
المشرف
avatar

موضوع ممتاز ,,استمر

المشرف
avatar

أخي عندي قالبك القديم الأبيض فيه الإبتسامات ولاكن لا تضهر هذه الصورة http://im81.gulfup.com/SimniX.png
فوق التعليقات ممكن الطريقة لأإضافة الصورة
وشكرا

المشرف
avatar

القالب لا يتوفر على الكود الخاص بالإبتسامات

المشرف
avatar

سعدت بمرورك الطيب

المشرف
avatar

شكراً عرب ويب شكراً حسام :)

هل من الممكن طرح موضوع حول اضافة تأثيرات عند الضغط أو التمرير على عنوان الموضوع ؟ للتوضيح أكثر ادخل إلى موقعي أخ حسام http://www.ebda2.net/ ثم مرر الماوس على أحد العنوان تجد تغير اللون ببطىء إلى اللون الأزرق هل من الممكن أن تشرح لنا اضافة تأثيرات أخرى ؟

تحياتي لك

المشرف
avatar

إنشاء الله كل شيئ ووقته

المشرف
avatar

اخي ممكن شرح overlay
لصور المواضيع بالرئيسية
وشكرا لك

المشرف
avatar

السلام عليكم اخي العزيز شرح وافي جزاك الله خير الله يحفظك عندي سؤال مافهمت النقطة الاخيرة كيف اعمل تلميح لكلمة معينة في موضوع او مشاركة مكن تفهمني وتجبلي طريقة مبسطة الله يجزيك االخير

المشرف
avatar

عليكم السلام اخي، أترك مثال تريد تطبيق عليه التلميح حتى أريك بشكل أفضل

المشرف
avatar

مثلاً على الاقسام تبع المدونة

المشرف
avatar

اترك ربط المدونة

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