Thêm bài viết liên quan bên trong nội dung bài viết trên Blogspot

Tạo hộp bài đăng có liên quan trong bài viết trên blogger là chìa khóa để thành công giảm tỷ lệ thoát và nâng cao giá trị của một trang web trên công cụ tìm kiếm của Google.

Bằng cách thêm hộp bài đăng có liên quan, khách truy cập có khả năng đọc các bài viết blog khác và tăng thời gian lưu lại trên blog. Rõ ràng, điều này rất tốt cho trang web của bạn.

Không như bài viết liên quan trong bài viết đã chia sẻ tại đây các tiêu đề bài viết có liên quan tập trung vào 1 hộp còn tại thủ thuật này các tiêu đề bài viết liên quan trải đều trên toàn bộ phần nội dung bài viết căn theo lần xuống dòng của thẻ (br/) hoặc (p) nên trải nghiệm người dùng sẽ tốt hơn và chuyên nghiệp hơn.

Như vậy blog sử dụng br hay p để xuống dòng đều sử dụng được không cần phải chỉnh sửa chỉ cần lưu ý thẻ div bao quanh thẻ <data:post.body/> có class là .post-body hay không, nếu không trùng thì thêm .post-body vào hoặc sửa .post-body trong code theo class trong mẫu.

Tập lệnh bài đăng có liên quan trong bài viết trên blogger sẽ chia sẻ dưới đây sử dụng một phần trong chương trình dự án Pure Javascript đã được phát triển bởi blog Arlina Design.

DEMO

Cách thêm nội tuyến nhiều bài đăng có liên quan bên trong nội dung bài viết blogspot

Bước 1: Thêm css sau vào trước thẻ </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
      <style>/*<![CDATA[*/
        .arldzgnMultiRelated{display:flex;background-color:#a6a6a6;box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.9);border-radius:5px;color:#0984e3;margin:5px auto;flex-wrap:nowrap;justify-content:space-between;border-left:3px solid #a6a6a6;transition:all .3s}
        .arldzgnMultiRelated .content{padding:5px 10px}
        .arldzgnMultiRelated .content .text{margin-right:5px;font-weight:700;}
        .arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}
        .arldzgnMultiRelated .icon{border-radius:0 3px 3px 0;height:auto;min-width:55px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23777'/%3E%3C/svg%3E") center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s}
        .arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3}
      /*]]>*/</style>
    </b:if>

Bước 2: Thêm code sau vào ngay sau thẻ <data:post.body/>

<b:if cond='data:view.isPost'>
                            <script>
                              /*<![CDATA[*/
                              // Multi Related Post
                                 (function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
                              /*]]>*/
                            </script>
                          
                            <b:if cond='data:post.labels'>
                              <b:loop values='data:post.labels' var='label'>
                                <b:if cond='data:view.isPost'>
                                  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
                                </b:if>
                              </b:loop>
                            </b:if>
                          
                            <script>
                              /*<![CDATA[*/
                                (function arldzgnMultiRelated() {var text = 'Xem thêm :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
                              /*]]>*/
                            </script>
                          </b:if>

Trong đó: var jumlah = 4; số 4 là số lượng bài liên quan hiển thị.