Menambah Fitur jQuery Animasi Slider Pada Blog

Info informasi Menambah Fitur jQuery Animasi Slider Pada Blog atau artikel tentang Menambah Fitur jQuery Animasi Slider Pada Blog ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnH9yGum0AX-ZUW4wcbG2U6w9EUcmGmcPMDpflfDIfla5vzirNKsVDRoGHWN-wci8uZORI4QLja_qO0p6TusINLrhMvKa4jEhWzNAcz3T3B2eOsaRzUDRPoNuCHUKAsuyJCchSo-BJ9Tk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQ9f9rfdNvA68o_pYm2PiV4-jWJtVQax7L6IDrYBkvjUWr8Jzi9gT6lZC3aM3V3IQh7feohPpHQde3uXAyfVWEcz1g8g_dsZEPkBQz4cPSwtYKeFdOG0qI_II9EnualzdxEOyIv4KxUM/h120/navi.png) no-repeat left bottom;
margin:0 10px;
cursor:pointer;
position:relative;
}
.cs-active-pagination {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQ9f9rfdNvA68o_pYm2PiV4-jWJtVQax7L6IDrYBkvjUWr8Jzi9gT6lZC3aM3V3IQh7feohPpHQde3uXAyfVWEcz1g8g_dsZEPkBQz4cPSwtYKeFdOG0qI_II9EnualzdxEOyIv4KxUM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQ9f9rfdNvA68o_pYm2PiV4-jWJtVQax7L6IDrYBkvjUWr8Jzi9gT6lZC3aM3V3IQh7feohPpHQde3uXAyfVWEcz1g8g_dsZEPkBQz4cPSwtYKeFdOG0qI_II9EnualzdxEOyIv4KxUM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13i7KO_X626vUwdjiRoS5f1_YXu_SV0AKK2B0NIPhnQLSU1cEFay57wttamcUuoAcGlakzX-01LiT9GApGXND1j5J9B4fGCNHxZPWGFr2_tdda8C6bv6b9XtamnPdx5Zo7QDJM0Zi8zE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEcNMssZd1p-Za31ySsyxuh1nB5LesDVC0mE79RcaKEQj5TKjgl9733Mq0iSlTM3J4ew0eqNKLE0L-QQu5YaNTnFZ3SqLlSVgHCuY-ZKP324Pqm4XXJq7qc2Y8voW_vTWBXypbT5J1as/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh736F1pT7A46bIVzMBngJrdLwp61t-EcxoaGFKhVnaNGvwRcYqMnM7_-cT6VxtsupgUUue42nqyLLNVQvudJKb2wRBPWvazKdXNkm5jNqdhyphenhyphenxGY4BpSe7nznoDqBywFLvEJCEK0nb5Pmg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZbsuqKsZyr-IU0faJU-7ABwRmz7gmOrXG-9pxQgr8caZ6dxtrWZjz-iQm3oKf62rcBr75bmPnFIN_PFUqIBfvXIUb2IPIoWTbrNhrb1eiNV0pAa2pQ7wme8eGmQPwqkfSUaOTgHqJu0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaOZ60g6RYEAJtkN44k8-GCNFl3l3sSkDktFwZ52oC-QFlQ4TlyB8O2JbbGNtNFBdrv1VRZVaGCVXAOLGCehK5qtY-ClLykLNPs_KFJK4yWUUzGJ1IDcj2t343R5Q32bplRw-Go3iwrc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis_Yo1rbqX4scbD-pvzHy6P6UlEoNV5s7r-lX2EboBtZsJPeCS2PmE2nSp6hMDy4e_rMpX2jRLJrfdIgFmWLULxHyyEyoASY4MPPX9u9LH4XIbWBen9XJTutgJlozQRZ4UM2m_IddqAxA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCH12qe48mI6KxnIhllWASxMtHGnNfaXkKaq8JJr1vO0oLBr17E41L-_iXfR0DrSOu_lkooM1EALyBaMBuMdBjCbv1NOfmOr3h172iZk2dsbZvA3xL1E1Ayv4e0NWD3eFv-E_-vR69nkY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13i7KO_X626vUwdjiRoS5f1_YXu_SV0AKK2B0NIPhnQLSU1cEFay57wttamcUuoAcGlakzX-01LiT9GApGXND1j5J9B4fGCNHxZPWGFr2_tdda8C6bv6b9XtamnPdx5Zo7QDJM0Zi8zE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEcNMssZd1p-Za31ySsyxuh1nB5LesDVC0mE79RcaKEQj5TKjgl9733Mq0iSlTM3J4ew0eqNKLE0L-QQu5YaNTnFZ3SqLlSVgHCuY-ZKP324Pqm4XXJq7qc2Y8voW_vTWBXypbT5J1as/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh736F1pT7A46bIVzMBngJrdLwp61t-EcxoaGFKhVnaNGvwRcYqMnM7_-cT6VxtsupgUUue42nqyLLNVQvudJKb2wRBPWvazKdXNkm5jNqdhyphenhyphenxGY4BpSe7nznoDqBywFLvEJCEK0nb5Pmg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZbsuqKsZyr-IU0faJU-7ABwRmz7gmOrXG-9pxQgr8caZ6dxtrWZjz-iQm3oKf62rcBr75bmPnFIN_PFUqIBfvXIUb2IPIoWTbrNhrb1eiNV0pAa2pQ7wme8eGmQPwqkfSUaOTgHqJu0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaOZ60g6RYEAJtkN44k8-GCNFl3l3sSkDktFwZ52oC-QFlQ4TlyB8O2JbbGNtNFBdrv1VRZVaGCVXAOLGCehK5qtY-ClLykLNPs_KFJK4yWUUzGJ1IDcj2t343R5Q32bplRw-Go3iwrc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis_Yo1rbqX4scbD-pvzHy6P6UlEoNV5s7r-lX2EboBtZsJPeCS2PmE2nSp6hMDy4e_rMpX2jRLJrfdIgFmWLULxHyyEyoASY4MPPX9u9LH4XIbWBen9XJTutgJlozQRZ4UM2m_IddqAxA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCH12qe48mI6KxnIhllWASxMtHGnNfaXkKaq8JJr1vO0oLBr17E41L-_iXfR0DrSOu_lkooM1EALyBaMBuMdBjCbv1NOfmOr3h172iZk2dsbZvA3xL1E1Ayv4e0NWD3eFv-E_-vR69nkY/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.

Demikian artikel tentang Menambah Fitur jQuery Animasi Slider Pada Blog ini dapat kami sampaikan, semoga artikel atau info tentang Menambah Fitur jQuery Animasi Slider Pada Blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik