لمسة جمالية مميزة على مدونتك بتقنية جي كويري تتيح الخاصية عمل تأثير تحميل عند التنقل بين الصفحات في مدونتك بدلا من الإنتظار وظهور الصفحة غير كاملة , الخاصية خفيفة وسهلة التركيب طبعا كما اعتدنا يمكنك معاينة الخاصية أولا معاينة حية عبر الرابط التالي لاحظ عند الضغط على روابط المواضيع او الأدوات التي تحيل لمواضيع داخل المدونة سنجد ظهور التأثير
طريقة التركيب سهلة وبسيطة فقط أضف الكود التالي فوق الوسم </body>
<style>
#cnmu-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://lh5.googleusercontent.com/-GL2UQvqMyOQ/U_EDmz70svI/AAAAAAAAEig/rYd-gKkV9OA/s43/load.gif') no-repeat 50% 50%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="cnmu-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#cnmu-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
//]]>
</script>
ويمكنك تعديل الرابط الأحمر برابط صورة تحميل أخرى بدلا من الإقتراضية وستجد في بحث صور جوجل مئات الصور ان بحثت تحت كلمة loading
ويمكنك تعديل هذا اللون #000 وهو لون الخلفية
في حال عدم عمل الإضافة هذا يعني ان مكتبة جي كويري غير مضافة في مدونتك
قم بإضافتها بوضع الكود التالي فوق الوسم</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
وبالتوفيق
No comments:
Post a Comment