تغير شكل التلميحات القديمه ( الافتراضيه ) الي شكل اكثر احترافيه ورائع

السلام عليكم ورحمه الله وبركاته

بسم الله الرحمن الرحيم

اليوم اقدم موضوع حصري غير متواجد في اي مدونه

تغيير شكل التلميحات الافتراضي هذا

الي شكل احترافي مثل هذا

نبدأ علي بركه الله

اولا قم بالذهاب الي لوحه تحكم المدونه

ثم اذهب الي قالب (template )

واختار تحرير Html

ثم قم بالبحث عن الكود التالي داخل القالب باستعمال Ctrl+f

بلوحه التحكم

</head>

ثم اضف الكود التالي فوقه

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<a href='http://ayanatech.blogspot.com'/>
<style>
/*---------------CSS ToolTip NEW----------------*/
.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;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;}
</style>
<a href='http://ayanatech.blogspot.com'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('[title],[tip]').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();
}, 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>

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

--------------------------------------------------------------------------------------
طريقه استخدام التلميحات للمبتدئين
ــــــــــــــــــــــــــــــــــــــ
يتم اضافه الكود التالي علي النص او الاداه او اي شئ تريد التطبيق عليه