17 de jul de 2011

Slide tabs no Blogger


Esse slide é fácil de implementar e pode fazer uma grande diferença em seu blog, podendo linkar aí, seu emails, páginas sociais, fotos de família, do trabalho, enfim, use a criatividade.


Vá até o Modelo de seu blog, clique em Editar modelo
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 
Agora procure por:

]]></b:skin>

 

Substitua então pelo código abaixo:

/*Tab slide--------------------------------------------*/
.indentmenu{
background: #fff;
font: bold 11px Arial;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.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; /*cor do texto*/
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 a.selected{
background: #000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid #ccc;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fff;
display:none;
}
@media print {
.tabcontent {
border: 1px solid #ccc;
background: #eee;
display:block !important;
}
}
]]></b:skin>
<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>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

Salve.

Agora clique em Layout




Clique em Adicionar um Gadegt






Ao abrir, clique em  HTML/Javascript
Cole então o próximo código fazendo as modificações necessárias.



<div style="float:left;margin:0px 10px 0px 0px;padding:0;height:340px;">
<div id="pettabs" class="indentmenu">
<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">4</a></li>
<li><a href="#" rel="tab6">4</a></li>  
</ul>
<br style="clear: left"/>
</div>
  
<div style="width:300px;text-align:justify;padding:0; margin-bottom:1em">

<div id="tab1" class="tabcontent">
<a href="ENDEREÇO DE SEU LINK 1">
<img border="0" style="padding:10px" alt="TAB1" width="280" src="ENDEREÇO DE SUA IMAGEM 1?imgmax=800" height="180" title="TÍTULO 1"/></a>
<p><h3><a href="ENDEREÇO DO LINK 1">TÍTULO 1</a></h3></p>
ESCREVA ALGO SOBRE SUA IMAGEM 1 [...]
</div>
   
<div id="tab2" class="tabcontent">
<a href="ENDEREÇO DE SEU LINK 2">
<img border="0" style="padding:10px" alt="TAB2" width="280" src="ENDEREÇO DE SUA IMAGEM 2?imgmax=800" height="180" title="TÍTULO 2"/></a>
<p><h3><a href="ENDEREÇO DO LINK 2">TÍTULO 2</a></h3></p>
ESCREVA ALGO SOBRE SUA IMAGEM 2 [...]
</div> 

<div id="tab3" class="tabcontent">
<a href="ENDEREÇO DE SEU LINK 3">
<img border="0" style="padding:10px" alt="TAB3" width="280" src="ENDEREÇO DE SUA IMAGEM 3?imgmax=800" height="180" title="TÍTULO 3"/></a>
<p><h3><a href="ENDEREÇO DO LINK 3">TÍTULO 3</a></h3></p>
ESCREVA ALGO SOBRE SUA IMAGEM 3 [...]
</div>

<div id="tab4" class="tabcontent">
<a href="ENDEREÇO DE SEU LINK 4">
<img border="0" style="padding:10px" alt="TAB4" width="280" src="ENDEREÇO DE SUA IMAGEM 4?imgmax=800" height="180" title="TÍTULO 4"/></a>
<p><h3><a href="ENDEREÇO DO LINK 4">TÍTULO 4</a></h3></p>
ESCREVA ALGO SOBRE SUA IMAGEM 4 [...]
</div>

<div id="tab5" class="tabcontent">
<a href="ENDEREÇO DE SEU LINK 5">
<img border="0" style="padding:10px" alt="TAB5" width="280" src="ENDEREÇO DE SUA IMAGEM 1?imgmax=800" height="180" title="TÍTULO 5"/></a>
<p><h3><a href="ENDEREÇO DO LINK 5">TÍTULO 5</a></h3></p>
ESCREVA ALGO SOBRE SUA IMAGEM 5 [...]
</div> 

<div id="tab6" class="tabcontent">
<a href="ENDEREÇO DE SEU LINK 6">
<img border="0" style="padding:10px" alt="TAB6" width="280" src="ENDEREÇO DE SUA IMAGEM 6?imgmax=800" height="180" title="TÍTULO 6"/></a>
<p><h3><a href="ENDEREÇO DO LINK 6">TÍTULO 6</a></h3></p>
ESCREVA ALGO SOBRE SUA IMAGEM 5 [...]
</div>

</div>
</div>

  
<script type="text/javascript">     
var mypets=new ddtabcontent("pettabs")      
mypets.setpersist(true)      
mypets.setselectedClassTarget("link")      
mypets.init(2000)      
</script>

3 comentários:

  1. Gostei muito disso!mais como é que eu mudo o tempo de transição entre os slides?

    ResponderExcluir
  2. Oi o meu foi mais ou menos ta aparecendo os números mas num ta aparecendo nem a imagem e nem a mensagem

    ResponderExcluir
  3. Socorro socorro socorro preciso muuuito desse tuto

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube