كيفية اضافة شريط تمرير ملون متحرك في أعلى الهيدر لمدونات بلوجر

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

في درسنا اليوم سوف نتعرف على طريقة تركيب شريط التمرير الملون والمتحرك  على مدونات بلوجر .

::: طريقة التركيب :::

1- ادخل إلى مدونتك ، ثم أختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب .

3- ابحث عن الوسم :

4- اضف هذا الكود فوقه .

 #scroller {
padding:0;
margin:0;
width:100%;
height:6px;
background-image: url(http://cdn.top4top.co/p_18l6731.png);
background-repeat: repeat-x;
} 

5- بعد ذلك ابحث عن الوسم :

6-اضف الكود التالي تحته مباشرة.

 <div id="scroller"></div> 

7- أيضاً ابحث عن الوسم :

8- اضف الكود التالي فوقه .

 <script>
function StartMove() {
    var cssBGImage = new Image();
    cssBGImage.src = "http://cdn.top4top.co/p_18l6731.png";
    window.cssMaxWidth = cssBGImage.width;
    window.cssXPos = 0;
    setInterval("MoveBackGround()", 50);
}

function MoveBackGround() {
    window.cssXPos = window.cssXPos + 1;
    if (window.cssXPos >= window.cssMaxWidth) {
        window.cssXPos = 0;
    }
    toMove = document.getElementById("scroller");
    toMove.style.backgroundPosition = window.cssXPos + "px 0px";
}
window.onload=function(){
StartMove()
}
</script> 

9- احفظ القالب .

انقر هنا للمعاينة