Add Multi-Tabbed Section to Blogger. |  Στάλες στο γαλάζιο ® <link href='http://1.bp.blogspot.com/_5U5tbSy7GJ8/TQYQMAokuhI/AAAAAAAAKjA/0nVsLM_Vwdk/s72-c/Add%2BMulti%2BTabbed%2BSection%2Bto%2BBlogger.jpg' rel='https://4.bp.blogspot.com/-ucvLyH7G8ns/WNrpJ42EDOI/AAAAAAAAfwo/V5doGhzXC8QztinTcD9Jfy_YBPCPzpPOgCLcB/s640/Stales_sto_Galazio.jpg'/>

0
Add Multi Tabbed Section to Blogger,Blogger Help,Blogger Tutorials,JQuery Tutorials
Εδώ θα σας δείξουμε, πως πολύ απλά κι εύκολα, μπορείτε να ενσωματώσετε 3 gadgets σε 1, με την δυνατότητα επιλογής σε καρτέλες μενού (Tabs) για να εξοικονομήσετε χώρο στο ιστολόγιό σας.
Αφού κρατήσετε backup το template σας καλού-κακού....
θα μπείτε στο Πίνακα ελέγχου σας & μετά >>> Πρότυπο >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με με το Ctrl + F για το.....
</head>
Μόλις το βρείτε θα κάνετε επικόλληση τον παρακάτω κώδικα ακριβώς πριν από το κλείσιμο του head και κατόπιν θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ
Εδώ το css (η εμφάνισή του) του Multi-tab.
<!--Multi-Tab-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<style type='text/css'>
h2 { font-size:11px;}
.tabberlive .tabbertabhide {
display:none;
}
.tabber { font-size:11px;
}
.tabberlive {
}
ul.tabbernav
{
padding: 3px 0;
}
ul.tabbernav li
{
list-style: none;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-right: 3px;
border-bottom: none;
background: #eeedea;
text-decoration: none;
}
ul.tabbernav li a:link {}
ul.tabbernav li a:visited { }
ul.tabbernav li a:hover
{
color: #000;
background: #f8f8f4;
}
ul.tabbernav li.tabberactive a
{
background: #f8f8f4;
}
ul.tabbernav li.tabberactive a:hover
{
color: #333;
background: #f8f8f4;
}
.tabberlive .tabbertab {
padding:5px;
border-top:0;
background:#f5f5f3;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
.tabbertab p { padding-bottom:10px; line-height:140%; }
.tabbertab ul { padding:0; margin:0;}
.tabbertab ul li { padding:5px 0 6px 0; font-size:11px; }
.tabbertab ul li { background:url(http://i46.tinypic.com/334r8jl.jpg) no-repeat 0 7px; padding-left:16px; border-bottom:1px solid #eeedea;}
</style>
<!--Multi-Tab-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Σημείωση:
Σ'αυτά τα σημεία που είναι μαρκαρισμένα με χρώμα μπορείτε να αλλάξετε τους κώδικες των χρωμάτων (hexadecimal code (#------) βάζοντας κάποιους της αρεσκείας σας ή αυτούς που ταιριάζουν στα χρώματα του template σας.
Περισσότερες πληροφορίες για τα χρώματα, εδώ και εδώ

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-right: 3px;
border-bottom: none;
background: #eeedea; Το χρώμα που θα χουν οι καρτέλες σας, εδώ έχω βάλει το #333333;
text-decoration: none;
}
ul.tabbernav li a:link {}
ul.tabbernav li a:visited { }
ul.tabbernav li a:hover
{
color: #000;
background: #f8f8f4; Το χρώμα που θα χουν οι ανενεργές καρτέλες σας όταν περάσετε τον κέρσορα από πάνω τους, εδώ έχω βάλει το #666666;
}
ul.tabbernav li.tabberactive a
{
background: #f8f8f4; Το χρώμα που θα χει η κλικαρισμένη καρτέλα σας, εδώ έχω βάλει το #cc0000;
}
ul.tabbernav li.tabberactive a:hover
{
color: #333;
background: #f8f8f4; Το χρώμα που θα χει η κλικαρισμένη καρτέλα σας όταν περάσετε τον κέρσορα από πάνω τους, εδώ έχω βάλει το #990000;
}
.tabberlive .tabbertab {
padding:5px;
border-top:0;
background:#f5f5f3; Το χρώμα που θα χει όλο το παράθυρο των gadgets, εδώ έχω βάλει το #000000;
}
Εδώ το script με τις ρυθμίσεις & τις παραμέτρους.
<!--Multi-Tab-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<script type='text/javascript'>
//<![CDATA[
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}
/*----- Methods for tabberObj-----*/
tabberObj.prototype.init = function(e)
{
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {
t = this.tabs[i];
t.headingText = t.div.title;
if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}
if (!t.headingText) {
t.headingText = i + 1;
}
DOM_li = document.createElement("li");
t.li = DOM_li;
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;
if (this.addLinkId && this.linkIdFormat) {
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
DOM_a.id = aId;
}
DOM_li.appendChild(DOM_a);
DOM_ul.appendChild(DOM_li);
}
e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == 'function') {
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
if (!event) { onClickArgs.event = window.event; }
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
/*====================*/
function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
/*====================*/
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}
/*====================*/
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>
<!--Multi-Tab-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->
Τώρα κάνετε αποθήκευση στο πρότυπο σας & θα πάτε στον Πίνακα ελέγχου σας --> Διάταξη --> Προσθήκη gadget --> HTML/JavaScript
και θα κάνετε αντιγραφή & επικόλληση τον παρακάτω κώδικα μέσα στο HTML/JavaScript gadget.
<!--Multi-Tab-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<div id="tab">
<div class="tabber">
<div class="tabbertab">
<h2>...Η Ετικέτα σας για το Tab 1...</h2>
<ul>
ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB 1
</ul>
</div>
<div class="tabbertab">
<h2>...Η Ετικέτα σας για το Tab 2...</h2>
<ul>
ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB 2
</ul>
</div>
<div class="tabbertab">
<h2>...Η Ετικέτα σας για το Tab 3...</h2>
<ul>
ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB 3
</ul>
</div>
</div></div>
<!--Multi-Tab-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->
Στα σημεία ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΟΥ TAB-1,2,3
Θα προσθέσετε ότι είδους widget θέλετε εσείς.
Παράλληλα μπορείτε ν' αλλάξετε τα σημεία "Η Ετικέτα σας για το Tab 1,2 & 3" με τις ονομασίες που θέλετε ΕΣΕΙΣ ως ετικέτες.
μόνο μην βάλετε καμιά πρόταση.....γιατί δε θα χωρέσει.
Αυτάαααα.....Κι είστε έτοιμοι.
αααα ξέχασα τη...

Πηγή: Μπερναμπούκο
Μετάφραση:
Από την τοπική αποικιακή γλώσσα του Μπερναμπούκο, χωρίς επίσημο στάτους, ίσως με τους δυσκολότερους ιδιοματισμούς στον πλανήτη έρθ, αλλά, & χωρίς την δυνατότητα από διαθέσιμες υπηρεσίες online μετάφρασης, εις την Ελληνική.

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!


Δημοσίευση σχολίου Blogger

Παρακαλώ, την προσοχή σας ! ! !

* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»
:-)