Mở tab mới cho link trong tiện ích Danh sách đường liên kết của blogspot

Các mẫu blogspot/blogger hiện nay sử dụng khá nhiều tiện ích hay còn gọi là widget danh sách đường liên kết - LinkList để liên kết cho các nhãn trên menu...bên trong blog và kết nối tới các trang mạng xã hội...bên ngoài blog.

Đối với các liên kết bên trong blog thì không có vấn đề gì nhưng với các liên kết bên ngoài blog thì sẽ xẩy ra vấn đề thoát blog và liên kết không đặt được thẻ rel='noopener' và thẻ target='_blank' vấn đề này ít nhiều cũng ảnh hưởng tới seo.

Tiện ích danh sách đường liên kết này của blogger mặc định không mở được tab mới nếu không có chút can thiệp. Và việc can thiệp này cũng khá đơn giản.

Trước khi đi vào hướng dẫn chi tiết mọi người có thể xem thử tại mấy đường liên kết trong các tiện ích danh sách đường liên kết ở footer của blog sau:
DEMO

Hướng dẫn mở tab mới cho link trong tiện ích Danh sách đường liên kết blogger

Bước 1; Chỉnh sửa nội dung HTML của tiện ích LinkList
HTML của tiện ích danh sách đường liên kết linkList thường có dạng:

<b:section id='footer-widget-2' maxwidgets='2' showaddelement='true'>
                <b:widget id='LinkList2' locked='false' title='Company' type='LinkList' version='2' visible='true'>
                  <b:widget-settings>
                    <b:widget-setting name='shownum'>2</b:widget-setting>
                    <b:widget-setting name='sorting'>NONE</b:widget-setting>
                    <b:widget-setting name='text-1'>Blog</b:widget-setting>
                    <b:widget-setting name='link-1'>#</b:widget-setting>
                    <b:widget-setting name='text-0'>About</b:widget-setting>
                    <b:widget-setting name='link-0'>#</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <b:include name='widget-title'/>
                    <b:include name='content'/>
                  </b:includable>
                  <b:includable id='content'>
                    <div class='widget-content'>
                      <ul>
                        <b:loop values='data:links' var='link'>
                          <li>
                            <a expr:href='data:link.target'>
                              <span><data:link.name/></span>
                            </a>
                          </li>
                        </b:loop>
                      </ul>
                    </div>
                  </b:includable>
                </b:widget>
              </b:section>

Trong đó ta chỉ cần chỉnh sửa nội dung HTML trong toàn bộ cặp thẻ <ul>....tới...</ul> do vậy ta sẽ thay:

<ul>
                        <b:loop values='data:links' var='link'>
                          <li>
                            <a expr:href='data:link.target'>
                              <span><data:link.name/></span>
                            </a>
                          </li>
                        </b:loop>
                      </ul>

Thành

<ul class='taL'>                      
                      <b:loop values='data:links' var='link'>
                        <li>
                          <b:tag expr:data-text='data:link.name' expr:name='data:link.target != &quot;#&quot; ? &quot;a&quot; : &quot;span&quot;'>
                            <b:attr cond='data:link.target != &quot;#&quot;' expr:value='data:link.target' name='href'/>
                            <b:attr cond='data:link.target != &quot;#&quot;' expr:value='data:link.name' name='aria-label'/>
                            <b:attr cond='data:link.target != &quot;#&quot;' name='target' value='_blank'/>
                            <b:attr cond='data:link.target != &quot;#&quot;' name='rel' value='noopener'/>
                          </b:tag>
                        </li>
                      </b:loop>
                    </ul>

Bước 2: Thêm css vào phần css chung của blog.

.taL li >*::before{content:attr(data-text)}