Header Ads

ad728
  • Breaking News

    Tạo menu nhiều tab cho blogspot

    Có nhiều kiểu menu trong thiết kế web và menu nhiều tab là một kiểu rất được ưa chuộng bởi vì nó giúp tiết kiệm không gian bố trí cho trang web. Bạn có thể dễ dàng thêm tab mới cho menu kiểu này.Menu nhiều tab có thể được dùng cho blogspot. Để tạo kiểu menu này, bạn hãy thực hiện theo các bước sau đây.
    Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.
    Đặt đoạn code dưới đây vào trước thẻ </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>
    <style type='text/css'>
    .tabberlive{
    margin:0;
    padding:5px;
    clear:both;
    background:#f8f8f8;
    border:1px solid #DDD;
    }
    .tabbernav {
    margin:0;
    padding: 3px 0;
    border-bottom: 1px solid #ddd;
    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 #DDD;
    border-bottom:none;
    background:#6c6c6c;
    text-decoration:none;
    color:#ffffff;
    }
    .tabbernav li a:hover {
    color:#6c6c6c;
    background:#ffffff;
    border:1px solid #DDD;
    text-decoration:none;
    }
    .tabbernav li.tabberactive a,
    .tabbernav li.tabberactive a:hover {
    background:#ffffff;
    color:#6c6c6c;
    border-bottom: 1px solid #ffffff;
    }
    .tabberlive .tabbertab {
    padding:5px;
    border:1px solid #DDD;
    border-top:0;
    background:#ffffff;
    }
    .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 #ddd;
    margin:0 5px;
    padding:2px 0 5px 0;
    }
    </style>

    Lưu Template.

    Bước 2. Chọn Page Elements và Nhấp chọn Add a Gadget bên phần sidebar. ChọnHTML/JavaScript rồi đặt đoạn code dưới đây vào phần Content của tiện ích.

    <div class='tabber'>

    <div class='tabbertab section' id='tab1'>
    <h2>Tiêu đề 1</h2>

    Nội dung 1 / Code 1

    </div>
    <div class='clear'></div>

    <div class='tabbertab section' id='tab2'>
    <h2 class='title'>Tiêu đề 2</h2>

    Nội dung 2 / Code 2

    </div>
    <div class='clear'></div>

    <div class='tabbertab section' id='tab3'>
    <h2>Tiêu đề 3</h2>

    Nội dung 3 / Code 3

    </div>
    <div class='clear'></div>

    <div class='tabbertab section' id='tab4'>
    <h2 class='title'>Tiêu đề 4</h2>

    Nội dung 4 / Code 4

    </div>
    <div class='clear'></div>

    </div>

    Trong đoạn code trên, bạn cần đặt tiêu đề cùng với nội dung code cho các tab. Ví dụ tab1 là tiện ích Bài viết mới nhất, tab2 là Bình luận mới nhất …

    Bạn có thể thêm tab vào theo định dạng như sau.

    <div class='tabbertab section' id='tabX'>
    <h2 class='title'>Tiêu đề X</h2>

    Nội dung X / Code X

    </div>
    <div class='clear'></div>

    3 nhận xét:

    1. design nam o dau sao minh tim khong ra

      Trả lờiXóa
    2. là phần thiết kế, vào chỉnh sửa html đó bạn

      Trả lờiXóa
    3. Bạn cho mình hỏi: phần "Nội dungx/Codex" là gì? ví dụ mình phân thành: bài mới, comment, sơ đồ - phần "bài mới" sẽ điền gì vào nội dung?
      Cảm ơn bạn.
      Blog mình là: tuyluan.blogspot.com

      Trả lờiXóa

    Post Top Ad

    Post Bottom Ad