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

Menambah Fitur jQuery Animasi Slider Pada Blog

jQuery Animasi Slider Blog
Menambah Fitur jQuery Animasi Slider Pada Blog – untuk pengguna template blogger jika ingin memodifikasi dengan memasang slider pada blognya dan ingin langkah yang simple tanpa perlu melakukan editing template blog pada edit HTML bisa menggunakan langkah ini hanya dengan menambah widget HTML dan ini tentu sangat mudah karena untuk anda yang juga masih tahap belajar sama seperti saya juga pasti bisa melakukannya dengan waktu yang cepat dan mudah dalam menerapkan. Apabila suka menggunakan slider sama seperti saya untuk melengkapi desain blog mungkin ini bisa menjadi sedikit tambahan koleksi slider dan dapat langsung diterapkan pada elemen tata letak blog karena mungkin untuk sebagian blogger yang masih pemula sama seperti saya langkah ini bisa sebagai alternatif. Untuk lengkah lebih jelasnya dalam menerapkan animasi slider kedalam blog maka berikut adalah tutorial untuk cara Menambah Fitur jQuery Animasi Slider Pada Blog.
Demo
1. Login ke akun blogger.
2. Copy kode dibawah ini.
<style type="text/css">
.wrapper-translider3d {
position:relative;
width:900px;
height:300px;
display:block;
}
.s-shadow-b{
background:#000;
width:900px;
height:15px;
position:absolute;
bottom:-15px;
}
#slider {
width:900px;
height:300px;
position:relative;
display:block;
}
.slide { display:none; }
.cs-activeSlide { display:block; }
.slide-descriptions { display:none; }
.caption {
background: url("https://lh3.googleusercontent.com/-cg8uKIjzGoE/Ud65ZM68T3I/AAAAAAAAFwU/thnZH2_dAOo/h120/d-bg.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
display: none;
height: 260px;
padding: 20px;
position: absolute;
right: 40px;
top: 0px;
width: 180px;
z-index: 3;
}
.pagination {
bottom: -17px;
left: 345px;
position: absolute;
text-align: center;
}
.slider-pagination {
display:inline-block;
width:15px;
height:10px;
background:url(https://lh6.googleusercontent.com/-ea8FP6AH0ak/Ud65ZXw2q2I/AAAAAAAAFwY/lMg72r4aWVA/h120/navi.png) no-repeat left bottom;
margin:0 10px;
cursor:pointer;
position:relative;
}
.cs-active-pagination {
background:url(https://lh6.googleusercontent.com/-ea8FP6AH0ak/Ud65ZXw2q2I/AAAAAAAAFwY/lMg72r4aWVA/h120/navi.png) no-repeat left top;
}
.slider-2 {
padding-top:0;
}
#slider-1, #slider-2 {
width:900px;
height:300px;
position:relative;
display:block;
}
.cs-activeSlide-2 {
display:block
}
.cs-active-pagination-2 {
background:url(https://lh6.googleusercontent.com/-ea8FP6AH0ak/Ud65ZXw2q2I/AAAAAAAAFwY/lMg72r4aWVA/h120/navi.png) no-repeat left top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/translider-2.2.0.min.js"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/translider-1.2.min.js"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/main.js"></script>

<div class="wrapper-translider3d">
<div class="s-shadow-b"></div>
<div id="slider">
<div class="slide cs-activeSlide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-M23THLSuRrg/Ud8NlxAGQKI/AAAAAAAAAG0/UfMwDGOztzA/w900-h300-no/Faceblog-Evolutions-%25286%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh5.googleusercontent.com/-A2MtNufIpzo/Ud8NlPWcIcI/AAAAAAAAAGs/6kCO6qtAQGE/w900-h300-no/Faceblog-Evolutions-%25287%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh4.googleusercontent.com/-GVrMsIqi49U/Ud8Ni7kkDhI/AAAAAAAAAGk/H-4_2P_yhFw/w900-h300-no/Faceblog-Evolutions-%25285%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-0j4RiOQg_-o/Ud8NijnfO7I/AAAAAAAAAGc/H2cURxr8M4I/w900-h300-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh3.googleusercontent.com/-TERWahCegXo/Ud8NfWn7i5I/AAAAAAAAAGU/zeVqoJ9L-CE/w900-h300-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-MN6CXDO4EQs/Ud8NeqKpyRI/AAAAAAAAAGM/4G8mkR76g04/w900-h300-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-w2Zb4838Rqw/Ud8NeaDWPnI/AAAAAAAAAGI/ZEguMAppgm4/w900-h300-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
</div>
<div class="pagination">
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
</div>
<div class="slide-descriptions">
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
<div class="sl-descr"> ISI DENGAN DESKRIPSI GAMBAR </div>
</div>
<div class="caption"></div>
</div>
Keterangan:
Untuk width dan height maupun URL gambar serta descriptions silahkan anda sesuikan selera, ubah angka 900 dan samakan dengan lebar blog anda.
Untuk merubah link halaman dan URL gambar silahkan ubah pada bagian dibawah ini:
<div id="slider">
<div class="slide cs-activeSlide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-M23THLSuRrg/Ud8NlxAGQKI/AAAAAAAAAG0/UfMwDGOztzA/w900-h300-no/Faceblog-Evolutions-%25286%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh5.googleusercontent.com/-A2MtNufIpzo/Ud8NlPWcIcI/AAAAAAAAAGs/6kCO6qtAQGE/w900-h300-no/Faceblog-Evolutions-%25287%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh4.googleusercontent.com/-GVrMsIqi49U/Ud8Ni7kkDhI/AAAAAAAAAGk/H-4_2P_yhFw/w900-h300-no/Faceblog-Evolutions-%25285%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-0j4RiOQg_-o/Ud8NijnfO7I/AAAAAAAAAGc/H2cURxr8M4I/w900-h300-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh3.googleusercontent.com/-TERWahCegXo/Ud8NfWn7i5I/AAAAAAAAAGU/zeVqoJ9L-CE/w900-h300-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-MN6CXDO4EQs/Ud8NeqKpyRI/AAAAAAAAAGM/4G8mkR76g04/w900-h300-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
<div class="slide"> <a href="http://mas-andes.blogspot.com"><img src="https://lh6.googleusercontent.com/-w2Zb4838Rqw/Ud8NeaDWPnI/AAAAAAAAAGI/ZEguMAppgm4/w900-h300-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
</div>
3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.

Berlangganan artikel via email

54 Response to "Menambah Fitur jQuery Animasi Slider Pada Blog"

wow, kren bnget sob. jdinya, gambarnya bkalan ada efek yg bkin menarik
(y)

Balas

Makin lengkap aja nih tutorial blogger nya...

http://adirizka7.blogspot.com

Balas

wah ini memamng mantap dan juga keren mas andes, sepertinya untuk memulainya gal begitu sulit dan gampang, perlu dicoba nih
terima kasih sudah berbagi

Balas
avatar
Anonymous

ijin coba ya gan semoga sukses !! mari kita sambung siraturahhim !!

Balas

Wah mantab mas...ijin coba lagi ya...

Balas

wah mantab tutorialnya, ijin nyimak, salam kenal...sekalian ijin follow ya dan ditunggu follow baliknya

Balas

yakin gak bikin berat load nya mas andes?

Balas
avatar
Anonymous

izin nyimak terus pasang, kalau sudah paham ya mas...

Balas
avatar
Anonymous

Makin terlihat keren dan bagus ini mas kalau sudah pakai kode diatas itu :)

Balas

menarik jd bikin tertarik..

Balas

mas Andes memang di kenal baik..sejak dulu kok mas :)

Balas

mas Andes memang di kenal baik..sejak dulu kok mas :)

Balas

apalagi ada bonus martabak manisnya..loh mas ..hehe :)

