cara membuat Slide show dengan jquery Themes Hand Excel web


berikut saya akan share bagaimana membuat slide show yang menarik seperti website http://handexcel.site40.net/ screenshootnya seperti berikut:

langsung aja berikut step by stepnya:

1. buat folder images trs di dalam folder images buat folder lg dengan nama content_slider, buat folder lagi sejajar dengan folder images kasih nama js
2. sobat download dulu file JS-nya dan css-nya serta imagesnya::
JS download disini [download] . css-nya bisa download disini[download]. imagesnya disini [download]

Copy file js yg sudah didownload ke dalam folder js, dan tarus file css-nya sejajar dengan file html dan folder[images dan js], images taruh di folder content_slider yang ada didalam folder images.
contoh screenshot:

3. sobat buat fie html dan kasih nama slide.html, dan copy script berikut:
taruh sejajar dengan folder[images dan js]

<html>
<head><title>Slider By Hand Excel</title>
<link rel=”stylesheet” type=”text/css” href=”content_slider_style.css” />
<script type=”text/javascript” src=”js/jquery.1.3.2.min.js” ></script>
<script type=”text/javascript” src=”js/jquery-ui.min.js” ></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});
</script>
</head>
<body>
<div id=”templatemo_slider”><div id=”featured” >
<ul>
<li id=”nav-fragment-1″><a href=”#fragment-1″><img src=”images/content_slider/image1-small.jpg” alt=”Image1small” /><span>Hand Excel in Facebook</span></a></li>
<li id=”nav-fragment-2″><a href=”#fragment-2″><img src=”images/content_slider/image2-small.jpg” alt=”Image2small” /><span>Indonesian Cyber Center in Facebook</span></a></li>
<li id=”nav-fragment-3″><a href=”#fragment-3″><img src=”images/content_slider/image3-small.jpg” alt=”Image3small” /><span>Blog – XI DOC</span></a></li>
<li id=”nav-fragment-4″><a href=”#fragment-4″><img src=”images/content_slider/image4-small.jpg” alt=”Image4small” /><span>Web Blog – Sharing My Diary</span></a></li>
</ul><!– First Content –>
<div id=”fragment-1″ style=””>
<img src=”images/content_slider/image1.jpg” alt=”Image 1″ />
<div >
<h2><a href=”https://www.facebook.com/hand.excel&#8221; target=”_blank” >Hand Excel in Facebook<a></h2>
<p>You can acces Hand Excel at https://www.facebook.com/hand.excel. there you can see the full profile hand excel, or can click <a href=”https://www.facebook.com/hand.excel&#8221; target=”_blank” >read more</a></p>
</div>
</div>

<!– Second Content –>
<div id=”fragment-2″ style=””>
<img src=”images/content_slider/image2.jpg” alt=”Image 2″ />
<div >
<h2><a href=”https://www.facebook.com/groups/indocybercenter/&#8221; target=”_blank” >Indonesian Cyber Center in Facebook</a></h2>
<p>You can acces Indonesian Cyber Center at https://www.facebook.com/groups/indocybercenter/. there you can see the full profile Indonesian Cyber Center, or can click <a href=”https://www.facebook.com/groups/indocybercenter/&#8221; target=”_blank” >read more</a></p>
</div>
</div>

<!– Third Content –>
<div id=”fragment-3″ style=””>
<img src=”images/content_slider/image3.jpg” alt=”Image 3″ />
<div >
<h2><a href=”http://www.informatika11d.wordpress.com&#8221; target=”_blank” >Blog – XI DOC</a></h2>
<p>You can acces XI DOC at http://www.informatika11d.wordpress.com. there you can see the full profile XI DOC, or can click <a href=”http://www.informatika11d.wordpress.com&#8221; target=”_blank” >read more</a></p>
</div>
</div>

<!– Fourth Content –>
<div id=”fragment-4″ style=””>
<img src=”images/content_slider/image4.jpg” alt=”Image 4″ />
<div >
<h2><a href=”http://www.handexcel.co.cc&#8221; target=”_blank” >Web Blog – Sharing My Diary</a></h2>
<p>You can acces Sharing My Diary at http://www.handexcel.co.cc. there you can see the full profile Sharing My Diary, or can click <a href=”#” >read more</a></p>
</div>
</div>

</div>
</div>
</body>
</html>

4. selasai cukup simple kan..

Demonya bisa di lihat di sini [DEMO]

semoga bermanfaat..

6 Comments Add yours

  1. ucupmalang mengatakan:

    gan file yg CSS sama gambar nya tidak bisa di download gan
    thank’s

    1. informatika11d mengatakan:

      bisa gan udah tak testing… try again ja!
      good luck🙂
      thanks your visit at my website

  2. rizal mengatakan:

    ga bisa bang, maksudnya “Copy file js yg sudah didownload ke dalam folder js, dan tarus file css-nya sejajar dengan file html dan folder[images dan js], images taruh di folder content_slider yang ada didalam folder images.” lebih diperjelas🙂

  3. informatika11d mengatakan:

    kan udah ada screenshot foldernya di atas sekaligus peletakannya..
    content_slider di letakkan didalam folder images

  4. Ingeborg mengatakan:

    I think any kitchen that doesn’t have a blender is not a complete kitchen. other than this you will get your cocktails, gravy and whip cream being prepared quite easily with the help of a fine hand blender. Substantially more robust than almost every other similar-looking hand blenders, it works on the 450-watt motor that can perform 5 separate tasks.

  5. aan mengatakan:

    maaf saya ikutan,kalau untuk terhubung ke database gimana gan?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s