Pluing تطبيق التلميحات على قوالب بلوجر

ا
لكل يستخدم مواقع 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="شكرا لكم">

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

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