Ram Zero Freedom: Slide Show 4

ini Slide Show Maco. Hitam, mengesankan karakter yang strong and simplicity. Cara membuat Slide Show ini saya peroleh dari dynamicdrive.com, sebagai pemegang hak cipta pada awalnya. Saya memang mengutak-utik hingga tampilannya jauh berbeda. A Jika cara memasang slide show ini Anda ikuti dengan seksama, gak bakalan gagal. Kalau gagal, mungkin karena telah terjadi conflict dengan kode jquery/javascript sebelumnya. Jadi, terserah Anda, pertimbangkan mana yang lebih penting, yang kurang penting dihapus saja.

Demo Slider Show

TITLE POST 2

Area teks 02, resume atau ringkasan.

Cara

memasang Slide Show di template

1. Masuk ke Akun/dashboard Anda
2. Pilih Template, lalu Edit HTML.
3. Backup dulu untuk menjaga kemungkinan buruk.
4. Temukan kode seperti ini: ]]> </skin>
5. Copy kode text-area 01 di bawah ini. Klik "Copy-all" untuk memastikan tidak ada text yang tercecer. Kenudian, paste-kan sebelum kode ]]> </skin>

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

6. Jika sudah ... Save/Simpan.
7. Masuk ke: Tata Letak
8. Klik: tulisan Add New Widget
9. Pilih HTML/Javascript, kemudian letakkan kode berikut:

<div style="background: #000;color: yellow;float: left;margin: 
0px;padding: 10px;
height: 310px;width: 540px;">

<div class="sebizaku" id="pettabs">
<ul>
<li><a class="selected" href="#" 
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>
</ul>
</div>
<div class="tabcontent" id="tab1">
<a href="ALAMAT POSTING"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Kr-d7cSHQwzvxL3SlVKdWTge5qGtMQGnQ5qvmtnJnfI6NkSMOqP0qzNPpTdifI3a2eMGU1QtibSsz-HPy6x4FXT35jdWzjaXgNqdoPTXMG6fB-MdB6PgQdd02hwi9_R8qvek0iDCPWc/s1600/mobil01.jpg"
 />
<div class="title">
<b>TITLE POST 
1</b></div>
</a>
Area teks 01, resume atau ringkasan.
</div>
<div class="tabcontent" id="tab2">
<a href="ALAMAT POSTING"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU3itWCpxEXE_nGN81Sp4Ub3hJyJNw3Dz1vCRd1vtg1HUA2i2dI0j5LGHz4y14JWAxk3xofo6sWF1Uswh6S8bl8SJSzy-RyHDyaZGfxDgI1oWYIemsleB4teogp7MK0YqR94lmd___PQ/s1600/mobil02.jpg"
 />
<div class="title">
<b>TITLE POST 
2</b></div>
</a>
Area teks 02, resume atau ringkasan.
</div>
<div class="tabcontent" id="tab3">
<a href="ALAMAT POSTING"><img  
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObTyv6MP4JVffhbPdE8ULs_6VYYA5uWCQH1GmjZ7Ty_zG3ntTs8c6B978CqbxWnmNr4Zqo3foDtPrQKxHzhX7NTrhbIJ4d0sYpB_sX74lgQ6wE0Tm6Dyl9QPAlkJUx4cEhHlJVW-J0vw/s1600/mobil03.jpg"
 />
<div class="title">
<b>TITLE POST 
3</b></div>
</a>
Area teks 03, resume atau ringkasan.
</div>
<div class="tabcontent" id="tab4">
<a href="ALAMAT POSTING"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IQtU1SAMesbNKW_C5WkqoYmsRp5mocKarSzmLG_X_E56ZQazPnI0x4tN2ecRTQKqxHIAa80RfLDLIhRkoDr5-PI3pDF1sV8zmb6h763fuZh0vU5zh4v8PknzlXYgcUYxm-VH3x7RA6g/s1600/mobil04.jpg"
 />
<div class="title">
<b>TITLE POST 
4</b></div>
</a>
Area teks 04, resume atau ringkasan.
</div>
<br />
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(3000)
</script>
</div>

<br />
<br />

Sebagaimana biasa, jika memasang Slider Show sudah benar dapat lakukan Ubah Suai

Yang perlu diubah hanyalah:
1. Alamat URL Posting Anda, a herf:"..." dsb
2. Alamat URL gambar/image, img src" http..." dsb
3. Jika perlu mengubah ukuran/dimensi slide, cukup dengan: width dan height.

Kusertakan keterangan pada bagian-bagian yang perlu diubah, supaya Anda lebih memperoleh kemudahan. Success4U.

Tab Menu E

anime

Rabu, 23 Januari 2013

Slide Show 4

Tidak ada komentar:

Posting Komentar

learn photoshop

read post