Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


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

Tác giả: - vào lúc:
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
8/17/2018, 16:39
#1

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>
longanit
Bài viết : 2
Points : 2
Like : 0
blogger
longanitMEM
12/12/2018, 16:15
#2
Đặt code này ở đâu vậy bạn
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
12/17/2018, 08:56
#3
longanit đã viết:
Đặt code này ở đâu vậy bạn


CÓ thể để ở footer nhé bạn
Hưng
Bài viết : 1
Points : 1
Like : 0
Punbb
HưngMEM
10/11/2019, 18:58
#4
Có mấy bài viết mình không để thẻ h nhưng nó vẫn hiện ra mặc dù bài đó không cần mục lục
có các nào khắc phục không bạn ?
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
12/3/2019, 08:21
#5
Hưng đã viết:
Có mấy bài viết mình không để thẻ h nhưng nó vẫn hiện ra mặc dù bài đó không cần mục lục
có các nào khắc phục không bạn ?


Bài viết tốt thì vẫn nên có các thẻ H. muốn ẩn nó đi thì trong bài viết dùng css vào bài viết cho nó ẩn đi thôi
Sponsored content
#6