CSS hay javascript.
I - Mục lục cho bài viết Blogspot thêm nút quay lại mục lục:
Bước 1: Thêm CSS
]]></b:skin> và lưu lại.#light-mucluc{background-color:#f5f5f5;border:3px solid
#999;padding:10px 20px}
#mucluc_list{font-weight:700;cursor:pointer;margin:10px 0}
#mucluc_list:focus,#mucluc
li:focus,.back_muclucontent:focus{outline:none}
#mucluc_list svg{vertical-align:middle}
#mucluc li{background:transparent;cursor:pointer;margin:.2em
0 .2em 1em}
#mucluc ol li:before{left:-2em}
#mucluc li a{color:#222}
#mucluc li a:hover{color:#1e90ff}
#mucluc{display:grid}
.back_muclucontent{z-index: 99999999;display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px
auto;background:#0084ff;color:#fff;font-size:11px;padding:2px
12px;border-radius:99em;transition:all .3s}
.back_muclucontent:hover{background:#2d3436;color:#fff}
:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
Bước 2: Bài đăng
<div id="light-mucluc">
<div id="mucluc_list" onclick="if
(document.getElementById('mucluc').style.display === 'none') {
document.getElementById('mucluc').style.display = 'block'; } else {
document.getElementById('mucluc').style.display = 'none'; }"
role="button" tabindex="0">
Nội dung bài viết gồm: <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div>
<div id="mucluc">
<ol>
<li><a href="#1" title="Thuế VAT là
gì?"> Thuế VAT là gì?</a></li>
<li><a href="#2" title="Khái niệm
thuế giá trị gia tăng">Khái
niệm thuế giá trị gia tăng </a></li>
<li><a href="#3" title="Đối tượng chịu
thuế GTGT là những ai?">Đối
tượng chịu thuế GTGT là những ai? </a></li>
<li><a href="#4" title="Thuế VAT bao
nhiêu phần trăm (%)?">Thuế
VAT bao nhiêu phần trăm (%)?</a></li>
<li><a href="#5" title="Mặt hàng nào
không chịu thuế giá trị gia
tăng?">Mặt hàng nào không chịu
thuế giá trị gia tăng?</a></li>
<li><a href="#6" title="Hoàn thuế
giá trị gia tăng">Hoàn thuế giá trị gia tăng</a></li>
<li><a href="#7" title="Hoàn thuế
giá trị gia tăng là gì?"> Hoàn
thuế giá trị gia tăng là gì? </a></li>
<li><a href="#8" title="Các trường hợp
được hoàn thuế VAT">Các trường
hợp được hoàn thuế VAT </a></li>
<li><a href="#9" title="Điều kiện
hoàn thuế GTGT">Điều kiện
hoàn thuế GTGT </a></li>
</ol>
Bước 3: Gọi tên
id="1", id="2",... và cứ tuần tự cho đến hết các đầu mục tiêu đề của các bạn.<h2 id="1"...............>Tiêu đề đầu của bài viết</h2><h2 id="2"...............>Tiêu đề thứ 2 của bài viết</h2>...Bước 4: Đặt nút quay trở lại mục lục
<div class="back_muclucontent"
onclick="document.getElementById('mucluc_list').scrollIntoView(true);"
role="button" tabindex="0"> Trở lại mục lục bài viết</div>
II - Thêm nút quay lại mục lục cho cách 1 và 3:
Bước 1:
]]></b:skin> và lưu lại..back_mucluc_content {
z-index: 99999999;
float:right;
background-color:
#3578e5;
border: none;
color: #ffffff;
cursor: pointer;
display:
inline-block;
font-family:
'BenchNine', Arial, sans-serif;
font-size: 0.5em;
line-height: 1em;
margin: 15px 40px;
outline: none;
padding: 10px 15px 8px;
position: relative;
text-transform:
uppercase;
}
.back_mucluc_content:before,
.back_mucluc_content:after {
border-color:
transparent;
-webkit-transition:
all 0.25s;
transition: all
0.25s;
border-style: solid;
border-width: 0;
content:
"";
height: 24px;
position: absolute;
width: 24px;
}
.back_mucluc_content:before {
border-color:
#3578e5;
border-top-width:
2px;
left: 0px;
top: -5px;
}
.back_mucluc_content:after {
border-bottom-width:
2px;
border-color:
#3578e5;
bottom: -5px;
right: 0px;
}
.back_mucluc_content:hover,
.back_mucluc_content.hover {
background-color:
#3578e5;
}
.back_mucluc_content:hover:before,
.back_mucluc_content.hover:before,
.back_mucluc_content:hover:after,
.back_mucluc_content.hover:after {
height: 100%;
width: 100%;
}
Bước 2:
<div id="mucluc_list" onclick="if
(document.getElementById('mucluc').style.display === 'none') {
document.getElementById('mucluc').style.display = 'block'; } else {
document.getElementById('mucluc').style.display = 'none';
}"></div>
Facebook