Disini kita akan menggunakan aplikasi Javascript, pertama-tama login blogger dashboard dan menuju ke Edit/Html lalu masukan code berikut di atas code </head> anda bisa memasukkannya langsung ke blogger atau upload ke hostingan anda.
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
}
Setelah itu menuju ke CSS letakkan code berikut ini sebelum code </b:skin>
/* Tab Slide */
.slidemenu{font: bold 10px Verdana; width: 80%}
.slidemenu ul{margin: 2px; padding: 0; float: left; /* width: 80%; width of menu*/ background: transparent}
.slidemenu ul li{display: inline;}
.slidemenu ul li a{float: left; margin: 2px 5px; color: #933; /*text color*/ padding: 5px 11px; text-decoration: none; border: 1px solid #933}
.slidemenu ul li a:hover{background:#933; color:#e0d5c2}
.slidemenu ul li a:visited{color:#e0d5c2}
.slidemenu ul li a.selected{color:#e0d5c2 !important; padding-top: 6px; /*shift text down 1px*/ padding-bottom: 4px; border: 1px solid #933; background:#933}
.tabcontentstyle{ /*style of tab content container*/ border: 0px solid gray; width: 450px; margin-bottom: 1em; padding: 10px}
.tabcontent{display:none}
@media print {.tabcontent {display:block !important;} }
Lalu simpan template. Selanjutnya yang harus anda lakukan adalah add element pada editor page. Masukkan source dibawah ini dan edit yang ditebalkan sesuai dengan kebutuhan anda.
<div style='float:left;margin:2px 5px 0px 5px; padding:0px;height:300px;'>
<div id='slidetabs' class='slidemenu'>
<ul>
<li><a href='#' class='selected' rel='tab1'>»</a></li>
<li><a href='#' rel='tab2'>»</a></li>
<li><a href='#' rel='tab3'>»</a></li>
<li><a href='#' rel='tab4'>»</a></li>
</ul>
<br style='clear: left'/>
</div>
<div style='width:400px;text-align:justify;padding: 5px; margin-bottom:1em'>
<div id='tab1' class='tabcontent'>
<a href='http://www.urltab1.com'>
<img width='300px' alt='' src='http://urlimagetab1.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab1.com'>Judul Tab 1</a></h3>
Content Tab 1
</div>
<div id='tab2' class='tabcontent'>
<a href='http://www.urltab2.com'>
<img width='300px' alt='' src='http://urlimagetab2.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab2.com'>Judul Tab 2</a></h3>
Content Tab 2
</div>
<div id='tab3' class='tabcontent'>
<a href='http://www.urltab3.com'>
<img width='300px' alt='' src='http://urlimagetab3.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab3.com'>Judul Tab 3</a></h3>
Content Tab 3
</div>
<div id='tab4' class='tabcontent'>
<a href='http://www.urltab4.com'>
<img width='300px' alt='' src='http://urlimagetab4.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab4.com'>Judul Tab 4</a></h3>
Content Tab 4
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("slidetabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(4000)
</script>
</div>
Silahkan mengexplorernya lebih lanjut. mypets.init(4000) adalah kecepatan gerak dari slide tersebut, anda bisa merubahnya.
Happy blogging
Credit: Blogger Tutorial
20 Comments for Slide Featured Post:
memberatkan loading page ga?
Wah asik banget tuh gambar :)
maap ga nyambung, mau tanya Sob, tooltipsmu keren, ada tutorialnya ga?
@lagaSEO kalo loading page, tergantung pada koneksi. penambahan .js apalagi dengan jquery lebih ringan daripada pure jquery karena file jquery yang di gunakan hanya 1 dan bisa untuk efek2 yang lain misalnya link efect dll.
@bisnis online.. iya pak itu produk gagal. susah cari infonya.. hehe
@ardhiamsyam.. jadi malu bro.. kan blogmu juga full .js
Hmm... jujur diriku kurang jago .js tapi yaa... kepaksa pake :P
he he he... tutorial yang keren kk :)
klo di wordpress gmn yah :D
wakh tutorial yang keren nih kang, kayaknya mau tak coba akh....thanks ya
salam
ulasannya menarik
aq bookmark lho link nya..
skalian daftar tuker link
Wah, mantep nih...
Tapi kayak'x memberatkan loading blog ya mas..??
Bener nggak..?? :D
B tw, lam kenal mas...
kalau gini2an aku gak mudeng blas mas,wordpress aja jarang tak explore,pemakai pasif aja
Keren sob... tutorialnya...
Master deh....
BTw Salam kenal dan salam persahabatan ya....
dulu pernah nyari2 tutorial macam gini, eh baru nemu sekarang :D *makasih*
@angga .: ya pemakaian js yang berlebihan itu terkadang membuat blog berhenti, apalagi kalo terkado brokenlink pada hosting .js
@nyengik .: monggo silakan di coba2 :D
@deni .: namanya sama, makasih ya mas
@melandri .: tukeran link dimana mas?
@zippy .: berat enggaknya kadang juga pengaruh koneksi, tapi kita bisa memaksimalkan js sehingga tidak terlalu banyak dan hanya di gunakan seperlunya.
@triyanto .: tapi kalo urusan paypal mantab..
@pandu .: master? mistar aja,, garisan..
@katakataku .: telat ya bro,, maaf hehehe..
:D selamat puyeng bwt yg ga berhosting sdri hehehe... alamat js nya jadi puwanjang kl ditempelin langsung
aku malah gak tau cara dengan wordpress
bisa dijelasin juga???
:)
@Rusa B .: pada intinya hampir semua platform itu mempunyai cara kerja yang sama kalo berhubungan ama japascripts. kalo ga salah slide ini kan ada di dynamicdrive yang notabennya bukan untuk blogger, jadi ga ada salahnya kalo ini dimasukkan ke wordpress.
mengenai caranya, saya kurang mudeng kalo wordpress. singkatnya, script CSSnya tetep pada CSS wordpress .js diupload sendiri pada hosting karena WP biasanya berhosting :D
dan untuk divnya di tambahkan pada add element html pada sidebar atau disematkan di bagian html. maaf jika penjelasannya malah bikin bingung, karena saya kurang mengerti masalah wordpress. tapi untuk blogger saya sudah mencobanya dan alhamdulillah berhasil.
dah nggk pernah ketemu di dunia maya neeh...
kmana aja lu bro...
mantap tutorialnya.
tapi aku lum bisa ngerti juga
gagal boss...
Posting Komentar
Spam is not Good for your Body :)