أضافة تلميحات الويب Pluing على قوالب بلوجر

لكل من يستخدم المواقع الاجتماعية العامة مثل facebook,google pluse,yahoo أظن ان اول شيء صادفك عند التسجيل بالمواقع الاجتماعية ظهور العديد من تلمحيات لكي ترشدك كيفية استخدام الموقع او مثلا تظهر لك تلميحات عند تصميم تطبيق وترشدك التلميحات الى كيفية استخدامه لذالك انا احببت ان تكون هذه الخاصية متوفرة في قوالب بلوجر لذالك قمت بالعمل على برمجة اكواد بسيطة وسهلة لتظهر التلميحات في القوالب بشكل تلقائي تظهر التلميحات على عناصر محددة رئيسية في قالب مدونتك مثل المشاركات الشائعة والعناوين والعديد من العناصر أيضا تطبق يدويا وساشرح لكم عن طريقة اضافتها

يمكنك مشاهدة معاينة حية للاضافة 

• معاينة

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

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

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

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

 


/* CSS ToolTip NEW qaisi1web */




.tooltip {
display: none;
position: absolute;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.22);
background-color: #333;
color: #fff;
font-size: 12px;
padding: 8px 15px;
margin-top: -98px;
margin-left: -38px;
z-index: 10000;
max-width: 340px;} 
.tooltip:after {
width: 0;
height: 0;
content: '';
position: absolute;
border-right: 10px solid rgba(255, 255, 255, 0);
border-top: 10px solid #333;
border-left: 10px solid rgba(255, 255, 255, 0);
top: 38px;
bottom: auto;
right: 72px;
margin: 0;}

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

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

<scripttype='text/javascript'>
//<![CDATA[
$(function(){
  $('[title],[tip]').not('.paginator,.paginator span a,#subscribe-box input').hover(function(e){ // Hover event qaisi1web.blogspot.com
     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();
  }, 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 + 2) + 'px');
 });
});
//]]>
</script>

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

 .not('Here The Name.paginator,.paginator span a,#subscribe-box input')

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

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

مثال

<img border="0" src="رابط الصورة" title="القيسي ويب">

 title يضاف كما في الكود التالي 

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

لكل من يستخدم المواقع الاجتماعية العامة مثل facebook,google pluse,yahoo أظن ان اول شيء صادفك عند التسجيل بالمواقع الاجتماعية ظهور...