Cara Membuat Coin Slider Pada Blog

Salam blogger…!!! Bagaimana siap dengan tips dan trik blogging kali ini gan, dijamin dapat membuat blog sobat tambah lebih menarik dan keren. Pada postingan kali kita akan membahas bagaimana cara membuat coin slider dan merupakan content image slider dengan efek yang unik. Mau tau seunik apa efek yang ditimbulkan pada coin slider ini langsung dicoba aja gan.


Cara memasang coin slider ini ikuti langkah-langkah di bawah ini.
1. Login ke blogger atau klik disini»
2. Pilih template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand template widget.
4. Cari code di bawah ini. Tekan Ctrl+F untuk mempermudah pencarian.

]]></b:skin>

5. Setelah ketemu, copy code CSS di bawah ini dan letakkan di atas code
]]></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;
}


6. Cari code di bawah ini. Tekan Ctrl+F untuk mempermudah pencarian.

</head>
7. Setelah ketemu, copy script di bawah ini dan letakkan di atas code </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>
8. Setelah itu simpan template.
9. Kemudian kembali ke dashboard dan pilih tata letak >> tambah gadget>> Html/JavaScript.
10. Copy paste code Html di bawah ini.

<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>
</div>
Catatan:


  • Tulisan yang berwarna merah silahkan sobat ganti dengan kalimat yang sobat inginkan.
  • Sedangkan yang berwarna biru merupakan link yang akan di tuju ketika gambar diklik.
  • Dan untuk yang berwarna orange merupakan link gambar silahkan diganti sesuai keingian.
10. Dan yang terakhir simpan.
Jika masih ada yang tidak dipahami silahkan tinggalkan pertanyaan sobat di bawah ini.

1 komentar:

  1. kalau ini di taruh di post bisa nggak bos? mohon pencerahan ya....

    ;-(

    kunjung balik yaa... http://hanna-thebestblog.blogspot.com/

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top