Senin, 11 Juni 2012

Coin slider untuk blog




Coin slider adalah slider dengan efek yang unik begitu kata pemiliknya hehehehe karena efek pergantian gambarnya itu bermacam - macam jadi ya unik kan beberapa hari ini mungkin saya akan posting tentang slider - slider hehee karena lagi demam slider biar pada ngumpul juga di blog ini slider - slider unik ckckkck

DEMO

1. Masukan css di bawah ini di atas kode ]]></b:skin>

/* Slider Coin */
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative
}
.coin-slider a {
text-decoration: none !important;
outline: none;
border: none;
color: white !important
}
.cs-buttons {
font-size: 0;
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;
display: none
}
.cs-active {
background-color: #B8C4CF;
color: #FFF
}
.cs-title {
padding: 10px;
background-color: #007AFF;
color: #FFF
}
.cs-prev, .cs-next {
background-color: #0692FF;
color: #FFF;
padding: 0 10px
}
.pendamping {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 420px !important;
height: 200px !important;
border: 4px solid #AAA475;
font: normal 13px/20px Arial,sans-serif !important;
}

2. Masukan script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/zyztem33/js/Coin%20slider.js' type='text/javascript'></script>

3. Tambahlah Gadget HTML/Javascript dan masukan kode HTML di bawah ini di dalamnya.

<div id='coin-slider' class='pendamping'>
<a href="Link Tujuan"><img src='URL Gambar1.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
<a href="Link Tujuan"><img src='URL Gambar2.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
<a href="Link Tujuan"><img src='URL Gambar3.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
<a href="Link Tujuan"><img src='URL Gambar5.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
</div>

Ganti Link Dengan Link sesuka anda jangan Lupa juga ganti Link Gambar dengan link gambar anda yah Emm Ukuran gambarnya 420px x 200px biar pas gitu nanti ukurannya jadi kan rapi. jika kode jquery yang bergaris bawah sudah ada di blog anda jangan Copy lagi kode tersebut cukup kode yang di bawahnya, ets Ganti juga ya deskripsinya dengan deskripsi gambar anda sendiri.