بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اهلا ومرحبا بكم من جديد
معنا اليوم انشاءالله اضافة جميله جدا واحترافيه
وهي اضافة تاثير تحميل المدونة الي المدونة
مميزات هذه الاضافة
1- لا تؤثر على سرعة مدونتك
2- متوافقه مع جميع المتصفحات
3- يمكنك التعديل عليه وتغيير الصورة وفقا لرغبتك.
4- سوف تساعد أيضا المدونات على أخد وقت أقل لتحميل الصفحات
وتجعل الزوار المهتمين ينتظرون على مدونتك
بمجرد رؤية الصورة المعبرة عن التحميل
طريقة اضافة الاداة
اولا قم باخذ نسخه احتياطيه من قالب مدونتك
اذهب الي لوحة التحكم الخاصة بمدونتك
من القائمه اليمني اضغط علي قالب ثم تحريرhtml
أنقر على "Ctrl+F" و ابحث عن الكود التالي
رمز PHP:
]]></b:skin>
اضف الكود التالي فوقه مباشرة
رمز PHP:
/*Start MBL Lazy Page Loading Effect CSS coding (www.elawaael.blogspot.com) */
#mbl-lazyloading {position: fixed;z-index: 50;top: 0; left: 0;width: 100%; height: 100%;background: #FDFEF8 url(هنا رابط الصورة المتحركه) no-repeat center;line-height: 350px;text-align: center;font-size: 36px;color: #353231;text-indent: -9999px;}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {#loading {position:absolute;width:1040px;min-height:768px;}}
#mbl-progress-bar {position: absolute;top: 0; left: 0;background: #de1301;opacity: 0.8;width: 0;height: 18px;}
#mbl-loader {height: 100%;display: none;}
/*End MBL Lazy Page Loading Effect CSS coding (www.elawaael.blogspot.com) */
بعد ذلك قم بالبحث عن هذا الوسم
رمز PHP:
</head>
واضف قبله مباشرة هذا الكود
رمز PHP:
<script>
(function($){
$("html").removeClass("MD");
$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
وفي الاخير قم بالبحث عن
رمز PHP:
</body>
واضف الكود التالي فوقه مباشرة
رمز PHP:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'>
<div id='mbl-progress-bar'>
</div>
<div id='mbl-loader'>
واليكم مجموعه من روابط الصور يمكنكم استخدامها
والي هنا تكون قد اضفت الاداة بنجاح
واذا واجهتك اي مشكلة لاتتردد في طرحها
رمز PHP:
]]></b:skin>
رمز PHP:
/*Start MBL Lazy Page Loading Effect CSS coding (www.elawaael.blogspot.com) */
#mbl-lazyloading {position: fixed;z-index: 50;top: 0; left: 0;width: 100%; height: 100%;background: #FDFEF8 url(هنا رابط الصورة المتحركه) no-repeat center;line-height: 350px;text-align: center;font-size: 36px;color: #353231;text-indent: -9999px;}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {#loading {position:absolute;width:1040px;min-height:768px;}}
#mbl-progress-bar {position: absolute;top: 0; left: 0;background: #de1301;opacity: 0.8;width: 0;height: 18px;}
#mbl-loader {height: 100%;display: none;}
/*End MBL Lazy Page Loading Effect CSS coding (www.elawaael.blogspot.com) */
رمز PHP:
</head>
رمز PHP:
<script>
(function($){
$("html").removeClass("MD");
$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
رمز PHP:
</body>
رمز PHP:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'>
<div id='mbl-progress-bar'>
</div>
<div id='mbl-loader'>
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).