هيلبرنت | Helpernt - كود اظهار شريط التحميل لمنتديات الزين فورو مثل يوتيوب

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

عودا احمد نعود اليوم بدرس جميل وهو طريقة اظهار شريط التحميل لمنتديات الزين فورو مثل يوتيوب عند كل تحديث للصفحة طب واللى مايعرفش ايه هو الشريط اقوله تعالى بنينا نعرف كلنا

http://upload.traidnt.net/upfiles/oLG66631.png

[ اسم الشرح ] : اظهار شريط التحميل لمنتديات الزين فورو - xenforo
[ الوصف ] : شرح طريقة اظهار شريط التحميل لمنتديات الزين فورو - xenforo
[ يتوافق مع اي اصدار ] : XenForo
[ موقع مقدم الشرح ] : موقع هيلبرنت

الدرس حصرى وعند النقل نتمنى ذكر معهد هيلبرنت

http://upload.traidnt.net/upfiles/oLG66631.png

اولا: الشكل النهائى للعمل

http://up.traidnt.net/img/jeE0bm.png

ثانيا:العمل من خلال اليوتيوب مدته 6 ثوانى فقط

ثالثا خطوات العمل

ادخل الى لوحة تحكم المنتدى >>>>> ثم المظهر >>>>> ثم اختار الاستايل المراد التعديل عليه >>>> ثم البحث فى القوالب >>> ابحث عن

كود:

PAGE_CONTAINER

ثم ابحث داخل القالب عن هذا الكود

كود:

</head>

ضع الان هذا الكود اعلاه مباشره هذا الكود كما بالصوره

كود:

<script>



$(function() {

$("body").append($("<div></div>").attr("id", "progress"));

$("#progress").width((50 + Math.random() * 30) + "%");

});

$(window).load(function() {

$("#progress").width("101%").delay(300).fadeOut(400);

});

</script>

http://upload.traidnt.net/upfiles/xh328436.png

ثم ادخل مره ثانيا الى لوحة تحكم المنتدى >>>>> ثم المظهر >>>>> ثم اختار الاستايل المراد التعديل عليه >>>> ثم البحث فى القوالب >>> ابحث عن قالب

كود:

EXTRA.css

ثم ضع بداخله هذا الكود

كود:

#progress {position: fixed;

    z-index: 100;

    top: 0;

    left: -6px;

    width: 1%;

    height: 3px;

    background: #ff0000;

    border-radius: 1px;

    transition: width 500ms ease-out,opacity 400ms linear;

}

لتغير لون الخط او الشريط من احمر الى اى لون من هذا الكود

كود:

background: #ff0000;

ثم احفظ العمل ومبارك عليك الشريط

http://upload.traidnt.net/upfiles/oLG66631.png

انتهى