Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

jQuery Slider Pink Style di Blog With CSS3

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.
1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.
<style>
#wrslider { background: white url(https://lh6.googleusercontent.com/-vl1c0YTtZlc/UdBT_TrXzKI/AAAAAAAAFXo/xE6eEzeP1zY/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://lh4.googleusercontent.com/-qLdyb2mR-Tw/UdBUAega0wI/AAAAAAAAFXw/lSmis-TtqUA/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://lh4.googleusercontent.com/-Rs5vJr65oO8/UdBUBRxgYwI/AAAAAAAAFX4/l64DUsze-tM/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://lh5.googleusercontent.com/-3-UKAI6mgz4/UdBUC7ar4YI/AAAAAAAAFYA/wx5mJd0BVW0/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://lh5.googleusercontent.com/-3-UKAI6mgz4/UdBUC7ar4YI/AAAAAAAAFYA/wx5mJd0BVW0/w434-h161-no/Faceblog+Evolutions+%25283%2529.png" alt="learn more" /></a>
</div>
Kemudian taruh diatas / sebelum kode </div> yang berwarna merah.

Berlangganan artikel via email

34 Response to "jQuery Slider Pink Style di Blog With CSS3"

Keren kak,,,,
harus banyak blajar dsni

Balas

disini banyak sekali tutorial blog yang mungkin atau sedikit adanya di blog orang lain

Balas

weee...model baru....warna imut banget. :D

Balas

Cocok kayaknya buat blognya mbak Indah :)

Balas

Ok banget nih mas Andes, banyak variasi slider disini, kita tinggal pilih mana yang cocok :)

Balas

Bisa2 sy juluki blog ini blog slider, koleksi slider2nya keren2 Sob, apalagi yg ini,,

Balas

Iya keren-keren ya mas slidernya mas andes...berguru di mana di yah?

Balas

jquery emang mantap bikin blog keren, tapi kata orang, bikin berat loading blog ya? template blog sy masi bawaan blogger, bisa masukin html di side bar aja udah sukur. salam super agasaki

Balas

warnanya lembut benget mas, enak dipandang!!!

Balas

keren keren.. demonya yang di atas apa dibawah sih :D

aku lebih cinta sama penggunaan style dan /style gak pake mikir soalnya.

Balas

ahaha tuh dapat nama baru, ganti aja nama blognya andesslider atau andessticker -__- .

Balas

keren gan. tapi gak semua blog cocok dengan slider ya.

Balas

Ternyata banyak betul tutorial blogger menarik disini, lanjut baca-baca gan

Balas

setuju, cocok kayaknya buta tempat mbak indah...

Balas

udah keren dan cantik pula warnanya pink , warna kesukaan karena cinta

Balas

pagi sob, selamat beraktifitas. Semoga hari ini lebih menyenangkan dari hari kemaren. Jangan lupa awali aktifitas dengan doa, cheer

Balas

mantapz surantap kawan .. biar ciamik penampilan blognya
tapi kalau aku pake pink gimana ya ???

Balas

Ada lagi yang baru nih,trus yang mana yang harus saya pakai hihihi
okelah supaya tidak penasaran mindingan dicoba dulu saja yah bro hehehe,,,

Balas

waa.. warna pink, gue banget,,,, mau dong make nya tapi belum ngerti ni dasbor baru blogger,,,takut utak atik nanti malah rusak...

ahhhhhhh....

salam blogger

Balas

keren mas jadinya,.makasih ilmunya

Balas

Ini untuk pink girly banget Mas Andes, tolong sharekan juga yang untuk cowok ya Mas hehehe..:) ngarepin dot com:)

Balas

mas Andez memang rajanya slider euy hehehe

Balas

Selesai sholat subuh, enaknya jalan-jalan bentar ke tempat sahabat. Cuci mata sambil mencari pengetahuan baru. cheer!!!

Balas

punyaku kok terasa berat sekali ya ? enaknya makai yang mana slidernya ? yang modelnya mirip dengan rendom post ku yang sekarang .

Balas

hasil demonya keren.

Balas

Postingan Mantap Kang.. Ngomong Ngomong Blognya juga keren.. salam kenal yah kang..

Balas

mau tanya ini gunanya buat apa sih.. kalo dihapus gak ada efeknya.. terus buat apa ya..


/* Accordion Featured Post Slider

ditutup sama

.

Balas

loh kok gak muncul :D
hahaha

ditutup sama ini


< ! -- Accordion Featured Post Slider -->

Balas

wah masih belum breani pake slider mas :D ntar takut berat blognya :)


btw maskih ilmunya mas :) bermanfaat banget :)

Balas

setuju dgn teman2 diatas, slidernya bagus2 dan keren.

Balas

mbak indah gak kalahimut kok

Balas

mungkin mas andes yang akan menjelaskan, sabar ya miz,hehe

Balas

banyak belajar disini neh

Balas

Tolong share cara memperlambat Slide nya.?

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "jQuery Slider Pink Style di Blog With CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode