Sandy-Cyber

Sponsor adalah pihak yang mendukung kita dalam sebuah bidang atau kegiatan, dan kita sangat diuntungkan dengan keberadaan para sponsor itu, baik secara finansial ataupun untuk keberlangsungan suatu bidang atau kegiatan yang kita tekuni. Namun sudahkah kita memperlihatkan respect atau penghargaan terhadap mereka?.

Untuk kita sebagai seorang blogger penghargaan yang bisa kita berikan kepada para sponsor yaitu salah satu yang paling sederhana adalah dengan menyediakan space atau ruang yang enak dipandang dan terlihat elegant untuk menempatkan nama-nama brand mereka dalam blog kita atau bahasa keren nya Sponsor list , lalu bagaimana cara membuat sebuah Sponsor list yang terlihat elegant dan enak dipandang serta terkesan professional ?.

Sebelum kita pelajari langkah-langkahnya lebih baik teman-teman melihat demo-nya terlebih dahulu disini:



Gimana tertarik ga? kalo tertarik ayo kita lanjut ke tutorialnya.

Langkah pertama adalah membuat beberapa Sprite image untuk logo atau banner sponsornya. Sprite image adalah gabungan dari beberapa gambar menjadi satu gambar tunggal, contoh Sprite image seperti ini:





untuk membuatnya teman-teman siapkan dua buah gambar yang sama dengan format color dan grayscale dan gabungkan keduanya menjadi satu kesatuan, teman-teman bisa pake CorelDraw atau Photoshop untuk membuatnya atau kalau ga mau ribet bikinnya silahkan teman-teman download gambar nya disini.



Setelah semua gambar yang akan dipasang sudah siap, upload terlebih dahulu ke tempat hosting gambar semacam Picasa atau Photobucket. Selanjutnya tambahkan kode CSS ini pada template punya teman-teman.

<!--
#sponsors {
 width:auto; height:20px;
 display: block;
 clear: both;
 border: 1px solid #eee;
 padding: 10px 5px;
 margin: 15px auto;
 text-transform: uppercase;
 font-weight: bold;
 color: #666;
}
#sponsors span {
 display: block;
 float: left;
 padding: 0 10px;
 height: 20px;
 line-height: 20px;
}
#sponsors a {
 display: block;
 float: left;
 height: 20px;
 padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
 /*mouseover*/
 a:hover.mootools, 
 a:hover.drupal, 
 a:hover.technorati, 
 a:hover.jquery, 
 a:hover.miro, 
 a:hover.mozilla, 
 a:hover.nbc, 
 a:hover.twitter, 
        a:hover.wordpress {background-position: 0 -20px;} 

kode berwarna biru ganti dengan nama sponsor, sedangkan yang berwarna merah ganti dengan URL dari gambar yang telah di upload tadi.

Langkah selanjutnya kita poles CSS tadi dengan sentuhan magic dari Mootools dengan menempatkan kode dibawah ini sebelum kode </head>

<script src='http://goomelar.googlecode.com/files/mootools-1.2.1-core-yc.js' type='text/javascript'><!--mce:0--></script>
<script src='http://goomelar.googlecode.com/files/colorize.js' type='text/javascript'><!--mce:1--></script>

Setelah itu tambahkan kode Javascript ini setelah kode Mootools tadi, fungsinya adalah untuk menghidupkan kode Mootools dan kode pewarnaan pada gambar.

<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){
 
 var sponsors = $$(&#39;#sponsors a&#39;).setStyle(&#39;opacity&#39;, 0.5); // Set opacity to 0.5 for grayscale image
 
 sponsors.set(&#39;tween&#39;,{duration:200, wait:false}).addEvents({
 
  //On mouseenter
  &#39;mouseenter&#39;: function(){
   this.setStyle(&#39;background-position&#39;,&#39;0 -20px&#39;); //Reveal color image
   this.get(&#39;tween&#39;).start(&#39;opacity&#39;,1); //set opacity to 1
  },  
 
  //on mouseleave
  &#39;mouseleave&#39;:function(){
   this.setStyle.delay(500,this,[&#39;background-position&#39;,&#39;0 0&#39;]); //set back initial background-position for grayscale image
   var tween =  this.get(&#39;tween&#39;);
   tween.start.delay(500, tween,[&#39;opacity&#39;,0.5]); //set back initial opacity
  }
 
 });
});
</script> 

Terakhir teman-teman tinggal menempatkan tag HTML nya pada tempat yang diinginkan misalnya sebelum footer atau setelahnya.

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Judul link" href="Link"></a>
    <a class="drupal" title="Judul link" href="Link"></a>
    <a class="technorati" title="Judul link" href="Link"></a>
    <a class="jquery" title="Judul link" href="Link"></a>
    <a class="miro" title="Judul link" href="Link"></a>
    <a class="mozilla" title="Judul link" href="Link"></a>
    <a class="nbc" title="Judul link" href="Link"></a>
    <a class="twitter" title="Judul link" href="Link"></a>
    <a class="wordpress" title="Judul link" href="Link"></a></div>

Selanjutnya tinggal save template dan lihat hasilnya. Selamat mencoba!