Membuat Slide Show Dan Tabs Biasa

Home > JavaScript Blogger > Membuat Slide Show Dan Tabs Biasa

Slide Show ini adalah kembangan dari Dynamic Drive. Memang terlihat biasa, tapi kalau ditempatkan ditempat yang cocok akan terlihat manis. Jadi sifatnya adalah pemanis saja. Tapi disarankan untuk tidak menempel dinding, karena akan disemutin.

Demonya silahkan dilihat disini

Langsung kecaranya saja

Salin kode JQuery berikut:

featuredcontentglider.init({
 gliderid: "canadaprovinces", //ID of main glider container
 contentclass: "glidecontent", //Shared CSS class name of each glider content
 togglerid: "p-select", //ID of toggler container
 remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
 selected: 0, //Default selected content index (0=1st)
 persiststate: false, //Remember last content shown within browser session (true/false)?
 speed: 500, //Glide animation duration (in milliseconds)
 direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
 autorotate: true, //Auto rotate contents (true/false)?
 autorotateconfig: [3000, 0] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

Kode JQuery library kalau sudah ada jangan disalin lagi.

Kode CSS berikut:

.glidecontentwrapper{
background:#222;
position: relative;
margin:0;
padding:0;
width:740px;
height:230px;
overflow: hidden;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
float:left;
}
.glidecontent{
position:absolute;
background:#E6F2F2;
padding:20px;
visibility:hidden;
width:700px;
text-align:justify;
}
.glidecontent h3{
font-size:22px;
color:#222;
margin:0 0 10px;
font-weight:normal;
border-bottom:1px solid #444;
}
.glidecontent img{
width:250px;
float:left;
padding-right:10px;
}

.glidecontenttoggler{
width:740px;
margin:0;
text-align:left;
background:#222;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
float:left;
display:inline;
}
.glidecontenttoggler a{
display: -moz-inline-box;
display: inline-block;
border-left:1px solid #333;
border-right:1px solid #111;
color:#fafafa;
padding:6px;
margin:0;
font-weight:bold;
text-decoration:none;
}
.glidecontenttoggler a.selected{
background:#E4EFFA;
color:#222;
}
.glidecontenttoggler a:hover{
background:#E4EFFA;
color:#222;
}
.glidecontenttoggler a.toc{}
.glidecontenttoggler a.prev, .glidecontenttoggler a.next{}
.glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
background:#E4EFFA;
color:#222;
}

.glidecontenttoggler = untuk tabs

.glidecontentwrapper = untuk slide show artikel

Silahkan disesuaikan kode CSS diatas sesuai kriteria anda.

Salin kode HTML berikut:

<div class='glidecontenttoggler' id='p-select'>
<a class='prev' href='#'>Prev</a> 
<a class='toc' href='#'>Page 1</a>
<a class='toc' href='#'>Page 2</a>
<a class='toc' href='#'>Page 3</a>
<a class='toc' href='#'>Page 4</a>
<a class='toc' href='#'>Page 5</a>
<a class='next' href='#'>Next</a>
</div>
<div class='glidecontentwrapper' id='canadaprovinces'>
<div class='glidecontent'>
<h3><a href='http://nanoyulianto.blogspot.com/2010/09/template-n2y-biasa.html' target='_blank' title='Template N2y Biasa'>Template N2y Biasa</a></h3>
<img alt='Template N2y Biasa' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqLWhvflh68n0gx2bvQC9Gh19VCfmTsRDScBDTyVRm0I88hwtBzPZSDDt_lLywZajPOEotOg9DoKEeUZnluogVd_IDiLlekLvE0NC-m1Sa-wkhRTihif4l4-0BG_bmdLfJKTr1fqOVoc0O/s320/N2y+Biasa.png'/>
<p>Kali ini template N2y Series keluar lagi. Bertemakan simple, hitam-putih, page navigation karya Abu-Farhan, back to top dengan jquery, 3 kolom home page dan 2 kolom di posting page.</p>
</div>

<div class='glidecontent'>
<h3><a href='http://nanoyulianto.blogspot.com/2010/09/template-n2y-eksperiment.html' target='_blank' title='Template N2y Eksperiment'>Template N2y Eksperiment</a></h3>
<img alt='Template N2y Eksperiment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS3q_V20ReyucoKdEgPn1B3BtlIVOz8HZmmxoMgkXb660wStc-gZ1ft_qVmOI6UXfH7u-DLepNidh1f0A1G_lBZmiA8WHMhifsX4Eb9CSIs-VzUORzzjSPoqRtUClGNEYhy1on069Abv7s/s320/N2y+Eksperiment.png'/>
<p>Template ini generasi ketiga dari template Blog Nano Yulianto. Dengan Sentuhan CSS3 dan JQuery Opacity. Font yang nyentrik bergaya Jokerman menjadi ciri khas dari Template ini.</p>
</div>

<div class='glidecontent'>
<h3><a href='http://nanoyulianto.blogspot.com/2010/09/template-n2y-shadow.html' target='_blank' title='Template N2y Shadow'>Template N2y Shadow</a></h3>
<img alt='Template N2y Shadow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvVOZnuJSDQNx5wRSHjLRjic1z14XwJ5YrVkjKWU08oE_2sTFdq56Lvy6V2FbShLbg-c75sbBeafpHunzbo_uaGNZkC8wp1Q0Oa4mL0Awovn8c8C7p8F3icGPygfwy7tvOWNxhyGdDxnu/s320/N2y+Shadow.png'/>
<p>Template yang bertema Neon dalam gelap, 2 kolom, auto read-more dan sedikit memanfaatkan CSS3. Sebenarnya Nano setiap membuat tempalate tak ada konsep yang dipikirkan sebelum membuatnya, datang begitu saja.</p>
</div>

<div class='glidecontent'>
<h3><a href='http://nanoyulianto.blogspot.com/2010/08/template-n2y-suka-suka.html' target='_blank' title='Template N2y Suka-Suka'>Template N2y Suka-Suka</a></h3>
<img alt='Template N2y Suka-Suka' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Qpzor7fHCfrBw2PWlxNQq_ssC_WF-DiCy5lBGD6dh2zwgYPiAQkyI4Vl15kQqWLECOvSuGa3q5q64_8kWUufRPcG0P4O-k7Pws_XO7XQ34iiRKKv4bgCVzfje43uRQgJ9WVcJPXt7FC0/s320/Suka-Suka.png'/>
<p>Template bernuansa hitam putih ini, bisa dibilang revolusi dari template Blog Nano Yulianto.Fitur 3 kolom di Home Page dan 2 kolom di Posting Page, auto read more, sedikit sentuhan CSS3 dan Jquery.</p>
</div>

<div class='glidecontent'>
<h3><a href='http://nanoyulianto.blogspot.com/2010/08/template-n2y-sedikit-mirip.html' target='_blank' title='Template N2y Sedikit Mirip'>Template N2y Sedikit Mirip</a></h3>
<img alt='Template N2y Sedikit Mirip' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg782LlPjKc03B_glauyiOZ-6lGokNy7vhxLtdg1ONhiR4ifn1R4x0pWIa3qCt5sE6DpQfg4UEJL13kuYEMG5x6CtDtFj_pp4ZW6CVfcVC5p2ZUF4MOrGWCFKCAPSnXXn8MFFX2FNs9cg2I/s320/Sedikit+Mirip.png'/>
<p>Template ini hanya sedikit mirip saja dengan tampilan Google Blogs. Dibilang mirip juga tidak, dibilang tidak mirip ya sedikit mirip, maklum Nano hanya pemula yang harus banyak belajar dari para senior.</p>
</div>
</div>

<div class='glidecontenttoggler' id='p-select'> = kode disamping untuk tabs

<div class='glidecontent'> = kode disamping untuk atikel

kalau ingin ditambahkan jumlah artikel slide shownya, jangan lupa ditambahkan tabsnya juga.

Ini hanya untuk referensi untuk Template N2y Spesial Jumbo, kalau ingin praktis tunggu saja templatenya keluar... :P

Semoga Bermanfaat...

Alhamdulillah

4 comments:

3/10/10

BSIBI

Nano,great job.
how to do everything at the center?
Nano Yulianto

thank u...
the css code .glidecontenttoggler and .glidecontentwrapper margin code is added ...
margin: 0 auto;
auto on margin will make the left and right balanced and float code removed or float:none;

I can not speak English,
sorry if wrong ..
20/1/11

MUX SPARROW

Keren, Bro.. btw, itu kode Jquerynya dicopas ke bagian mana di edit HTML tuh? ditunggu jawabannya.. :D
Nano Yulianto

coba lihat artikel disini bro... Penempatan kode

Tutorial Nano Yulianto

I am Blogger and Love Design

Membuat Slide Show Dan Tabs Biasa

4 comments:

Posting Komentar