Untuk melihat contoh atau hasil dari Slide show tersebut dapat dilihat disni
* Login ke Blogger.com
* Kemudian Tata Letak
* Pilih Edit HTML
* Centang Expand Widget
* Copas kode berikut diatas kode "]]></b:skin>"
# .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:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.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;
}
}
Selanjutnya cari kode </head>
Letakan java script berikut tepat diatas kode tersebut
<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>
Jika selesai Save template.
lanjutkan dengan masuk ke Elemen laman
klik Add gadget
Copy paste Script HTML berikut.
<div style="float:left;margin:0px 10px 0px 0px;padding:5px;height:330px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html" class="selected" rel="tab1">1</a></li>
<li><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html" rel="tab2">2</a></li>
<li><a href="
http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html
" rel="tab3">3</a></li>
<li><a href="
http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html
" rel="tab4">4</a></li>
<li><a href="
http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html
" rel="tab5">5</a></li>
</ul>
<br style="clear: left" />
</div>
<div style="width:440px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://i829.photobucket.com/albums/zz211/belajarphotoshop/Puzzle.jpg" height="152" title="Manipulasi Puzzle" /></a>
<p><h3><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">Manipulasi Puzzle</a></h3></p>
Tutorial photoshop kali ini saya akan membahas tentang manipulasi puzzle. Klo kalian pernah mengunjungi salah satu situs edit foto seperti photofunia.com, dll. mungkin kalian akan melihat <b>foto</b> dalam bentuk puzzle. Namun taukah kalian cara membuatnya..??Manipulasi berikut merupakan suatu manipulasi photoshop dengan membentuk photo menjadi bagian-bagian puzzle…
</div>
<div id="tab2" class="tabcontent">
<a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://i829.photobucket.com/albums/zz211/belajarphotoshop/Puzzle.jpg" height="152" title="Manipulasi Foto Fantasy" /></a>
<p><h3><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">Manipulasi Foto fantasi</a></h3></p>
digital imaging atau yang lebih sering dikenal dengan teknik tempel menempel merupakan teknik editing <b>foto</b> yang tidak terlalu sulit untuk membuatnya. konsepnya hanyalah fantasy ataupun hayalan yang kita keluarkan dalam benak kita. teknik ini pada dasarnya hanyalah teknik dari penggabungan dari beberapa gambar yang ada kemudian dijadikan kedalam satu gambar....<br />
<a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html" title="belajar photoshop | tutorial photoshop" target="blank"><span style="color: red;">Baca Lebih Lengkap...</span></a>
</div>
<div id="tab3" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/trik-memasang-back-to-top.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Vg80ntF094F8ieRgZ5KfC1SyOc8YaUg3iyCmcoTQZE5_-NeV-F7qltUJeGGEUzKZyLFPj93Ew42EQyy6QYP1qXcDEW4UrF5PLu4nkIjiDzoSvDO_e9wWjGzZ-fv5zoL7BusIf4MR2w/s320/images.jpg" height="152" /></a>
<p><h3><a href="http://tipspack.blogspot.com/2009/06/trik-memasang-back-to-top.html">Trik Memasang Back to Top </a></h3></p>
rik ini dinamakan: "Back to Top", karena fungsinya adalah membawa anda menuju bagian paling atas blog anda, dengan sekali "click". Widget ini sangat berguna bagi kenyamanan pengunjung blog anda. Terutama jika blog anda memiliki halaman yang panjang. Baca selengkapnya...
</div>
<div id="tab4" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/trik-memasang-wallpaper-pada-flash-disc.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmexPsvH9KeJ4hPW8mV-1PxdVoF07gBMFrUGTlnqtBtN8Kf1p51EizQ4pKFLOocQ5wJBLaRfKnOmj6GDyhFtLOih096XNKGzBIPx-NwwVPlTuubfMnf5FsnkJHkjRfm5lMgwxb52Fxw/s320/24l6lck.jpg" height="152" /></a>
<p><h3><a href="http://tipspack.blogspot.com/2009/06/trik-memasang-wallpaper-pada-flash-disc.html">Trik Memasang Wallpaper Pada Flash Disc & Folder</a></h3></p>
Hari gini punya flash Disc ga pake wallpaper? Hallow, kemana aja? Terus begitu buka folder di computer, eh, background nya masih putih polos... Ya! kalau anda masih punya flash disc yang polos dan folder yang membosankan, Silahkan anda lanjutkan membaca artikel ini...
</div>
<div id="tab5" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/tips-hosting-file-javascript-sendiri.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjreKbc3qICoxQgnF1etZTi1yRYyzvrfwRHa3s7BkfILDP4drh1cyKxZubn1V_vgIrOZnIOzbHzRgL0a2J-BGEho95w5WRAWrp-EIrtmJH_OOnjsvtC0DDf3pQDQbrzM3ebVB0LrruVFQ/s320/java.jpg" height="152" /></a>
<p><h3><a href="http://tipspack.blogspot.com/2009/06/tips-hosting-file-javascript-sendiri.html">Tips Hosting File Javascript Sendiri</a></h3></p>
Jika anda seorang blogger yang akrab dengan HTML/Javascript editing, anda wajib memiliki account untuk hosting Javacript anda sendiri. Kenapa? Karena setiap Website yang menyediakan jasa hosting memiliki bandwidth yang terbatas. Bandwidht adalah: batas maximum transfer data dari satu file host dalam waktu 24 jam. Baca selengkapnya...
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(10000)
</script></div>
Ket.
- Sesuaikan ukuran slide show dengan template blog kalian
- Teks berwarna merah dengan link judul blog kalian.
- Teks berwarna kuning dengan link judul blog kalian sesuai dengan link diatas
- Teks berwarna puple dengan link gambar kalian
- Teks berwarna pink dengan judul blog kalian
- Teks berwarna hijau berisi depkripsi dari blog kalian
Tutorial kali ini membahas tentang bagai mana cara membuat slide show, kalian pasti pernah mendengarnya, namun bagaimana cara membuatnya akan saya share -kan disni.
Untuk melihat contoh atau hasil dari Slide show tersebut dapat dilihat disni
# .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:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.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;
}
}
Untuk melihat contoh atau hasil dari Slide show tersebut dapat dilihat disni
* Login ke Blogger.com
* Kemudian Tata Letak
* Pilih Edit HTML
* Centang Expand Widget
* Copas kode berikut diatas kode "]]></b:skin>"
# .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:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.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;
}
}
Selanjutnya cari kode </head>
Letakan java script berikut tepat diatas kode tersebut
<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>
Jika selesai Save template.
lanjutkan dengan masuk ke Elemen laman
klik Add gadget
Copy paste Script HTML berikut.
<div style="float:left;margin:0px 10px 0px 0px;padding:5px;height:330px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html" class="selected" rel="tab1">1</a></li>
<li><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html" rel="tab2">2</a></li>
<li><a href="
http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html
" rel="tab3">3</a></li>
<li><a href="
http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html
" rel="tab4">4</a></li>
<li><a href="
http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html
" rel="tab5">5</a></li>
</ul>
<br style="clear: left" />
</div>
<div style="width:440px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://i829.photobucket.com/albums/zz211/belajarphotoshop/Puzzle.jpg" height="152" title="Manipulasi Puzzle" /></a>
<p><h3><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">Manipulasi Puzzle</a></h3></p>
Tutorial photoshop kali ini saya akan membahas tentang manipulasi puzzle. Klo kalian pernah mengunjungi salah satu situs edit foto seperti photofunia.com, dll. mungkin kalian akan melihat <b>foto</b> dalam bentuk puzzle. Namun taukah kalian cara membuatnya..??Manipulasi berikut merupakan suatu manipulasi photoshop dengan membentuk photo menjadi bagian-bagian puzzle…
</div>
<div id="tab2" class="tabcontent">
<a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="http://i829.photobucket.com/albums/zz211/belajarphotoshop/Puzzle.jpg" height="152" title="Manipulasi Foto Fantasy" /></a>
<p><h3><a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html">Manipulasi Foto fantasi</a></h3></p>
digital imaging atau yang lebih sering dikenal dengan teknik tempel menempel merupakan teknik editing <b>foto</b> yang tidak terlalu sulit untuk membuatnya. konsepnya hanyalah fantasy ataupun hayalan yang kita keluarkan dalam benak kita. teknik ini pada dasarnya hanyalah teknik dari penggabungan dari beberapa gambar yang ada kemudian dijadikan kedalam satu gambar....<br />
<a href="http://belajar-photoshopcs.blogspot.com/2010/04/manipulasi-puzzle.html" title="belajar photoshop | tutorial photoshop" target="blank"><span style="color: red;">Baca Lebih Lengkap...</span></a>
</div>
<div id="tab3" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/trik-memasang-back-to-top.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Vg80ntF094F8ieRgZ5KfC1SyOc8YaUg3iyCmcoTQZE5_-NeV-F7qltUJeGGEUzKZyLFPj93Ew42EQyy6QYP1qXcDEW4UrF5PLu4nkIjiDzoSvDO_e9wWjGzZ-fv5zoL7BusIf4MR2w/s320/images.jpg" height="152" /></a>
<p><h3><a href="http://tipspack.blogspot.com/2009/06/trik-memasang-back-to-top.html">Trik Memasang Back to Top </a></h3></p>
rik ini dinamakan: "Back to Top", karena fungsinya adalah membawa anda menuju bagian paling atas blog anda, dengan sekali "click". Widget ini sangat berguna bagi kenyamanan pengunjung blog anda. Terutama jika blog anda memiliki halaman yang panjang. Baca selengkapnya...
</div>
<div id="tab4" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/trik-memasang-wallpaper-pada-flash-disc.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmexPsvH9KeJ4hPW8mV-1PxdVoF07gBMFrUGTlnqtBtN8Kf1p51EizQ4pKFLOocQ5wJBLaRfKnOmj6GDyhFtLOih096XNKGzBIPx-NwwVPlTuubfMnf5FsnkJHkjRfm5lMgwxb52Fxw/s320/24l6lck.jpg" height="152" /></a>
<p><h3><a href="http://tipspack.blogspot.com/2009/06/trik-memasang-wallpaper-pada-flash-disc.html">Trik Memasang Wallpaper Pada Flash Disc & Folder</a></h3></p>
Hari gini punya flash Disc ga pake wallpaper? Hallow, kemana aja? Terus begitu buka folder di computer, eh, background nya masih putih polos... Ya! kalau anda masih punya flash disc yang polos dan folder yang membosankan, Silahkan anda lanjutkan membaca artikel ini...
</div>
<div id="tab5" class="tabcontent">
<a href="http://tipspack.blogspot.com/2009/06/tips-hosting-file-javascript-sendiri.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjreKbc3qICoxQgnF1etZTi1yRYyzvrfwRHa3s7BkfILDP4drh1cyKxZubn1V_vgIrOZnIOzbHzRgL0a2J-BGEho95w5WRAWrp-EIrtmJH_OOnjsvtC0DDf3pQDQbrzM3ebVB0LrruVFQ/s320/java.jpg" height="152" /></a>
<p><h3><a href="http://tipspack.blogspot.com/2009/06/tips-hosting-file-javascript-sendiri.html">Tips Hosting File Javascript Sendiri</a></h3></p>
Jika anda seorang blogger yang akrab dengan HTML/Javascript editing, anda wajib memiliki account untuk hosting Javacript anda sendiri. Kenapa? Karena setiap Website yang menyediakan jasa hosting memiliki bandwidth yang terbatas. Bandwidht adalah: batas maximum transfer data dari satu file host dalam waktu 24 jam. Baca selengkapnya...
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(10000)
</script></div>
Ket.
- Sesuaikan ukuran slide show dengan template blog kalian
- Teks berwarna merah dengan link judul blog kalian.
- Teks berwarna kuning dengan link judul blog kalian sesuai dengan link diatas
- Teks berwarna puple dengan link gambar kalian
- Teks berwarna pink dengan judul blog kalian
- Teks berwarna hijau berisi depkripsi dari blog kalian
Selamat mencoba
Selamat mencoba
0 Response to "Cara Membuat Slide show"
Post a Comment