Taburi (file) in bara laterala Blogger

O metoda simpla de a reduce spatiul ocupat de gadget-urile din bara laterala a blogului dvs. o reprezinta “meniul cu file” (tabbed navigation), o solutie care, pe langa faptul ca ofera o nota de profesionalism siteului dvs., permite vizitatorilor sa gaseasca intr-un sigur loc si implit mai usor informatiile care ii intereseaza.

Un exemplu al acestui meniu il gasiti in bara laterala a acestui blog. Meniul aduna intr-o singura zona informatii referitoare la ultimele articole publicate, cele mai recente comentarii precum si o sectiune in care puteti gasi toate categoriile blogului.

Iata care sunt pasii pe care trebuie sa-i urmati pentru a introduce acest tip de meniu in blogurile create pe platforma Blogger:

PASUL1: Salvati tema blogului. Aceasta operatiune este foarte importanta intrucat veti opera modificari in codul temei.

 

PASUL2: Copiati codul de mai jos deasupra caracterelor ]]> din sablonul blogului dvs. (pentru a gasi mai usor caracterele apasati  ctrl+f si introduceti ]]> )

/*==========================================================*/
/*==================== SIDE TABBER =========================*/
/*==========================================================*/
#tabsidebar-wrapper{
width: 320px;
/* This will manage the width of the tab content. Usually this be smae as your sidebar*/
float: left;
margin: 0px 0px 15px 10px;
border: 1px none #E6F0F2;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em 7px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#00638d;}
ul.tabbernav li a:visited { color: #00638d;}
ul.tabbernav li a:hover{color:#45A100; background: #E6F0F2; border-color: #ccc;}
ul.tabbernav li.tabberactive a{
background-color: #E6F0F2;
color: #45A100;
border-bottom: 1px solid #E6F0F2;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #E6F0F2;
border-bottom: 1px solid #E6F0F2;
}
.tabberlive .tabbertab {
background: #E6F0F2;
padding:5px;
border:1px solid #ccc;
border-top:0;
}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

Acesta este codul CSS ce determina aspectul meniului: culoare, font, margine, dimensiuni, etc

 

PASUL3: Copiati codul de mai jos dedesubtul caracterelelor  ]]>

<script src='http://holytrinityde.googlepages.com/tabber.js' type='text/javascript'/>

 

PASUL4: Copiati codul pe care il gasiti mai jos in zona barei laterale a temei blogului. In majoritatea temelor Blogger zona care defineste bara laterala incepe cu <div id='sidebar'>. Identificati aceasta bucata de cod in sablonul dvs.

Copiati codul de mai jos dedesubtul <div id='sidebar'>.

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' preferred='yes' showaddelement='yes'>
<b:widget id='Feed1991' locked='false' title='Recent Posts Articles' type='Feed'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' preferred='yes' showaddelement='yes'>
<b:widget id='Feed2112' locked='false' title='Recent Comments' type='Feed'/>
</b:section>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' preferred='yes' showaddelement='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
</div>
</div>

Ati finalizat editarea codului temei. Apasati PREVIZUALIZATI pentru a fi siguri ca nu ati facut nici o greaseala. Daca apare o ferestra noua in care blogul dvs. este afisat corect, apasati SALVATI SABLON.

 

PASUL5: Acum trebuie sa adaugati continut in cele trei file pe care le-ati creat. Dati click pe ELEMENTE DE PAGINA si cautati zona din bara laterala unde sunt afisate cele 3 taburi. In mod normal ar trebui sa apara ceva asemanator cu imaginea de mai jos:

Dati click pe editati si introduceti adresa feed-ului pentru Articole Recente. Efectuati aceeasi operatiune dupa ce dati click pe fila 2. De obicei adresele feed-urilor pentru Blogger arata asa:

Articole Recente : http://NUMELEBLOGULUI.blogpost.com/feeds/posts/default
Comentarii Recente : http://NUMELEBLOGULUI.blogpost.com/feeds/comments/default

Apasati SALVATI si mergeti la blogul dvs. In mod normal in taburile (filele) pe care le-ati creat ar trebui sa apara in bara laterala a blogului.

Culorile si dimensiunea meniului vor fi diferite fata de cele care apar pe blogul meu. Ramane ca dvs. sa modificati culorile in asa fel incat sa se potriveasca cu tema bloguui dvs. In cazul in care aveti nevoie de ajutor in acest sens nu ezitati sa ma contactati prin intermediul comentariilor.

>Ti-a placut acest articol? Aboneaza-te la feed-ul acestui blog!

What next?

Articole Similare