Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

Αυτόματα tabs στη blog sidebar (SUPER BLOG HACK)


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Βλέπετε πάνω δεξιά που έχω κάτι tabs που έχω βάλει σε αυτα τα popular posts, τις ετικέτες και το αρχείο? Θέλετε να το κάνετε κι εσείς στο blog σας? Είναι αυτόματα tabs! Δείτε παρακάτω πως τα βάζουμε!!! Είναι από τα καλύτερα blog hacks ever!

Ακολουθήστε τα παρακάτω βήματα:

1. Σύνδεση στον blogger λογαριασμό σας
2. Σχεδίαση
3. Επεξεργασία html
4. Επέκταση προτύπων γραφικών στοιχείων
5. Με ctrl+F βρείτε το </head> και από πάνω του, επικολλήστε το παρακάτω:

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
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;
}
}
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};
/* IE uses a different way to access the event object */
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);
};
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>

6. Τώρα βρείτε το ]]></b:skin> και από πάνω επικολλήστε το παρακάτω:

/*-- tabbed section starts --- */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/*-- tabbed section ends---*/

7. Αποθήκευση

8. Πατήστε πάλι Επεξεργασία html (αυτη τη φορά μην τσεκάρετε το Επέκταση προτύπων γραφικών στοιχείων)

9. Τώρα πρέπει να προσθέσουμε τα Variable definitions για να κάνουμε εφικτές τις αλλαγές χρωμάτων στα tabs.


Βρείτε το σημείο που τελειώνουν τα Variable definitions (βοηθηθείτε από την παραπάνω εικόνα), (πάνω από το σύμβολο */ ) ,αντιγράψτε και επικολλήστε τον παρακάτω κώδικα :

<Variable name="tbbxbgcolor" description="Tab box Background Color"
type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color"
type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1"
type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2"
type="color" default="#5588aa" value="#5588aa">

10. Τώρα βρείτε το <div id='sidebar-wrapper'> και από κάτω του, επικολλήστε το παρακάτω:

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='9'/>
<b:section class='tabbertab' id='tab2' maxwidgets='9'/>
<b:section class='tabbertab' id='tab3' maxwidgets='9'/>
<b:section class='tabbertab' id='tab4' maxwidgets='9'/>
</div>

11. Αποθήκευση

12. Τώρα πατήστε "Στοιχεία Σελίδας" όπου θα δείτε το παρακάτω:


Μετακινήστε όποιο gadget θέλετε στις αντίστοιχες θέσεις.

13. Είστε έτοιμοι!!! (επιτέλους)
14. Φτάσατε μέχρι το 14ο βήμα? Ε τότε αφήστε ένα σχόλιο με τις εντυπώσεις σας!

Πως αλλάζω τα χρώματα?

Από τον Σχεδιαστή Προτύπων>Προηγμένη όπως φαίνεται παρακάτω:


Αυτό το καταπληκτικό blogger hack, νιώθω υποχρεώση να πω, ότι το είχα ζητήσει από τη Σοφία του bloggertrics να το αναρτήσει 'πράγμα που έκανε.

Keep Blogging!
johnpatra

Stumble
Delicious
Technorati
Twitter
Facebook

13 comments:

iks-Team.com είπε...

Johnpatra έχεις κάνει ένα λαθάκι στην αναζήτηση του κώδικα. Άλλαξε το </ head> με </head> γιατί κάποιος που δεν είναι πολύ σχετικός με html κώδικα μπορεί να μην σκεφτεί να το αλλάξει από μόνος του.

Euzonas είπε...

Παρα πολύ ωραίο και πολυ χρήσιμο...! Thanks a lot :)!

bloggertips.gr είπε...

@iks-Team.com σωστα.. το διορθωσα.. thnx

Parakato.gr είπε...

πολύ καλό το πλάτος απο που το ρυθμιζεις ομως;

bloggertips.gr είπε...

