[Code Content Tab] thêm mục lục tự động trong Blogger - Đồng hành cùng zony | Membership

Thêm mục lục trong blogger sẽ mang lại cho bạn nhiều lợi ích về SEO, thân thiện với người dùng bằng cách sử dụng điều hướng thích hợp, v.v. Ví dụ tốt nhất về Thêm TOC là Wikipedia. Họ thêm TOC để giúp người đọc chuyển từ phần này sang phần khác. Dưới đây là ảnh chụp màn hình TOC từ blog Blogger của tôi về Adswiki: Đánh giá mạng quảng cáo . lấy ví dụ bên dưới - nếu trong bài viết dài, nếu người dùng chỉ muốn kiểm tra tỷ lệ CPM của Propellerads thì nhấp vào điều hướng số 10 sau đó sẽ được điều hướng đến trang đó trực tiếp bỏ qua tất cả các nội dung khác.

Lợi ích SEO của Mục lục.

Thêm mục lục tự động trong blogger sẽ cung cấp tóm tắt nội dung của các bài đăng trên blog của bạn, Ngoài ra các liên kết TOC thân thiện với SEO & có thể dễ dàng thu thập thông tin và lập chỉ mục đến các trang của công cụ tìm kiếm với liên kết trực tiếp đi kèm, SO TOC cũng sẽ giúp bạn cải thiện SEO của bạn và ngoài ra còn tăng thứ hạng trên công cụ tìm kiếm của bạn . Dưới đây là ví dụ về cách trang của bạn trông như thế nào trong kết quả của công cụ tìm kiếm. Lưu ý: Các liên kết trong TOC là Do-follow.

Thiết lập TOC tự động cho blogger / blogspot.

Hôm nay tôi sẽ giải thích một cách dễ dàng về cách thêm mục lục tự động trong blogger ? trang web, Có 3 cách có sẵn để thêm mục lục trong blog blogger, Cách đầu tiên là chỉnh sửa html bài đăng của bạn và thêm thẻ neo để chuyển đến nội dung. Nhưng phương pháp này tốn quá nhiều thời gian vì bạn phải chỉnh sửa HTML cho mỗi bài đăng nên các blogger không đủ khả năng thực hiện theo cách này vì còn rất nhiều việc khác phải làm.

Cách thứ hai là cài đặt widget từ các trang web của bên thứ ba, nhưng tôi khuyên bạn không nên sử dụng phương pháp này vì đôi khi các trang web của bên thứ ba đóng cửa hoạt động kinh doanh của họ và sau đó widget bị hỏng và chúng ta cần bắt đầu lại từ đầu.

Phương pháp cuối cùng & Phương pháp tốt nhất để thêm TOC tự động trong blogger là thêm một số mã CSS và JavaScript vào mẫu chủ đề của blog blogger của bạn. Bằng cách thực hiện phương pháp này, bạn không cần phải chỉnh sửa HTML quá nhiều vì vậy sẽ tiết kiệm rất nhiều thời gian ở đây, Vì vậy , hãy xem cách chúng tôi sẽ thực hiện từng bước. .

Làm thế nào để Thêm mục lục tự động trong blogger?

Bước 1: Vào blogger> Chủ đề> Chỉnh sửa HTML.

Bước 2: Thêm mã CSS bên dưới trước ]]> </ b: skin>

Sau khi nhấp vào Chỉnh sửa html> nhấn CTRL + F và tìm mã này]]> </ b: skin> & Dán mã CSS bên dưới ngay trước mã như được hiển thị trong hình ảnh sau mã này.

  HTML

HTML Code:

<pre><code> .mbtTOC{border:5px solid #f7f0b8; box-shadow:1px 1px 0 #EDE396; background-color:#FFFFE0; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:oswald, arial;display: block; width: 70%;} .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} .mbtTOC ul {list-style:none;} .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .mbtTOC a{color:#0080ff;text-decoration:none;} .mbtTOC a:hover{text-decoration:underline; } .mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px; position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;} .mbtTOC button:after{content: &quot;\f0dc&quot;; font-family:FontAwesome; position:relative; left:10px; font-size:20px;} </code></pre>

Bước 3: Thêm mã JavaScript bên dưới trước khi đóng thẻ head = </head>

 <!-- Table of contents Javascript start-->

 <script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin by MyBloggerTricks.com           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>
<!-- Table of contents Javascript end -->
 

Bước 3: Bây giờ Tìm <data: post.body /> Thay thế mã này bằng mã dưới đây.

<div id='post-toc'><data:post.body/></div> 

div>
Bạn sẽ tìm thấy mã này 2 hoặc 3 lần trong html blogger của bạn, hãy thay thế mỗi mã bằng mã trên

Tất cả đã xong với trình chỉnh sửa HTML của Blogger Bây giờ, công việc tiếp theo là với trình chỉnh sửa html của Bài đăng, bạn cần thêm 2 mã ngắn này vào đầu và một mã khác ở cuối bài.

Làm cách nào để thêm TOC trong Bài đăng trên Blogger?

Bước 4 - Thêm 2 mã ngắn trong HTML của bài đăng trên Blogger.

Thêm mã bên dưới ở đầu trang đăng trước tiêu đề đầu tiên.

<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
    <br />
<ol id="mbtTOC"></ol>
</div>

Mã dưới đây ở cuối bài.

  <script>mbtTOC();</script>