Ο φίλος Χάρης από Καβάλα μου ζήτησε μέσα από το facebook να ανεβάσω και άλλα web site design posts. Aς του κάνουμε λοιπόν την χάρη και ας δούμε πως μπορούμε να δημιουργήσουμε tabs στο sidebar του Blogger . Πάμε λοιπόν!!
Καταρχήν πηγαίνεται Design > Edit HTML πάρτε οπωσδήποτε ένα backup του template σας σε περίπτωση που κάτι πάει στραβά.
Ακολούθως πάμε στο μέρος που αφορά στον CSS κώδικα. Πατήστε Cntr και F και βρείτε στο Template σας το ]]></b:skin> . Πριν από αυτό αντιγράψτε και επικολλήστε τον παρακάτω κώδικα μπλε γράμματα
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
Τώρα έχουμε να περάσουμε το jQuery Library. Προσθέστε το επόμενο script με τα μπλε γράμματα ακριβώς μετά από το ]]></b:skin>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
Εάν έχετε ήδη περάσει το jQuery library, τότε μην προσθέτετε τον κώδικα αλλά ελέγξτε εάν είναι η τελευταία έκδοση.
Ακολούθως απαιτείται ένα ακόμη script το οποίο θα δημιουργεί αυτόματα τα tabs στην sidebar. Προσθέστε λοιπόν το παρακάτω script με τα μπλε και πράσινα γράμματα πριν το </head> tag.
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>
Πρέπει να αλλάξετε τους παραπάτω κώδικες με τα πράσινα γράμματα για να λειτουργήσει το gadget.
Εξήγηση:
starttab – Είναι το αρχικό νούμερο για το επιλεγμένο widget, μετράει από το ‘0’. (step 4.1)
endtab - Είναι το τελικό νούμερο για το επιλεγμένο widget (step 4.2)
sidebarname – Είναι το sidebar’s id το οποίο πρέπει να βρείτε. (step 4.3)
endtab - Είναι το τελικό νούμερο για το επιλεγμένο widget (step 4.2)
sidebarname – Είναι το sidebar’s id το οποίο πρέπει να βρείτε. (step 4.3)
Step 4.1 and 4.2
Για να τοποθετήσετε τα πρώτα 3 gadget μέσα στο tab, το αρχικό νούμερο είναι το 0 και το τελευταίο νούμερο είναι το 2. Εάν θέλετε να ξεκινήσετε το tab από το δεύτερο sidebar gadget τότε το αρχικό νούμερο θα είναι το 1 και το τελευταίο το 3 κοκ.
Ρίξτε μια ματιά στις εικόνες παρακάτω για καλύτερη κατανόηση
Step 4.3
Τώρα πρέπει να βρούμε την σωστή sidebar id. Στα περισσότερα templates μπορούμε να βρούμε την id από την sidebar ψάχνοντας για “sidebar-wrapper” στο Design > Edit HTML tab. Για παράδειγμα η id για Layout templates είναι “sidebar”.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Ενώ για τα νέα templates είναι:
<div class='sidebar section' id='sidebar-right-1’'>
Για να βρείτε την σωστή ID μπορείτε επίσης να εγκαταστήσετε ένα εξαιρετικό για Web Developers plugin του Firefox που ονομάζεται Firebug.
Αυτό ήταν. Αποθηκεύστε το template και τελειώσαμε.
Τώρα το μόνο που έχετε να κάνετε είναι να τακτοποιήσετε όπως επιθυμείτε τα gadgets και να καθορίσετε όπως είπαμε προηγουμένως το starting tab και το ending tab.
Για παράδειγμα δείτε το 1ο επάνω δεξιά gadget του site του ΟΡΦΕΑ το οποίο εικονίζεται και παρακάτω
