Cara Memasang Jquery Slideshow di Blosgpot

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 ]]></b:skin> jika sudah dapat copy paste kode dibawah ini diatasnya.
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
ini digunakan untuk mengatur ukuran box slideshow untuk disesuaikan dengan ukuran blog kita.

#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;
}
Ini digunakan untuk mengatur tab navigasi sebelah kanan yang ada gambar kecilnye. :)

#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;
}
Ini untuk mengatur background dari tab sebelah kanan.

#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 </head>

<code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'>
</code>
<script type='text/javascript'>
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
</script>

Kemudian klik Simpan Template
Kemudian langkah terakhir masukan kode html dibawah ini sesuai posisi yang diinginkan misal diatas posting dengan menambah widget HTML/Javascript.

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>

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 ...

2 komentar :

BERITA VIRAL ADMIN20 April 2012 pukul 16.35
nanya dong, aku kan punya theme udah punya slide jquerynya, supaya slide tampil tiap halaman ngubah codingnya gimana yah ?

Thanks gan
BalasHapus
Balasan
In Foku17 Mei 2012 pukul 22.22
@MatH : biasanya cuma ngerubah bagian htmlnya bro.. ganti gambarnya sama diskripsi. kalau mau ane bantu templatenya pake apa ya?
BalasHapus
Balasan

Tambahkan komentar

Cara Memasang Jquery Slideshow di Blosgpot

RELATED

2 komentar :