Balas

saya blm sempet liat demonya..mas

tapi kalo pake fitur jquery
slidernya memang hanya bisa tampil di home page aja ya mas... :)

Balas
avatar
Anonymous

Waduh saya telat..koneksi down...siip pokoknya jquerynya mas andes..sambil menikmati sisa menu buka puasa " martabak telur goreng mangga, "

Balas

sepertinya ringan ya mas, saya nyimak dulu mas...

Balas

ya sesukanya mas, mau taroh homepage aja bisa.. mao taoh semua halaman juga bisa :)
yoi mantab mas virly gorengan martabak gurih pasti :)

Balas

mau tau aja apa mau tau bangettt mas agus :)

Balas

yang ditarik apanya mas...

Balas

saking semangatnya komennya jadinya dobel deh hehe...

Balas

silahken mas lanjutken hehe...

Balas

oh ternyata martabaknya yang kemaren masih sisa yah mas....

Balas

apapun makanannya minumnya tetep teh botol sosor :)

Balas

Banyak juga yah mas koleksi slidernya mas Andes, keren-keren semuanya, yang make juga bisa banyak pilihan sesuai dengan selera... keren deh pokoke :)

Balas

udah salah tempat salah nulis lagi hadeuhhhh...

Balas

salam kenal kembali mb iis

