Resource icon

Hướng dẫn tạo mục lục bài viết (Table of Content) tự động cho Blogspot

Share Code Table of Content blogspot Tự động

[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 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é.


HTML:
<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>
Author
Dang Van Kien
Views
3
First release
Last update
Rating
0.00 star(s) 0 ratings

More tutorial from Dang Van Kien

Top