jQuery Slider Pink Style di Blog With CSS3

jQuery Slider Pink Style di Blog With CSS3 – ini merupakan tutorial kesekian kalinya untuk cara membuat slider di blog. Pada tutorial ini tentu sudah bisa dilihat dari judulnya, slider yang akan kita bahas untuk dipasang di blog atau lebih tepatnya pada widget blog nantinya akan berwarna pink. Namun biarpun begitu jika nanti mungkin anda ingin merubah menggunakan warna lain sebenarnya juga masih bisa, hanya dengan mengganti background gambar dengan mendesain gambar sendiri dan menggunakan warna yang anda inginkan. Untuk ukuran anda bisa mengatur sendiri untuk menyesuaikan dengan blog anda dan sebagai sample anda bisa mengambil dari tutorial ini sebagai contoh. Dengan membuat desain gambar sendiri maka nantinya slider yang akan anda pasang bisa menjadi lebih cocok dan serasi apabila di terapkan kedalam blog anda dan bisa contras dengan seluruh warna dari blog anda. Untuk melihat slider yang akan kita bahas pada tutorial ini anda bisa melihat demonya terlebih dahulu pada tombol button yang terdapat dibawah. Untuk menerapkan slider ini kedalam blog maka berikut adalah jQuery Slider Pink Style di Blog With CSS3 dan tutorial cara penerapannya kedalam widget blog.

DEMO

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.

<style>
#wrslider { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQ1z8ypDwzKChKpgeTrnSe4e3EYmFjnuZcRYK-sb-288DlXpWmh2-nmwzrCinoWyTzO8wgoZOchOVo4Mkzps6TYEPj4iAaoiORR1yBtZwYCJKuSzMBfnTWKb3-R4r6UTF7mk65J_EDX-e/w960-h227-no/Faceblog+Evolutions+%25281%2529.jpg); height: 227px; overflow: hidden; position: relative; }
#mover { width: 2880px; position: relative; }
.slide { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; }
.slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img { position: absolute; top: 20px; left: 400px; }
#slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/startstop-slider.js"></script>

<div id="wrslider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>Judul 1</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4m3qM6c-ifzOwRwtXNgS5kmI3EXhzh1vc4dtiGNjXJx9inifpcOqBK32-83MkzHCgFFfWbURxCY5B10hx2dltTB_CjeXxVGM3rAlmJtAjeN-U6zWThJG0I6gDETGt2UenmoEv54rNsBW/w434-h161-no/Faceblog+Evolutions+%25281%2529.png" alt="learn more" /></a>
</div>

<div class="slide">
<h1>Judul 2</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKrNlVPQe_ZXc0xr8X3uaHwZMM3RU_2detuvAQKkTFacrFOPbiy-hgF4QGWxCQ40oMvdk1F4uG_2trX5eQA8mPaVguF_yJb1c4hbXqVBK243dnnbmWNTfj-7hFXYP6mq1zQ1WAn9z8PE7/w434-h161-no/Faceblog+Evolutions+%25282%2529.png" alt="learn more" /></a>
</div>

<div class="slide">
<h1>Judul 3</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l6pa2NNEi-mCc2R8XuuQE4g0ZJsrNWdyGT3CXtrwA7l1udZQEiGAqDsO7vIl7khP03H9cm9__Gq4idy2_N-Cr3qohdAUizp8rrxi_GaddC9O0SZB8hHEKwqaXh76mOVCZsMNbN8M9Nyv/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a>
</div>
</div>
</div>

Keterangan:
Ganti “http://mas-andes.blogspot.com” dengan URL halaman yang di inginkan.
Ganti judul, deskripsi maupun gambar dengan yang di inginkan.
Untuk ukuran lebar dan tinggi slider bisa anda atur sendiri dengan ukuran yang sesuai tamplate blog anda.

3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

Tambahan: jika ingin menambahkan lebih banyak lagi yang ingin dimasukan kedalam slider maka anda tinggal menambahkan atau cukup dengan copy kode berikut ini:

<div class="slide">
<h1>Judul</h1>
<p>Silahkan ganti dengan deskripsi yang di inginkan</p>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l6pa2NNEi-mCc2R8XuuQE4g0ZJsrNWdyGT3CXtrwA7l1udZQEiGAqDsO7vIl7khP03H9cm9__Gq4idy2_N-Cr3qohdAUizp8rrxi_GaddC9O0SZB8hHEKwqaXh76mOVCZsMNbN8M9Nyv/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a>
</div>

Kemudian taruh diatas / sebelum kode </div> yang berwarna merah.