×

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 nên trải nghiệm người dùng sẽ tốt hơn và chuyên nghiệp hơn.

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.

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

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


Bước 1: Thêm css sau vào trước thẻ </head>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.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;display:-moz-box;display:-ms-flexbox;display:flex;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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23000&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;border-left:0px 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ị.

Ads in post custom1

Ads in post custom2

Ads in post custom3