Menambah Fitur jQuery Animasi Slider Pada 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>
.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. 

Salam ARDY MENTWOZT tunggu tips Selanjutnya :) :)