Làm đẹp trang bài viết blog viết content marketing sử dụng nền tảng Blogspot

1. Code tạo khung chứa code Pre, Code :

Code :

<style>
pre, code {
  display:block;
  font: 1em 'Courier New', Fixed, monospace;
  font-size : 100%;
  color: #666666;
  background : #fff 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqfbAntMFSVJZsLba41KRXfPUINldwJVsYK40Ojzuo9uLvnfRN0WHzUEJunXKgs4lnHke4gwT_AuQBwcI-ez4CZ6Mboti6z_1DSF5Y5tli9pVA916jeKh1t7WHG6f3PR6-ZOUkcJBMNxY/s1600/viewcode.jpg)
 no-repeat left top;
  overflow : auto;
  text-align:left;
  border : 1px solid #99cc66;
  padding : 0px 20px 0 30px;
  margin:1em 0 1em 0;
  line-height:17px;
}  

  </style>  
  
<pre>
Code Tạo khung chứa code
</pre>

Kết quả :

Code Tạo khung chứa code  

2. Code di chuyển nhanh đến nội dung trong bài viết :

Phần code :

<style>
/*=====================================
= CSS TẠO MỤC LỤC
=====================================*/
#toc_container{background: #edf6ff;border: 1px solid #aaa;padding: 0 10px;margin-bottom: 1em;font-size:95%;}p.toc_title,ul.toc_list {margin: 5px;padding-left: 0;}.toc_list li {list-style: none;margin-top: 0px; margin: 0!important;}#toc_container a {text-decoration: none;text-shadow: none;color: #52b043;font-weight: 555;}#toc_container a:hover {color: #d7c20d;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 20px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;} </style>
<!-- #CODE ẨN/HIỆN MỤC LỤC -->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i &lt; acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
<!-- Chèn vào vị trí cần hiển thị -->
<div id="toc_container">
<b>MỤC LỤC: Nội dung bài viết</b>&nbsp; <span class="accordion active">[Ẩn/Hiện]</span>
<br />
<div class="panel show">
<ul class="toc_list">
<li><a href="#phan-1">Phần 1: abc</a></li>
<li><a href="#phan-2">Phần 2: abc</a></li>
<li><a href="#phan-3">Phần 3: abc</a></li>
<li><a href="#phan-4">Phần 4: abc</a></li>
<li><a href="#phan-5">Phần 5: abc</a></li>
</ul>
</div>
</div>
<!-- ID cần di chuyển tương ứng liệt kê trên bảng ID Toc-container-->
<div id="phan-1"> 1. Tiêu đề 1</div>
Nội dung bài viết của phần 1 ở đây
<div id="phan-2"> 2. Tiêu đề 2</div>
Nội dung bài viết của phần 2 ở đây
<div id="phan-3"> 3. Tiêu đề 3</div>
Nội dung bài viết của phần 3 ở đây
<div id="phan-4"> 4. Tiêu đề 4</div>
Nội dung bài viết của phần 4 ở đây
<div id="phan-5"> 5. Tiêu đề 1</div> 

Kết quả :

MỤC LỤC: Nội dung bài viết  [Ẩn/Hiện]




Phần 1: abc
Phần 2: abc
Phần 3: abc
Phần 4: abc
Phần 5: abc