Computer Articles And Tutorial

Simple Slideshow With jQuery




Desain web atau blog akan terlihat menarik dan atraktif serta interaktif  dengan adanya sebuah konten slide di dalamnya , akan tetapi kadangkala sebuah slide akan membuat loading web/blog akan menjadi lambat serta pembuatannya yang sangat ribet  dan memakan banyak space. 
http://titis-aribowo.blogspot.com/2012/10/membuat-slideshow-konten-fitur-dengan.html

setelah beberapa kali analisis dan uji coba dari sejumlah konten slide yang ada didapatlah slide yang ringan dengan script yang simple tetapi tetap mempertahankan unsur atraktif dan interaktifnya serta sangat mudah untuk membuatnya tidak sesulit seperti yang dibayangkan selama ini. adalah featured content slider atau  kurang lebih slideshow dengan konten fitur pilihan navigasi disampingnya, slide ini banyak dipakai pada template yang mengusung tema atraktif interaktif…berikut adalah cara membuat atau memasang slideshow konten fitur  pada web atau blog anda 

Contoh Penerapan slideshow konten fitur  : Les Gitar Malang

Ada tiga komponen utama dari slide konten fitur yaitu
  • CSS untuk mengatur desaint dari slide seperti ukuran, warna, border dan lain sebagainya
  • Javascript untuk mengatur pergerakan dari atau tingkah laku slide
  • HTML untuk mengatur perlakuan terhadap slide seperti memasang link postingan, url gambar,navigasi dan sebagainya
  •  Berikut adalah file CSS untuk slide konten fitur, jika digunakan dalam blog salin dan letakkan di atas ]]></b:skin>  pada template blog
#featured{
                width:400px;
                padding-right:250px;
                position:relative;
                border:5px solid #ccc;
                height:250px;
                background:#fff;
}
#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 img{
                float:left; margin:2px 5px;
                background:#fff;
                padding:2px;
                border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
                font-size:11px; font-family:Verdana;
                line-height:18px;
}
#featured li.ui-tabs-nav-item a{
                display:block;
                height:60px;
                color:#333;  background:#fff;
                line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
                background:#f2f2f2;
}
#featured li.ui-tabs-selected{
                background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
                background:#ccc;
}
#featured .ui-tabs-panel{
                width:400px; height:250px;
                background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
                position:absolute;
                top:180px; left:0;
                height:70px;
                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;
}
#featured .ui-tabs-hide{
                display:none;
}
  • Selanjutnya adalah pasang  file Javascript berikut tepat di bawah kode  <head> pada web atau template blog anda 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
  • Selanjutnya pasang kode Javascript berikut  tepat di atas kode </head> 
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true); });
</script>
  • Simpan template jika digunakan dalam template blog
  • Selanjutnya adalah file HTMLnya, salin dan pasang pada body web anda  dan jika pada blog   gunakan widget di atas postingan blog  dengan memilih (html/javascript)

  • jika template blog belum disertai tempat widget di atas postingan buat tempat widget terlebih dahulu.
<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="images/image1-small.jpg" alt="" /><span>Judul Postingan1</span></a></li>
                   <li class="ui-tabs-nav-item" id="nav-fragment2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Judul Postingan2</span></a></li>
                   <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Judul Postingan3</span></a></li>
                    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Judul Postingan4</span></a></li>
           </ul>
                    <!-- First Content -->
                    <div id="fragment-1" class="ui-tabs-panel" style="">
                            <img src="images/image1.jpg" alt="" />
                            <div class="info" >
                            <h2><a href="#" >judul postingan1</a></h2>
                            <p>deskripsi postingan2...<a href="#" >read more</a></p>
                            </div>
                     </div>
                    <!-- Second Content -->
                    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
                            <img src="images/image1-small.jpg" alt="" />
                            <div class="info" >
                            <h2><a href="#" >judul postingan2</a></h2>
                            <p>deskripsi postingan2....<a href="#" >read more</a></p>
                             </div>
                    </div>
                    <!-- Third Content -->
                    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
                            <img src="images/image1-small.jpg" alt="" />
                            <div class="info" >
                            <h2><a href="#" >judul postingan3</a></h2>
                            <p>ldeskripsi postingan3<a href="#" >read more</a></p>
                            </div>
                    </div>
                    <!-- Fourth Content -->
                    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
                            <img src="images/image1-small.jpg" alt="" />
                            <div class="info" >
                            <h2><a href="#" >judul postingan4</a></h2>
                            <p>deskripsi postingan4<a href="#" >read more</a></p>
                            </div>
                    </div>
                    </div>
       </div>

  • Langkah terakhir isi keterangan yang berwarna merah dan biru sesuai dengan link url gambar, judul dan deskripsi serta link dari postingan blog anda.
  • untuk menyesuaikan ukuran warna silahkan edit code CSSnya..
Selamat Mencoba......




Responses

3 Respones to "Simple Slideshow With jQuery "

Zony Pras mengatakan...

Iso dicoba iki..


1 November 2012 19.25
Akumaru.com mengatakan...

Sudah bagus banget nih gan sebenarnya..
tapi saya pengennya itu slideshow cuman tampil di homepage aja bisa gak?
saya tunggu jawabannya di blog saya yah gan :)


23 September 2013 09.34

Poskan Komentar