Tạo bài viết liên quan cực đẹp và đơn giản giữa trang Blog 2020

Bạn đã bao giờ thấy các liên kết bài viết liên quan được chèn giữa các nội dung trong bài đăng trên các website lớn? Trong Blog, chúng ta cũng có thể tạo ra nó bằng cách thêm các liên kết trong mỗi bài viết theo cách thủ công, nhưng sẽ rất mất thời gian để làm điều đó chính vì thế trong bài viết ngày hôm nay clash of clans việt sẽ chia sẻ với các bạn 1 thủ thuật tạo các liên kết bài viết liên quan được chèn tự động dưới mỗi đoạn văn bản trong blog đơn giản mà đẹp nhất 2020.

Bạn đã bao giờ thấy các liên kết bài viết liên quan được chèn giữa các nội dung trong bài đăng trên các website lớn? Trong Blog, chúng ta cũng có thể tạo ra nó bằng cách thêm các liên kết trong mỗi bài viết theo cách thủ công, nhưng sẽ rất mất thời gian để làm điều đó chính vì thế trong bài viết ngày hôm nay clash of clans việt sẽ chia sẻ với các bạn 1 thủ thuật tạo các liên kết bài viết liên quan được chèn tự động dưới mỗi đoạn văn bản trong blog đơn giản mà đẹp nhất 2020.

• [col]
• Tiện ích bài viết liên quan là 1 tính năng không thể thiếu đối với 1 website nói chung và blogspot nói riêng bởi nó sẽ giúp giữ chân khách truy cập lâu hơn thông qua các chủ đề có liên quan đến các bài viết mà họ đang xem. 

Vì là nền tảng miễn phí cho nên blog cung cấp rất ít các tùy chọn hiển thị bài viết liên quan đặc biệt đối với những bạn muốn hiển thị các bài viết liên quan ở giữa bài đăng trong blogspot. Đây là hình ảnh minh họa trước và sau khi chèn tiện ích bài viết liên quan giữa Blogspot 2020

• [col]
• 
• 

Số lượng liên kết bài viết liên quan hiển thị trong Blog sẽ tùy thuộc vào các bạn tùy chỉnh và để làm được như trên các bạn thực hiện qua 2 bước đơn giản như sau

2. Cách thực hiện

Bước 1 : Vào trong trang quản trị  Blog  >  Chủ Đề  >  Chỉnh sửa html  > Tìm đến thẻ đóng    <data:post.body/> và cody đoạn code dưới đây vào trước thẻ đóng  </data:post.body/> 
Thông thường trong blog sẽ có từ 2 -3 đoạn như vậy cho nên các bạn cứ thử test nhé, theo kinh nghiệm của mình là ở đoạn thứ 2

• [col]
• 
• Để hiển thị được bài viết liên quan giữa bài đăng trong blog như trên các bạn thực hiện như sau cũng rất đơn giản thôi chúng ta cùng bắt đầu nhé. Để tìm kiếm nhanh các đoạn code các bạn nhấn tổ hợp phím Ctrl + F và copy đoạn code muốn tìm vào khung như hình vẽ bên cạnh

[<b:if cond='data:view.isPost'> <script type='text/javascript'> //<,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 type='text/javascript'> //< * 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>]

Chú ý : 2 mục đánh dấu màu vàng là vị trí các bạn có thể thay đổi cho phù hợp với nhu cầu sử dụng của mình

• var jumlah = 4  : Số lượng liên kết bài viết liên quan hiển thị gữa các đoạn trong Blog
• Also read : Tên mà bạn muốn hiển thị

Bước 2 : Tìm đến thẻ đóng   </head>  và cody đoạn code dưới đây vào trước thẻ đóng  </head> 

Mẫu 1 :

[<b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .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(&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;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} </style> </b:if>]

Có 1 số màu sắc khác cho các bạn lựa chọn ngoài mẫu bài viết liên quan màu đen phía trên

Mẫu 2 :

[<b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .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(&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:1px solid rgba(0,0,0,0.2);transition:all .3s} .arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3} </style> </b:if>]

Mẫu 3 :

[<b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .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(&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;%23888&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} .arldzgnMultiRelated:hover .icon{background-color:#f9f9f9} </style> </b:if>]

Mẫu 4 :

[<b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .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(&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;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} .arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)} </style> </b:if>]

Mẫu 5 :

[ <b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .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> </b:if>]

Hi vọng với thủ thuật tạo bài viết liên quan giữa trang blog mới nhất 2020 này sẽ giúp cho các blogger có thêm được nhiều trafic hơn nhé. Mọi câu hỏi các banjn vui lòng bình luận phía dưới bài viết và cũng đừng quên thường xuyên truy cập clash of clans việt để theo dõi các thủ thuật blog mới nhất nhé !