Membuat Background Blog Berubah-ubah (Slideshow) dengan jQuery !

Hola sista brotha,, saya balik lagi dengan membawa info hangat buat sobat...tetap berkelimpung di dunia jQuery sekarang saya akan share cara membuat background blog kita menjadi background slideshow . Untuk lebih jelasnya lihat demonya disni

Demo

Realy cool .. ! sedikit berbeda dari effect background blog biasanya yg berganti kalo blog melakukan refresh / reload . Yang ini akan berubah-ubah tanpa reload lagi, (namanya juga slideshow... gitu) dan juga sedikit mempercantik dengan menggunakan preloader image pada backgroundnya .

Tanpa banyak cincong.. cabut aja sob ni caranya..

1 Karena plugin jquery, masukan script ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2 lalu masukan juga script dibawh ini tepat dibawah script di atas,

 <script src='http://granoblog.googlecode.com/files/maximage.js' type='text/javascript'/> 

Nb: untuk script diatas bs di hostingkan sendiri, dan sekarang saya udah menemukan tempat hosting terbaik dari hostingan manapun, yaitu code.google.com
hahahhahaa (katro ah..) thanks mang beben .

3 mesukan juga scrpit js ini dibawah script di atas

<script type='text/javascript'<
  $(document).ready(function(){
   $('img.maximage').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520
   });
   
   $('img.bgmaximage').maxImage({
     isBackground: true,
     verticalAlign: 'top'
    });
  
   $('img.widthmaximage').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520,
    maxFollows: 'width'
   });
   
   $('img.maxAtOrigImageSize').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520,
    maxAtOrigImageSize: true
   });
   
   $('img.slidemaximage').maxImage({
    isBackground: true,
    slideShow: true,
    verticalAlign: 'top',
    slideShowTitle: true,
    maxFollows: 'height'
   });
  });
 </script>

4. ini ad sedikit css juga..

.slidemaximage { display:none; } 
.loader        { position:absolute;z-index:9999;width:39px;height:39px;top:49%;left:49% }

5. Yang terakhir sob, masukan di dalam tag body yah..

<img src="images/loading.gif" class="loader" /> 
 <img src="images/slides/slide01.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide02.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide03.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide04.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide05.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 

Nb: untuk images/loading.gif ini gambarnya



dan untuk link2 gambarnya, itu untuk background yg akan digunakan .

nah gimana sob ? usefull gag yah ? gampang kan ? semoga bermanfaat ajah deh bro .