Καλησπέρα σας, εάν σας αρέσει αυτό που φαίνεται στην παρακάτω εικόνα τότε κάντε τα εξής:


Templates: ACP => Display => Templates --> General --> index_body και βρείτε τον παρακάτω κώδικα.

Κώδικας:

<div id="stats">

Αφού βρείτε τον παραπάνω κώδικα κάντε αντιγραφή και επικόλληση τον παρακάτω κώδικα αμέσως από κάτω του....

1. Αυτός ο κώδικας εμφανίζει τις καρτέλες

Κώδικας:

<div id="tabs_container">
    <ul id="stabs">
        <li class="active"><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
</div>

2.Ενώ, αυτός ενεργοποιεί τις καρτέλες.

Κώδικας:

<div id="tabs_content_container">
    <div id="tab1" class="tab_content" style="display: block;">
        <p>Content for the First tabs goes here</p>
    </div>
    <div id="tab2" class="tab_content">
        <p>Content for the Second tabs goes here</p>
    </div>
    <div id="tab3" class="tab_content">
        <p>Content for the Third tabs goes here</p>
    </div>
</div>

CSS:

Κώδικας:

#tabs_container {
    border-bottom: 1px solid #ccc;
}
#stabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
}
#stabs li {
    display: inline;
}
#stabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
#stabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#stabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#stabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
 
#tabs_content_container {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
}
.tab_content {
    display: none;
}

Πηγαίνετε στο Admin Control Panel και επιλέγετε το Modules => HTML & JAVASCRIPT => Javascript codes management Create a new javascript ---> In all the pages.
JAVASCRIPT

Κώδικας:

$(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $("#stabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#stabs li").removeClass('active');
 
        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");
 
        //  Hide all tab content
        $(".tab_content").hide();
 
        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");
 
        //  Show the selected tab content
        $(selected_tab).fadeIn();
 
        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});

Αυτό ήτανε όλο. Ελπίζω να σας άρεσε..