[Blogger] Code mục lục bài viết (Table of Content) Tự động auto v1

  • Admin

    Code Table of Content blogspot Tự động auto


    [Blogger] Code mục lục bài viết (Table of Content) Tự động auto v1 HycvACx

    Demo online: https://blog.danganhviet.com/2018/08/binh-phong-la-gi.html

    Sử dụng mỏ neo đã phát triển khá lâu và nhiều mã nguồn đã áp dụng rất tốt, Ngoài ra mỏ neo cũng khá tốt với ae làm S.E.O. Thường thì ae làm WP thì có nhiều plugin hỗ trợ, còn với ae Blogger thì toàn làm bằng tay, Trước đây có hứa làm cho ae trong nhóm nhưng giờ mới có thời gian làm. ( Thật ra chưa đầu tư cho nó lắm nên hơi xấu, ae nào copy về làm đẹp có thể sửa lại css giúp mình cho thành ver 2 .

    Cảm ơn ae.

    Hướng dẫn thêm  Code mục lục bài viết (Table of Content) Tự động


    Để giảm tải thời gian cho ae mình gộp hết js vào luôn. ae cho thằng vào cuối code là được nhé.
    Code:

      
    <b:if cond='data:blog.pageType == "item"'>
    <script src='https://dl.dropboxusercontent.com/s/p9iu8se1qpwo0j0/jquery.toc5.js'/>

    <div class='show' id='slidebox'><div class='slidebox-title slidebox-www'><span style='float:left;margin:0 15px;'></span><span><a href='javascript:void(0);' id='slidebox-close' title='close'>×</a></span><span><a href='javascript:void(0);' id='slidebox-minimize' title='minimize'>−</a></span><span><a href='javascript:void(0);' id='slidebox-maximize' title='maximize'>+</a></span></div>
    <div class='article1'/>
    </div>

     <style>
    /* Widget table Content */
    #slidebox{background-color:#f9f9f9;border:1px solid #CCC;background:#fff;width:100%;max-width:355px;height:255px;position:fixed;overflow:hidden;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
    .slidebox-title{background:#3a5795;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
    .slidebox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
    a#slidebox-close,a#slidebox-close{margin-right:15px}
    .slidebox-title >span >h2{font-size:20px!important;font-weight:normal!important}
    .slidebox-container{border:none;float:left;width:100%;height:auto;margin:3px}
    .slidebox-container >div{border:none;margin:3px 0;padding:10px 0}
    .slidebox-container >div >span{font-size:14px}
    .show{bottom:84px}
    .hide{bottom:-205px}
    #closetoc,#toc{background-color:#eeeeee;border:1px solid #cccccc;color:#454545;cursor:pointer;float:right;font-size:15px;height:25px;margin:9px -3px 0 10px;padding:2px;width:25px}
    #closetoc:hover,#toc:hover{background-color:#F9F9F9;border:1px solid #000000;color:#000000}
    #toc{box-shadow:0 1px 2px rgba(30,25,25,0.2);-webkit-transition:all 500ms ease;-moz-transition:all 500ms ease;-ms-transition:all 500ms ease;-o-transition:all 500ms ease;transition:all 500ms ease;float:right;right:15px;top:5px;color:#454545}
    #toc:active{outline:none}
    #tocid{border-bottom:1px solid #454545;list-style-type:none;text-align:center;margin:0 0 0 -26px;padding:0}
    #IndexJS{font-size:15px;right:15px;text-align:left;text-decoration:none;color:#454545;margin:10px 0 10px 10px;padding:15px 15px 15px 25px;-webkit-transition:all 500ms ease;-moz-transition:all 500ms ease;-ms-transition:all 500ms ease;-o-transition:all 500ms ease;transition:all 500ms ease;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    #IndexJS li{white-space:normal;word-wrap:break-word}
    #IndexJS li a{color:#454545;text-decoration:none}
    #IndexJS li a:hover{text-decoration:underline}
    #closetoc,#toc{background-color:#EEE;border:1px solid #CCC;color:#454545;cursor:pointer;float:right;font-size:15px;height:25px;width:55px;margin:9px -3px 0 10px;padding:2px}
    #closetoc:hover,#toc:hover{background-color:#F9F9F9;border:1px solid #000;color:#000}
    #toc{box-shadow:0 1px 2px rgba(30,25,25,0.2);float:right;right:15px;top:5px;color:#454545;-webkit-transition:all 500s ease;-moz-transition:all 500s ease;-ms-transition:all 500s ease;-o-transition:all 500s ease;transition:all 500s ease}
    #toc:active{outline:none}
    h1:target,h2:target,h3:target,h4:target,h5:target,h6:target{-webkit-animation:2s  ease 0s normal none 1 trgt;-moz-animation:2s  ease 0s normal none 1 trgt;-ms-animation:2s  ease 0s normal none 1 trgt;-o-animation:2s  ease 0s normal none 1 trgt;animation:2s  ease 0s normal none 1 trgt;-webkit-transition:color 500ms ease 0s;-moz-transition:color 500ms ease 0s;-ms-transition:color 500ms ease 0s;-o-transition:color 500ms ease 0s;transition:color 500ms ease 0s}

      </style>

        </b:if>


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • longanit
  • Admin
    @longanit đã viết:Đặt code này ở đâu vậy bạn

    CÓ thể để ở footer nhé bạn


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • Sponsored content

Thông tin tác giả
Admin
ACP
Bài viết :
376
Points :
728
Like :
109
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
longanit
MEM
Bài viết :
2
Points :
2
Like :
0
blogger
Xem lý lịch thành viên https://www.longanit.com/
Thông tin tác giả
Admin
ACP
Bài viết :
376
Points :
728
Like :
109
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<