Demo
1. Login ke akun blogger.
2. Copy kode dibawah ini.
<style type="text/css">Keterangan:
.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/AVvXsEgI6Q1csVWWXqMAX0hyjigs248TY8m2IYA8HjeKL5kNGMMnzIas3GA3CJfM7wnQ_-rx1FoMU8AJOXibZRpiYqUNEztLWXGxIK_EHiqQN__Pc5glj8AqOPbFNQeIu7UH4mM6BOzNmqvpO9Q/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/AVvXsEgKYuLBnFrTEBLW7xcd5YmFEvQmja4lP7CuqqpgKRnzpsMiObhJdFiFxNKBXOiu4IO68UFv5MgE-A67ww8Sdzp46cIcG8Kz0MgdUAcSTeOChlEVX0_lBJxGQVMAapAEFjJ3vSPeGG0sCNo/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/AVvXsEgKYuLBnFrTEBLW7xcd5YmFEvQmja4lP7CuqqpgKRnzpsMiObhJdFiFxNKBXOiu4IO68UFv5MgE-A67ww8Sdzp46cIcG8Kz0MgdUAcSTeOChlEVX0_lBJxGQVMAapAEFjJ3vSPeGG0sCNo/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/AVvXsEgKYuLBnFrTEBLW7xcd5YmFEvQmja4lP7CuqqpgKRnzpsMiObhJdFiFxNKBXOiu4IO68UFv5MgE-A67ww8Sdzp46cIcG8Kz0MgdUAcSTeOChlEVX0_lBJxGQVMAapAEFjJ3vSPeGG0sCNo/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/AVvXsEggW0ZzbKRwVcPLbt5JOJHBm3g_IQOI9bZDYFk17h09MM7M1hGjZ-fMohWDbHVTcFgpV37eW5fXsNPVpbZLFtBK8-jtvU7CZtjI_SRAJ0jtfC3gWmbPDD0FhT3kazl2hclUP7ptM1J7f2g/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/AVvXsEi8MSCbT03kj9D715n3CrAo2aJYlgcMbPhdxLCfX5MXiDoJLvsmXH0wDw9YQj4POAO1jZlWO0K2qKm7WUBKTISKWIfxGHw-yuHwDgxBF6ncPMDHHfDnn1o0KBYVlKpdodRV_-dzchEHOSU/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/AVvXsEi7NIMbNKEHRxbVLpC5p1gaT6K_1A8PmQMw9RpvLREotXyRaiW3MNDTWiLB3j60gQ9A88qEgTyhMxI6MmmsovZJGyXwrZXSj3HS_yr9yLiEp3fGVEB5WmcpKQzZcVI019V3eUgC-FtuG2I/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/AVvXsEizTa6PBF_tdSd46eD8_vBRxMqPpha31TmKLjXVcl6bj4S9v908xiIcO_nkzomybjtDl5Bo06br3j_B_2M0pCh9FmqyNAYxNB0vVarOcuaJ6LcBGxabMhc_exQiMLFH5MdqzUyKXbe_Olk/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/AVvXsEhuTBydLXHnivEJ2OyD2gKhaiZLHzuWWMabdoTIDBL3_aAhXk-zT41plP7EYLiomlqcGDjXI_cEOETF0e88zpVMPW7JEmNxGcmMMT_owfzH54z6s6a0PBNu-Pd8GfTmgZa4EsVMVlqmNG8/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/AVvXsEjplpSEcLC85Faxq90DSXoId3zAn1YMjFJWh8FqdsiSw4eg8xC7ZyClslDgFPDmKkYuppGQVwuhT02SnIMtyeO_slc23lL_iWJJE2OI9oOPIbfz2XfbvcxQbprByyOFkCEr4agn4Ev9Hro/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/AVvXsEg4vyJ6atg4fWIQ39oGZhvc7GmIfcz6RMSElHUt5nxs6vYPHCEpBHf_uNYzc13GVk7IKh_x_abrj7cc_V-t2gSWdfpaf0fY2SC2NvF2xPtrkuS6RtPNa61RVQ91MMlY0dD_mwwqKdP4FpY/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>
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">3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.
<div class="slide cs-activeSlide"> <a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggW0ZzbKRwVcPLbt5JOJHBm3g_IQOI9bZDYFk17h09MM7M1hGjZ-fMohWDbHVTcFgpV37eW5fXsNPVpbZLFtBK8-jtvU7CZtjI_SRAJ0jtfC3gWmbPDD0FhT3kazl2hclUP7ptM1J7f2g/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/AVvXsEi8MSCbT03kj9D715n3CrAo2aJYlgcMbPhdxLCfX5MXiDoJLvsmXH0wDw9YQj4POAO1jZlWO0K2qKm7WUBKTISKWIfxGHw-yuHwDgxBF6ncPMDHHfDnn1o0KBYVlKpdodRV_-dzchEHOSU/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/AVvXsEi7NIMbNKEHRxbVLpC5p1gaT6K_1A8PmQMw9RpvLREotXyRaiW3MNDTWiLB3j60gQ9A88qEgTyhMxI6MmmsovZJGyXwrZXSj3HS_yr9yLiEp3fGVEB5WmcpKQzZcVI019V3eUgC-FtuG2I/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/AVvXsEizTa6PBF_tdSd46eD8_vBRxMqPpha31TmKLjXVcl6bj4S9v908xiIcO_nkzomybjtDl5Bo06br3j_B_2M0pCh9FmqyNAYxNB0vVarOcuaJ6LcBGxabMhc_exQiMLFH5MdqzUyKXbe_Olk/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/AVvXsEhuTBydLXHnivEJ2OyD2gKhaiZLHzuWWMabdoTIDBL3_aAhXk-zT41plP7EYLiomlqcGDjXI_cEOETF0e88zpVMPW7JEmNxGcmMMT_owfzH54z6s6a0PBNu-Pd8GfTmgZa4EsVMVlqmNG8/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/AVvXsEjplpSEcLC85Faxq90DSXoId3zAn1YMjFJWh8FqdsiSw4eg8xC7ZyClslDgFPDmKkYuppGQVwuhT02SnIMtyeO_slc23lL_iWJJE2OI9oOPIbfz2XfbvcxQbprByyOFkCEr4agn4Ev9Hro/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/AVvXsEg4vyJ6atg4fWIQ39oGZhvc7GmIfcz6RMSElHUt5nxs6vYPHCEpBHf_uNYzc13GVk7IKh_x_abrj7cc_V-t2gSWdfpaf0fY2SC2NvF2xPtrkuS6RtPNa61RVQ91MMlY0dD_mwwqKdP4FpY/w900-h300-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" height="300" alt="Faceblog Evolutions" /></a> </div>
</div>
Tidak ada komentar:
Posting Komentar