Membuat efek coin slider di blog ~ blog sepot

Hay mblo apa kabar nie,.. masih inget dengan saya gak??
Hari ini saya mau berbagi efek keren loh yaitu tentang Membuat efek coin slider di blog Kira2 penasaran gak ya,.. heheheee biar gak penasaran langsung ajah liat demo nya di bawah ini.

DEMO Klik disini!!!

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

/* 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: 550px !important;
height: 350px !important;
border: 4px solid #AAA475;
font: normal 13px/20px Arial,sans-serif !important;
}

5. Tekan Ctrl+F cari kode </head> Lalu masukan script di bawah ini tepat 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='https://sites.google.com/site/vanzdy/script/coin-slider.js' type='text/javascript'></script>

Perhatikan kode JQuery yang saya block warna kuning, jika script tersebut sudah terpasang di template sobat. Jangan dipasang lagi kode tersebut cukup kode yang di bawahnya ajah sobat salin.

Penerapannya:

Masukan kode HTML di bawah ini ke dalam postingan blog sobat atau bisa juga di dalam gadget HTML/Javascript

<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>

Note: Untuk link gambar nya silahkan anda isi dengan gambar ke sukaan anda masing2,..

Terima kasih telah membaca artikel tentang Membuat efek coin slider di blog di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.