Thêm bài viết liên quan vào giữa bài viết giúp tăng hiệu suất giữ chân người dùng cho Blog (Website). Theo đó, sẽ giảm tỉ lệ thoát trang và nâng cao giá trị Blog (Website) trên công cụ tìm kiếm Google. Bởi khách truy cập có khả năng xem những bài viết được gợi ý theo cùng chủ đề họ tìm kiếm là rất cao. Điều này là rất tốt cho Blog hay trang Web của các bạn.
Khác với bài trước mình đã chia sẻ ở đây các tiêu đề bài viết được gợi ý được gôm lại một chỗ. Thủ thuật lần này sẽ phân bổ các tiêu đề gợi ý ra trên toàn bài viết của các bạn.
Đối với một số bạn không hiểu nhiều về code vui lòng lưu lại Template trước khi chỉnh sửa bất cứ gì trong HTML nhé.
Tự động chèn Bài viết liên quan (Related posts) vào giữa bài viết Blogspot.
Bước 1:
Các bạn truy cập vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML. tìm đến đoạn code hiển thị nội dung bài viết <data:post.body/> sau đó thêm vào sau nó đoạn code dưới đây
Lưu ý: Tùy Template mà có 2 hoặc nhiều hơn đoạn<data:post.body/>. Thường sẽ là đoạn thứ 2, nếu không được các bạn hãy thử lần lượt các đoạn tìm được. Và cũng tùy Template mà có thể các bạn cần phải thêm vào sau đến 2 đoạn<data:post.body/>để bài viết liên quan hiển thị trên mobile. Do tác giả viết 2 giao diện khác nhau giữa PC và mobile.
<b:if cond='data:view.isPost'>
<script>
//<,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='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
</b:if>
</b:loop>
</b:if>
<script>
//< * 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] + '" target="_blank">' + relatedTitles[r] +
'</a></span><span class="icon"></span>';if (r
< relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
Bước 2: chọn phong cách (style) hiển thị gợi ý bài viết liên quan.
</head> sau đó chọn 1 trong những phong cách (style) hiển thị bên dưới thêm vào trước nó.+ Style 1:
<b:if cond='data:blog.pageType !=
"index"'>
/* Related posts between posts Style 1 */
.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("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'
fill='%23000'/%3E%3C/svg%3E") 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>
+ Style 2:
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Related posts between posts Style 2 */
.arldzgnMultiRelated{background:#ffeaa7;color:#000;margin:15px
auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px
solid #d63031;transition:all .3s}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content{padding:10px 15px}
.arldzgnMultiRelated .content
a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content a:hover{color:#111;text-decoration:underline}
</style>
+ Style 3:
<b:if cond='data:blog.pageType !=
"index"'>
<style type='text/css'>
/* Related posts between posts Style 3 */
.arldzgnMultiRelated{background-color:#c0392b;color:#fff;margin:15px
auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all
.3s}
.arldzgnMultiRelated:hover{background-color:#e74c3c}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content
a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated
.icon{height:auto;min-width:55px;background:rgba(255,255,255,.25)
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'
fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all
.3s}
.arldzgnMultiRelated:hover
.icon{background-color:rgba(255,255,255,.15)}
</style>
+ Style 4:
<b:if cond='data:blog.pageType !=
"index"'>
<style type='text/css'>
/* Related posts between posts Style 4 */
.arldzgnMultiRelated{background-color:#eaeaea;color:#000;margin:15px
auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all
.3s}
.arldzgnMultiRelated:hover{background-color:#e3e3e3}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content
a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated
.icon{height:auto;min-width:55px;background:#f5f5f5
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'
fill='%23888'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all
.3s} .arldzgnMultiRelated:hover .icon{background-color:#f9f9f9}
</style>
+ Style 5:
<b:if cond='data:blog.pageType !=
"index"'>
<style type='text/css'>
/* Related posts between posts Style 5 */
.arldzgnMultiRelated{color:#0984e3;margin:15px
auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px
solid rgba(0,0,0,0.2);transition:all .3s}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content
a{color:#000;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated
.icon{height:auto;min-width:55px;background:transparent
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'
fill='%23000'/%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>
+ Style 6:
<b:if cond='data:blog.pageType !=
"index"'>
<style type='text/css'>
/* Related posts between posts Style 6 */
.arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px
auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all
.3s}
.arldzgnMultiRelated:hover{background-color:#222}
.arldzgnMultiRelated .content{padding:12px 15px}
.arldzgnMultiRelated .content .text{margin-right:5px}
.arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em}
.arldzgnMultiRelated .content
a:hover{text-decoration:underline}
.arldzgnMultiRelated
.icon{height:auto;min-width:55px;background:#f44336
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath
d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'
fill='%23fff'/%3E%3C/svg%3E") center / 40px
no-repeat;transition:all .3s}
</style>
Facebook