Hai.. hai... sesuai permintaan pembaca PermakBlogs yang bertanya cara pemasangan slideshow menggunakan jQuary berikut aku kasih dah caranya. Sebenarnya sudah banyak kode Slideshow jQuery di perlintasan internet, tapi demi kelancaran bersama dan indahnya berbagi aku kasih dah cara pemasangan slideshow jQuery yang pernah ane coba. Lumayan panjang sich jadi simak baik-baik ya cara pemsangan slideshow jQuery ini. Ikuti langkah dibawah ini ya :
- Seperti biasa masuk ke account Blogspot kamu.
- Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. Cari kode ]]> jika sudah dapat copy paste kode dibawah ini diatasnya.
#featured{ini digunakan untuk mengatur ukuran box slideshow untuk disesuaikan dengan ukuran blog kita.
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
Ini digunakan untuk mengatur tab navigasi sebelah kanan yang ada gambar kecilnye. :)
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
Ini untuk mengatur background dari tab sebelah kanan.
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
trus klik simpan template dulu.
Kode CSS lengkapnya seperti dibawah ini :
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
} - Kemudian tambahkan kode jQuerynya di bawah ini sebelum
Kemudian klik Simpan Template Kemudian langkah terakhir masukan kode html dibawah ini sesuai posisi yang diinginkan misal diatas posting dengan menambah widget HTML/Javascript.
15+ Excellent High Speed Photographs
20 Beautiful Long Exposure Photographs
35 Amazing Logo Designs
Create a Vintage Photograph in Photoshop
15+ Excellent High Speed Photographs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....read more
20 Beautiful Long Exposure Photographs
Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....read more
35 Amazing Logo Designs
liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....read more
Create a Vintage Photograph in Photoshop
Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....read more
jangan lupa disimpan ya..
nahh proses menambahkan slideshow sudah selesai coba cek blogspot kamu... EXPECTO PATRONUM (sindrom harry potter)... :)
bagaimana berhasil khan... mudah ya... kalau masih belum bisa jangan malu bertanya ya... :)
ok dechhh.. sekian dulu cerita dari kakak sampai ketemu lagi di cerita berikutnya... salam PermakBlogs ya ... 
0 komentar:
Posting Komentar