Balas

di timbang dulu mas agus

Balas
avatar
Anonymous

Keren slide-nya mas, tapi ane lihat demo-nya keseringan pake gambar cewek cantik. Ingat mas ini bulan ramadhan, jangan sering mikirin + lihat cewek cantik. Mending ditampilkan gambar mpok nori atau mpok atik, omas juga boleh biar beda. hahahaha

Balas

makin banyak nih koleksi slidernya .....keren2 lagi..hebat banget

Balas

aaaaaahh BAGUS BANGET :D.. liat demonya... giliran mau pasang di blog imel imelan dulu biar valid ahaha #maklum .

lagi demam sama slider nih , bungkus bungkus.

Balas

mending anime iya kan.. cantik cantik juga cuma anime ahaha.

Balas

temen siapa dulu dong ahaha ea :p

Balas

minyak goreng?.

Balas

mantep neh tutor nya...

Balas
avatar
Anonymous

yang pedes karetnya dua yah mbak jangan ketuker...

Balas
avatar
Anonymous

mas cewek yg di demo slider itu namanya siapa ? hahaha

Balas

hello gan... bisa tukeran link ga ???

Balas

bisa mas gak ada larangan tuker link :)

Balas

mamang sudah pollow kok

Balas

minyak goreng mahal miz... apalagi minyak nyong nyong hehehe

Balas

yang ndak pedes ndak pake karet dan ndak pake bungkus

Balas

Jiahhhhh... keren sekali efeknya...

Balas
avatar
Anonymous

Artikel Script yang dari Mas Andes
Pasti, sangat paten hasil nya, nyimak lagi dan belajar lagi
Mas Andes terima kasih, sudah berbagi tips trik ini

Balas

Saya pesen Atu, yang hot yah Mbak, - Mas..?
Di tekor atau di pincuk gak apa jangan pakai parmolin
Atau jat pewarna, biar agak polos yang penting Asyik.

Balas

Gara-gara habis Makan buah Mangga Gedong Mas Budi
Semangat nya jadi Nambah Ganda. ampe-ampe sekaligus
Koment jadi 2, besok2 kayanya bisa satu kali koment
Bisa jadi 4 nih, ternyata Buah M.Gedong lebih banyakan
Manfaatnya ketimbang Semangka..hhahahhahaahhahh..

Balas

Script Mas Andes memang selalu membuat menarik
Buat di pasang pada blog kita, tapi jangan di tarik-tarik
Mas Budi, Mas Anthonie, tar script nya berserakan th hkhkh

Balas

MAS PASTE CODENYA DIMANA SESUDAH HEAD ATAU BODY HEHEHEMAAP PEMULA

Balas

kok gak jalan ya mas, berhenti di page 1

Balas

makasih mas atas semua tutorialnya,,, sangat bermanfaat sekali,,, saya gunakan untukwebsite saya di http://www.sewavillabatu.com

Balas
avatar
Anonymous

Mantap mas, artikel & blog yg bagus.
Saya sdh pasang di blog saya (lagi belajar bikin blog :)

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 "Menambah Fitur jQuery Animasi Slider Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode