2009-02-01

cara membuat slideshow untuk blogspot dengan javascript

[x] Skip this

Pujangga Bird Farm :
Bagi pecinta dan penggila Burung merpati tinggian berkelas, silahkan kunjungi www.pujanggapati.com untuk mendapatkan Tips dan info seputar burung merpati tinggian.. dan tersedia juga merpati indukan, merpati bakalan, accessories dan berbagai macam jamu tradisional untuk merpati

Kontak : Bapak Kristiono Mursalim. Hp : - Website : www.pujanggapati.com

[+/-] Detailnya..masa aktif iklan : 10 jan 2014

Haloo sobat sobat semuanya.... gimana nih kabarnya... untuk kali ini saya akan membahas " cara membuat slideshow untuk blogspot dengan javascript " , tapi sebelumnya sorry nih saya baru posting tutorial lagi setelah absen nggak bikin postingan tutorial berminggu minggu, karena apa ko saya absen..? mau tau..? iya nih kemaren saya dapet proyek bikin web berbasis blog dan baru 2 hari ini sudah mulai up, kalo mau tau nih alamatnya http://mizarmusik.com web tersebut sengaja saya buat dengan CMS wordpress karena si ouners web tersebut ingin webnya mudah di indeks oleh mesin pencari yang mana akan membawa dampak keuntungan jika ada banyak pengunjung dan berminat dengan produk/jasa yang di tawarkan oleh ouners web tersebut... Trus kenapa ko pake wordpress..? anda tau sendiri kan CMS wordpres adalah CMS yang powerful dan SEO friendly.. nah selain ouners web tersebut bisa mempromosikan bisnisnya, tetapi mereka juga bisa mendokumentasikan hal hal penting seperti even2 yang pernah dilaksanan perusahaan tersebut lewat postingan blog dan juga bisa membantu men seo kan web mereka melalui postingan postingan yang mereka dokumentasikan ( anda tau sendirikan kalo mesin pencari suka web / blog yang update! )...

Trus sekarang apa kaitannya dengan tutorial yang mau dibahas sekarang ini, iya sih nggak begitu terkait.. tapi anda bisa melihat contoh slideshow di web yang saya garap kmaren yang mana pembuatannya akan saya bahas di tutorial ini.. ( ada kan kaitannya.. hehehe )
Dan ga panjang lebar nih, langsung aja lihat contoh scriptnya dan jika berminat langsung aja dicopy lalu praktekkan kedalam halaman blog anda, dan jangan lupa mengikuti langkah2nya dibawah ini agar nggak ngawur... hehehe...
Kita lihat seksama scriptnya dibawah ini..

Langkah pertama anda copy style cssnya dibawah ini, kemudian masukkan kedalam bagian style css blog anda jika bingung silahkan cari code seperti ini
]]></b:skin> lalu taruh tepat diatasnya code tersebut...

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:red;
}
.indentmenu ul li a:visited{
color: blue;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}

Kemdian setelah anda memasng code css nya kemudian langkah selanjutnya adalah anda copy script javascript dibawah ini, lalu masukkan tepat dibawah code ]]></b:skin> ( ingat..! dibawahnya code ]]></b:skin>, kalo yang css nya ditaruh di atasnya.. pokoknya kebalikannya ) ini nih scriptnya, langsung copy aja
<script type='text/javascript'>
//<![CDATA[
//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
// -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
// -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
// -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
// -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
this.expandtab(tabref) //expand this tab
},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
if (dir=="next"){
var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
}
else if (dir=="prev"){
var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
}
if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
this.cancelautorun() //stop auto cycling of tabs (if running)
this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},

setpersist:function(bool){ //PUBLIC function to toggle persistence feature
this.enabletabpersistence=bool
},

setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"
},

getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},

urlparamselect:function(tabinterfaceid){
var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\d+)", "i")) //check for "?tabinterfaceid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/s+/, "")+"," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
},

expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i++){
var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
}
},

expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
}
},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
for (var i=0; i<this.hottabspositions.length; i++){
if (tabposition==this.hottabspositions[i]){
this.currentTabIndex=i
break
}
}
},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval
this.cycleit('next', true)
},

cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},

init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var selectedtab=-1 //Currently selected tab index (-1 meaning none)
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
this.tabs[i].tabposition=i //remember position of tab relative to its peers
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}
if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/s*,s*/))
}
if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
selectedtab=i //Selected tab index, if found
}
}
} //END for loop
if (selectedtab!=-1) //if a valid default selected tab index is found
this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
else //if no valid default selected index found
this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
} //END int() function

} //END Prototype assignment

//]]>
</script>

Kemudian untuk tahap yang terakhir, anda masukkan code dibawah ini kedalam sidebar blog anda... dengan cara menambahkan gadget baru yang pilihan html/javascript ... tapi sebelumnya ada beberapa yang musti anda ganti dan ikuti aja keterangan dibawahnya..
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;" align="center">
<div id="pettabs" class="indentmenu">
<table align="center"><tr><td align="center"><ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
<li><a href="#" rel="tab5">5</a></li>
<li><a href="#" rel="tab6">6</a></li>
</ul></td></tr></table>
<br style="clear: left"/>

</div>

<div style="width:300px;text-align:justify;padding: 5px; margin-bottom:0px">
<div id="tab1" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_784012359m.jpg" height="190"/>
</div>

<div id="tab2" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_838057322l.jpg" height="190"/>
</div>

<div id="tab3" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_808221049l.jpg" height="190"/>
</div>

<div id="tab4" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_908127135l.jpg" height="190"/>
</div>

<div id="tab5" class="tabcontent">
<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_296293459l.jpg" height="190"/>
</div>

<div id="tab6" class="tabcontent">

<img border="1" width="298" src="http://photos-333.friendster.com/e1/photos/33/30/56030333/1_272794548l.jpg" height="190"/>
</div>
</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(3000)

</script>
</div>

Keterangan :
pada script diatas ada yang perlu anda ganti yaitu alamat poto yang akan anda tampilkan.. yang kebetulan alamat poto diatas aadalah alamat poto saya... hehhe... ganti aja dengan alamat poto milik anda, dan jika perlu ubah juga ukuran width/lebar dan height/tinggi nya.. ( cari aja alamat poto ditas yang ber ekstensi .jpg .. ok )

Nah setelah selesai semua, silahkan lihat hasilnya... jika di bagian sidebar blog anda tampilan menu slideshownya kelihatan nggak rata, itu karena di bagian sidebar blog anda ada perintah <:ul> dan <li> , nah jika anda pengen tampil rata anda cari code css side bar ul dan li nya kemudian anda hapus... ( tapi pikir yang matang sebelum anda menghapusnya, tapi saya nggak akan kasih penjelasannya kenapa yang pasti menurut saya sih ga papa... hehehe ) hapus aja yang seperti ini
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

nah moga berhasil yah.. kalo masih bingung dan ragu silahkan ditanyakan aja yah... n kalo bahkan udah sukses dan mentereng silahkan kasih kabar juga yah... biar sama sama puas... hehehe...
gud luk...


Gabung di Facebook penulis

Klik Disini Untuk Baca Tutorial Lainnya

Berkomentar Sambil BerIklan Gratis Disini..?

Masukkan Email Untuk Berlangganan :

44 comments:

  1. .....mas mau tanya..apakah clipmarks itu? makasih sebelumnya

    ReplyDelete
  2. hy,, good blog, menarik banget informasinya, sangat bermanfaat untuk mencari berita berita menarik, lumayan
    lengkap, jangan lupa mampir juga ya di blog saya yang baru banyak informasi hangat dan lagi hot-hotnya sekarang,
    ada berita bisnis, pekerjaan, lowongan, dan tutorial gratis, bisa dapat puluhan juta rupiah perbulan dengan ppc, selanjutnya
    di:

    ---------------------------------
    http://indoinfocom.blogspot.com/
    panduan praktis mencari berita tentang teknologi dan cerita orang di seluruh dunia

    ReplyDelete
  3. makasih banyak infonya. aku trmasuk yg baru ttg blo ini jadi klo misalkan ada kode2 ato bahasa2 html tlg ksi tau jg dmn nempatinnya. trus aku g tau apa n yg mana yg dinamakan SIDEBAR. thnks atas semuanya.

    ReplyDelete
  4. Mas,,thanx infonya,,,!
    Tapi gimana ngecilin tab nya mas? untuk lebih jelasnya,liat aja di blog saya mas.
    www.abiluviwa.blogspot.com

    oya mas,,boleh gak saya tulis ulang artikel disini ke dalam blog saya. thanx be4

    ReplyDelete
  5. Mas salut banget ma tutorialnya yang ini.Aku langsung praktekin di blog ku :)

    ReplyDelete
  6. Om, mo nanya nieh, cara membuat slide show tapi fotonya banyak, masa tab1,2,3 dst harus muncul semuana?
    gimana solusinya cara membuat next ato prev?
    thanks om yah.....

    ReplyDelete
  7. gimana buat kaya yg melayang tu :))

    ReplyDelete
  8. Wahhh... mas... ini dia yang saya cari cari... terima kasih ya mas..
    Kunjungi blog saya juga ya.. ;)

    ReplyDelete
  9. artikelnya keren mas...
    kpan2 mampir ke blog saya...

    ReplyDelete
  10. kunjungan sahabatku,balas ya.oh ya...bagus nih infonya

    ReplyDelete
  11. keren bozz
    ada yang lebih keren lagi ga..hihihi

    ReplyDelete
  12. Saatnya dipraktekan....
    makasih bang...

    ReplyDelete
  13. wawh kebetulan saya lagi nyari info ini nih..saya kan ada blog tentang gambar2 di bali, trus rencananya mau dibuatin slideshow, lengkap dengan caption dan sedikit keterangannya, tapi kalo di klik, tar yang nongol halamannya. biasanya saya liat di blog2 itu warna backgroundnya item dan aga besar trus ada di bawah menu horizontal..apakah yang mas tulis ini adalah yang saya cari cari ?

    ReplyDelete
  14. tapi kug aq masih bingung yach cara pasang url fotonya,,,aku mau pasang dari alamat foto di facebook tapi ga bisa malah gambarnya ga muncul-muncul bisa bantukah??? sbelumnya terimakasih

    ReplyDelete
  15. Bedanya kalo kita pake jquery apa pak? Lebih bagus mana?

    ReplyDelete
  16. mau tanya nih.misalnya kalau mau buat slideshow pada website portal berita seperti kompas.com itukan ada gambar yang bergerak kemudian juga ada liknya, itu buatnya gimana ya.thanks sebelumnya

    ReplyDelete
  17. kodenya apa gak ada yg lebih pendek lagi gan? biar simple gitu maksudnya

    ReplyDelete
  18. wihhh bagus gan...

    apalagi form comment'a
    gmn nih buat yang kaya gini y??
    hmmm,,, harus banyak semedi kayanya...

    ReplyDelete
  19. makasih gan membantuuuuu banget hehe,,

    barang kali ada yang butuh jasa google adsense super murah +cepat
    dateng kesini gan http://goo.gl/5gJ81

    ReplyDelete
  20. mas...klo buat slide yg bergerak itu bgimana yah?

    ReplyDelete
  21. Makasih admin..ilmu ini sudah di praktekan di situs saya walaupun engine nya pake wordpress tapi tetep bisa berfungsi... saya melakukan beberapa perubahan pada tampilannya... silahkan lihat hasilnya di blog saya...

    salam,

    ReplyDelete
  22. kalo untuk menghilangkan angkanya gmn y kang?

    ReplyDelete
  23. mantap bgt info nya sob, tapi setelah d coba knapa gmbar nya ga bisa lbih dari 6 yah ?
    saya coba masukkan lebih 10 gambar, pas gambar ke 7 malah ngulang gmbar pertama sob, gambar 7-10 nya ga kluar..,
    mohon solusi nya :)

    terimakasih

    ReplyDelete
  24. Work 100%, Jazakallah atas infonya

    www.ngajiyok.co.cc

    ReplyDelete
  25. Mantap gan, mampirlah di gubuk saya

    ReplyDelete
  26. gan, saya sudah ikuti petunjuk sampean, tapi pada saat saya menyimpan ada sesuatu yang aneh muncul. berikut :

    Peringatan: Template baru Anda tidak berisi widget berikut:

    PageList1

    Ingin mempertahankan widget ini di blog Anda atau menghapusnya?
    Penghapusan widget tidak dapat diurungkan.

    ReplyDelete
  27. ada cara yang lebih praktis dan mudah gak?

    ReplyDelete
  28. ada cara yang lebih mudah tidak ya, karena bingung mengimplementasikannya :((

    ReplyDelete
  29. thanks infonya mau coba tak pasang :-D pengen buat galeri

    ReplyDelete
  30. kalau bikin slideshow tapi dimasukkan pada 1 artikel bisa gak? kayaknya asyik tuh kalau bisa :)

    ReplyDelete
  31. bisa lihat demo nya gan? kayaknya mantap tuh

    ReplyDelete
  32. gambar slideshownya ga ada tombol next dan prev nya ya mbak?

    Kontraktor bangunan sipil dan arsitektur => Pt.Gemilang

    ReplyDelete

Berkomentar sambil beriklan ( iklan baris ), mau ga..?
So.. jadilah orang PERTAMA yang berkomentar, blog anda akan di lihat banyak orang.....
Tapi perlu diingat,.. DILARANG SPAM / KOMENTAR SAMPAH, bercanda / guyonan oke.. spam no...!
Spam / Sampah akan saya hapus tanpa ampun...

 
Close [X] .
dua langkah bikin widget recent post generator blog anda
mau bikin kayak gini, caranya klik disini