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/AVvXsEiZCdHYFPBaqnRQ0_DVYz10lEQbSJ1mcd1HzL2tzDY9-DghzpDrSyEP7C1AJiLjX1eaOjXPbh6GtWoBr8oYEYJx7_jyE6WkkNOwzcWXx-rBv4w-OMF268w5wbeCKat5E7v9uvWNIZBqRRs/s1600/pattern_2.jpg)'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcseDwGKcYxni32seVwRKaeokk_S8Es1tasjA99S9cU4_BMV2LdgCGWLsm3sRfBDM9UhMdr8lnswxxSlX9quog3gPwwywSikx7veTB_glYRAHsfjcmOZSUaS6VnE2Ud3VG8C3OvEdDqjU/s1600/overlay.png' alt='' />
        </div>
        <div class='scrollBg' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0-xjgcKRoZZZdahgS7p9KLMWeqadHyUNY7xMzCpUyRsln5VGrsyfohQgWc7jKfTBuEueF7TyMGMJJsYM-OIcZC9Ts9E9tk0RFFoAHVOdlYF1e68VGDeCNiC-E0NTRI-vbzSuHzrb3_U/s1600/pattern_3.jpg)'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcseDwGKcYxni32seVwRKaeokk_S8Es1tasjA99S9cU4_BMV2LdgCGWLsm3sRfBDM9UhMdr8lnswxxSlX9quog3gPwwywSikx7veTB_glYRAHsfjcmOZSUaS6VnE2Ud3VG8C3OvEdDqjU/s1600/overlay.png' alt='' />

        </div>
        <div class='scrollBg' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5XOZA9g_5_7fJ1QxLKGmXFi-IqM7-1iXYMa22H6Lenb9-0n6snq3EqoiYr9CieQWtASTZYT3EL_YwqiJFZfRAA-vmPoMC5DM9p07lGJcpcisZp6CP_TWI9wgzvvlhrmz1UzAw3HK_5Y/s1600/pattern_1.jpg)'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcseDwGKcYxni32seVwRKaeokk_S8Es1tasjA99S9cU4_BMV2LdgCGWLsm3sRfBDM9UhMdr8lnswxxSlX9quog3gPwwywSikx7veTB_glYRAHsfjcmOZSUaS6VnE2Ud3VG8C3OvEdDqjU/s1600/overlay.png' alt='' />
        </div> 

• Nah yang berwarna biru dengan nama image Overlay.png silahkan ganti dengan Text Image yang bos   buat seperti Contoh pembuatan diatas tadi....
  
  selesai.....
  
  selamat mencoba dan mengembangkannya kembali sesuai keinginan bos..........