كيفية إضافة الأداة tooltip "تلميح" jQuery إلى Blogger

0
jQuery tooltip المساعد هو أداة رائعة لشرح الكثير من كلمة واحدة. يمكنك بسهولة تنفيذ هذه في مدونتك أيضا أنه من السهل جدا للاستخدام. يمكنك تسليط الضوء على بعض الكلمات وإضافة تلميح لهم، أي عندما تحوم المستخدم على كلمة tooltip سلسة سوف تظهر فوق فقط للكلمة مع وصفك. تم تصميم هذا تلميح مسج بواسطة nettuts . الآن دعونا نرى كيفية إضافة واستخدامه،


 

◄ كيفية إضافة الأداة تلميح  jQuery  إلى Blogger؟

كما ذكرت أعلاه لتركيب واستخدام تلميح الأدوات من السهل جدا، عليك أن تضع بعض التعليمات البرمجية في القالب، فقط اتبع الخطوات التالية بسيطة.

1. إضافة البرامج النصية Tooltip  

        1- انتقل إلى لوحة Blogger > قالب 
        2- تحميل نسخة من القالب
        3- انقر على تحرير HTML
        4-  إنقر على الزر المتابعة 
        5- البحث عن كود أدناه في القالب

</head>


 إضافة كود أدناه تماما فوقه،

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/jquery-tooltip.js"></script>

 ملاحظة - إذا كنت قد قمت بالفعل بإضافة البرنامج المساعد jQuery لمدونتك ثم لا تضيف السطر الأول من التعليمات البرمجية أعلاه.

2. إضافة أنماط Tooltip 

البحث عن كود أدناه في القالب،

]]></b:skin> 


إضافة كود أدناه تماما فوقه،

.tip {
    width: 212px;
    padding-top: 37px;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 500;
    background: transparent url(https://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top;
}
.tipMid {
    background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png) repeat-y;
    padding: 0 25px 20px 25px;
}
.tipBtm {
    background: transparent url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/s1600/hb_tipBtm.png) no-repeat bottom;
    height: 32px;
}
 

3. استخدام  Tooltip

إذا كنت ترغب في إضافة تلميح في وظائف Blogger، ثم انتقل إلى التبويب تحرير HTML وإضافة كود أدناه في داخله.

<div class="tTip" title="Add Tooltip Message Here">Add Your Text Here</div>


 ♦ استبدال Add Tooltip Message Here مع الرسالة التي تريدها أن تظهر في تلميح.

 ♦  استبدال Add Your Text Here مع النص الذي تريد ظهوره في تلميح.

:)

إرسال تعليق

أحدث أقدم