Cách Tạo Mục Lục Accordion Đẹp Trên Blogger - Mạnh Villa

 Xin chào các bạn, chào mừng bạn đến với blog mạnh villa . Trong bài viết này mình sẽ hướng dẫn các bạn, cách thêm phần mục lục accordtion đẹp mắt trên trang web blogger. Nhiều người viết blog hơn không biết về phần accordtion này. Vì vậy, hãy làm theo phần bên dưới và tạo blogger phần mục lục accordtion đẹp mắt. này nhé

Cách Tạo Mục Lục Accordion Đẹp Trên Blogger - Mạnh Villa

nó cũng đơn giản thôi không khó khăn gì đâu cùng làm theo mình nhé

Phần Mục Lục là gì?

Phần đàn accordion giúp hiển thị một số thông tin về hiệu ứng động. điều đó có nghĩa là văn bản của bạn hiển thị cho người dùng khi nhấp vào phần đàn accordion hiển thị một số thứ ẩn với hiệu ứng động trên trang web blogger của bạn.nhé các bạn xem ví dụ ở trang blog này nhé Bấm Vào Xem

Ưu và nhược điểm của phần Accordion

bây giờ là những ưu điểm và nhược điểm của phần đàn accordion

ưu điểm

• Mang lại vẻ ngoài xinh đẹp
• Mang lại trải nghiệm người dùng tốt
• Dùng miễn phí

Nhược Điểm

Không Có

Cách thêm mục lục hiệu ứng trên blogger

Chuyển đến trang tổng quan của blogspot và mở phần chủ đề

Trước tiên, sao lưu chủ đề của bạn và nhấp vào Chỉnh sửa tùy chọn HTML và tìm  ]]></b:skin>  và dán phía trên thẻ  ]]></b:skin>  vào mã CSS bên dưới đây nhé

Bây giờ hãy lưu chủ đề của bạn.

/* Accordion by Pixabin */
.arn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.arn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.arn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.arn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.arn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.arn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.arn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.arn .cont ul, .arn .cont ol{padding-left:13px}
.arn .cont li{padding:0}
.arn .cont a{text-decoration:none;color:#08102b}
.arn .cont a:hover{text-decoration:underline}
.arn p:first-child{margin-top:0}
.arn p:last-child{margin-bottom:0} 
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
.darkMode .arn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .arn .cont, .darkMode .arn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}

Bây giờ các bạn  Sao chép mã HTML bên dưới. tiếp theo, dán những gì bạn muốn vào một vị trí trên bài viết của các bạn nhé

<!--[ Accordion by manhvilla ]-->
<div class='arn'>
  <!--[ tiêu đề 1 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
      <label class='acTtl' for='offaccor1'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_1</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ tiêu đề 2 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
      <label class='acTtl' for='offaccor2'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_2</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ tiêu đề 3 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
      <label class='acTtl' for='offaccor3'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_3</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ tiêu đề 4 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
      <label class='acTtl' for='offaccor4'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_4</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

ok vậy là xong rồi nè 

Sửa đổi tùy chỉnh

• Nếu bạn muốn bất kỳ sửa đổi màu nào để chỉnh sửa mã nguồn CSS
• Thêm Tiêu đề vào <!--[ Tiêu đề Accordion ]--> <span> Accordion_Title_4 </span> Văn bản được tô sáng.
• Thêm Nội dung bên dưới vào Phần <div class='cont'> .