@ΚΩΣΤΑΣ ΑΝΑΓΝΩΣΤΟΠΟΥΛΟΣ το πλάτους ποιανού? δεν χρειάζεται να ρυθμίσεις κάτι, προσαρμόζεται αυτόματα.

blog είπε...

Γιάννη δε μπορώ να βρώ το κομμάτι του βήματος 10 στο κώδικά μου
υπάρχει κάτι εναλλακτικό;
ευχαριστώ

bloggertips.gr είπε...

@ΠΕΝΤΑΠΟΣΤΑΓΜΑ ναι δεν το βρίσκεις λογω του ¨ιδιαιτερου¨ προτύπου σου.
Προσπάθησε να βρεις τα ακόλουθα:

<div id='side-wrapper1'>

<b><div class='tabber'>
<b:section class='tabbertab' id='tab11' maxwidgets='9'>
<b:widget id='HTML3' locked='false' title='Search' type='HTML'/>
</b:section>
<b:section class='tabbertab' id='tab12' maxwidgets='9'>
<b:widget id='HTML14' locked='false' title='STATS' type='HTML'/>
</b:section>
</div></b>


<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='LinkList2' locked='false' title='ΚΕΡΔΟΦΟΡΑ ΛΙΝΚΣ' type='LinkList'/>
<b:widget id='LinkList3' locked='false' title='ΧΡΗΣΙΜΑ' type='LinkList'/>
<b:widget id='HTML13' locked='false' title='TOP 10 POSTS' type='HTML'/>
<b:widget id='HTML12' locked='false' title='ΓΙΑ ΟΠΟΙΟΝ ΝΙΩΘΕΙ ΥΠΟΧΡΕΩΣΗ...' type='HTML'/>
</b:section>
</div>


Ακριβώς έτσι είναι οι κωδικοί στο πρότυπό μου.
Αυτη ειναι η περιοχή που μπαίνουν τα gadgets.
Κάνε αναζήτηση το <b:widget και μετά προσπάθησε να βάλεις τον κωδικό εκεί που πρέπει.

blog είπε...

Ευχαριστώ πολύ Γιάννη. Συγχαρητήρια για τη φοβερή δουλειά σου!

Ευαγγελία Σούπη είπε...

Καλησπέρα και χρόνια πολλά!!
Έχω κι εγώ ένα πρόβλημα με το 10ο βήμα. Δε βρήσκω κανένα από τα παραπάνω που έδωσες. Υπάρχει περίπτωση να αναφέρει column και όχι sidebar?
Συγνώμη για την αφέλεια αλλά είμαι νέα στο άθλημα...

iSport 7 είπε...

εμένα μου λέει "Μη έγκυρη δήλωση μεταβλητής στην εμφάνιση σελίδας: Η μεταβλητή χρησιμοποιείται, ωστόσο δεν έχει καθοριστεί. Εισαγωγή: tbbxbgcolor".....τι να κάνω;

MEGAS7 είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
SKANDALOS είπε...

Γιάννη καλησπέρα, δεν μπορώ να βρω στο πρότυπο μου το:
div id='sidebar-wrapper'

Το πρότυπο είναι φτιαγμένο από μένα με ένα πρόγραμμα, μπορείς σε παρακαλώ να βοηθήσεις να βρω το σημείο να περάσω το κομμάτι του 10ου σημείου;

Συγχαρητήρια επίσης εκτός από τα πολύ χρήσιμα που ανεβάζεις, τα περιγράφεις με πολύ σαφή τρόπο.

SKANDALOS είπε...

Μετά από κόπο βρήκα αυτό:











Δεν ξέρω σίγουρα αν το σωστό κομμάτι όπου μπορώ να βάλω τον κώδικα του βήματος 10, προσπάθησα να τον βάλω σε διάφορα σημεία δεν τον δέχεται...αν μπορέσεις να βοηθήσεις θα ήταν υπέροχο.
Ευχαριστώ

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

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *