Membuat Header Animasi Menggunakan JQuery
Hai!! Salam AXLE Nah pada kesempatan ini kita akan
berbagi script slide animasi yang sudah sedikit di 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.
Okeh
langsung saja, silahkan anda ikuti tutorial berikut dengan seksama, sebagai batasanya script dibawah ini di 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
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() { $('#coin-slider').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.
Simpan dan
silahkan nikmati hasilnya.
Oke,demikian
cara Membuat
Header Animasi Menggunakan Jquery Semoga
bermanfaat.
