Membuat Header Animasi Menggunakan JQuery

25 April 2012 - - 7

Bismillah,
Desain header yang keren, cantik pada sebuah blog tentu akan menambah sesuatu gitu...
Nah pada kesempatan ini saya akan berbagi script slide animasi yang sudah sedikit saya modifikasi dan cocok untuk membuat header animasi yang cukup keren, sebenarnya kalau anda pernah mempraktikan tutorial Membuat Slide Show Gambar dengan JQuery di Blogger  tutorial ini sama saja, hanya ada sedikit perubahan pada kode CSS yang ada pada animasi slide tersebut. Untuk demo hasil penggunaan script ini,  anda bisa lihat di beberapa klien mungbisnis.com disini, atau blog komunitas blogger banjarnegara disini.

Okeh langsung saja, silahkan anda ikuti tutorial berikut dengan seksama, sebagai batasanya script dibawah ini saya buat untuk membuat header animasi dengan ukuran gambar 850px X 175px, tapi nanti anda bisa dengan mudah merubah untuk ukuran header sesuai dengan lebar template anda, sedangkan untuk jenis templatenya saya anggap sudah tersedia fasilitas untuk menambahkan gadget html/javascript dibawah/ diatas header blog anda, contoh tata letak template yang saya maksudkan seperti pada gambar dibawah ini, tata letak seperti ini banyak anda jumpai kalau menggunakan template yang disediakan oleh ourblogtemplates.com, tapi jika anda menginginkan menggunakan template anda sekarang, mungkin anda harus merubah dan menambahkan kolom dibawah header anda, untuk tutorialnya silahkan anda searching di google.

1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home 
2. Langsung tuju ke halaman Template, dan klik edit html (Jangan lupa seperti biasa, backup dulu template anda)
3. Beri centang pada expand Template widget
4. Letakkan kode berikut di atas kode ]]></b:skin>
   

   /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { display:none} .cs-prev, .cs-next { display:none}

5. Letakkan kode dibawah ini diatas kode  </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 850, height: 175, navigation: false, delay: 3000 }); }); </script>

   Width: 850 dan height: 175, silahkan anda sesuaikan dengan ukuran gambar yang akan dijadikan header animasi pada blog anda. 
6. Simpan, kemudian klik tata letak.
7. Tambahkan gadget html/java script dan letakan di bagian header template anda, kemudian copas kode berikut:
   

     <div style="overflow:none;width:100%;height:175px;padding:0px;border:0px solid #fff">
   <div id='coin-slider'>
   <a href="/">
           <img src="Link-Lokasi-Gambar-1" />
           <span>
   ...
           </span>
       </a>
    
   <a href="/">
           <img src="Link-Lokasi-Gambar-2" />
           <span>
   ...
           </span>
       </a>
   </div>
   </div>

   Silahkan ganti Link lokasi gambar dengan lokasi penyimpanan gambar anda, tutorial cara mendapatkan lokasi penyimpanan gambar bisa anda baca di: http://www.mrmung.com/2010/12/cara-mendapat-hosting-gambar-gratis.html
8.  Simpan dan silahkan nikmati hasilnya.

Untuk hasil terbaik, desain header anda menggunakan software desain grafis seperti Photoshop, desain dengan ukuran yang tepat agar tampil maksimal.

Demikian, semoga bermanfaat.