Text with Moving Backgrounds with jquery

Langkah 1 pembuatan menu Text with Moving Backgrounds with jquery :

Buat terlebih dahulu text image yang akan diberi effect :
1. Buat image dengan ukuran Width: 487px dan Height: 83px seperti ini :


2. dan Buka kembali pada Adobe Photoshop Gunakan Magic Wand Tool dan seleksi image menjadi Seperti ini :

5. Klik Select dan Pilih Inverse

6. Tekan delete.. dan save as dalam Format PNG Dengan nama Overlay

Langkah 2 pembuatan menu Text with Moving Backgrounds with jquery :

nah sekarang kita masuk dalam langkah penerapannya pada blog, seperti biasa Log in blogger, Masuk ke Menu Rancangan, edit Html dan cari Kode ]]></b:skin> dan simpan CSS berikut diatasnya :

/* ---------------
Text with Moving Backgrounds with jQuery
---------------------------------- */
.scrollBg {
    background-image: none;
    background-color: #000000;
    width: 487px;
    height: 83px;
}

.scrollBg  img {
    display: block;
}

selanjutnya simpan Script berikut di atas kode </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://kangdadang.googlecode.com/files/move-bg.js"></script>
  
    <script type="text/javascript">
        $(document).ready(function() {
      
            moveBgAround();
      
        });
      
        function moveBgAround() {
            var x = Math.floor(Math.random()*401);
            var y = Math.floor(Math.random()*401);
          
            var time = Math.floor(Math.random()*1001) + 2000;
      
            $('.scrollBg').animate({
                backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
            }, time, "swing", function() {
                moveBgAround();
            });
        }
      
    </script>

terakhir cara pemanggilannya pada Html Blog kawan:

<div class='scrollBg' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGupRRKmfTPG5avxwHVeMZt65wPGPJjWljDDfiPWElzx8YIFQ9u0bqR5dnjbgsPZ4NxFH9-nAp4IbrHjx2Vl7GLtK43vInEVF0ApLDSZEEue4pNu06mESKQ11ZspjM64NMZn1rCnR36d0/s1600/pattern_2.jpg)'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLH01rSAxtX90HWLhHxeBxlCcLep4f8Kv-_Ur4U3_R3hfpENGmlfAEKBJD6tqCz1hZCaLeTXGDDx-qvRwU2VOs18rFKEDSY7bPj5j6dBkiX3dxfxWAb9RwKwg7TNlpcItzslmwb6bQeU/s1600/overlay.png' alt='' />
        </div>
        <div class='scrollBg' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXWHy9O_JOO33GAdounGWbgNgY_XbQC1HJzt0Q_phpZFcTp6jl-Iz5gAEVAjITML72JOdBEozk14y2rBQR-SZTd-T6SzIZkmmtZPGlmNXpuN2AsWe5iAVIqLPWb1EJTpRCAfAnBwpBu4/s1600/pattern_3.jpg)'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLH01rSAxtX90HWLhHxeBxlCcLep4f8Kv-_Ur4U3_R3hfpENGmlfAEKBJD6tqCz1hZCaLeTXGDDx-qvRwU2VOs18rFKEDSY7bPj5j6dBkiX3dxfxWAb9RwKwg7TNlpcItzslmwb6bQeU/s1600/overlay.png' alt='' />

        </div>
        <div class='scrollBg' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQr5faIHmTPYO5Q5Uw34fSMvhS-vnqeFOgPOkHPP4tAyS2uSmmyjOmDwMmwjVM3tjgSHHQu48A-5XQ4q1i_sSIe2-M7kQSWAJB9at9shIHO_JJYSolC9YxYkUHP5NpG1TdlINB8sWpUhM/s1600/pattern_1.jpg)'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLH01rSAxtX90HWLhHxeBxlCcLep4f8Kv-_Ur4U3_R3hfpENGmlfAEKBJD6tqCz1hZCaLeTXGDDx-qvRwU2VOs18rFKEDSY7bPj5j6dBkiX3dxfxWAb9RwKwg7TNlpcItzslmwb6bQeU/s1600/overlay.png' alt='' />
        </div>

Nah yang berwarna biru dengan nama image Overlay.png silahkan ganti dengan Text Image yang kawan-kawan buat seperti Contoh pembuatan diatas tadi....

selesai.....

selamat mencoba dan mengembangkannya kembali sesuai keinginan kawan-kawan.......