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.


  • [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'> //<![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 type='text/javascript'> //<![CDATA[ (function arldzgnMultiRelated() {var text = 'Also read :';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>]

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é !

SHARE:

COMMENTS

Name

About-us,1,Auto,15,Ban-tin-coc,330,Base- hall-10,1,Bay,1,bi-an,6,Buit-phong-thu,36,Clans-do-sat,21,Clash-roylae,4,Co-the-ban-chua-biet,91,da,1,Dac-tinh-quan,39,Game-lien-quan,24,Game-moblie,17,game-pc,5,Hall12,1,Hero,11,hidden,1,Kiem-tien-online,31,Kim-chi-va-cu-cai-2019,2,Lap-mang-fpt-hai-phong,1,Lien-he,1,Lien-ket-tiep-thi,6,Phan-mem,66,phan-mem-mobile,15,phan-mem-pc,21,Phim-anh,3,PUBG,5,Quan-doi-base,9,spell,1,spell-dark-elixir,9,spell-elixir,12,Suc-khoe,9,Template-ban-hang,1,Template-nhac,1,Template-phim,7,Template-thu-vien-anh,3,template-tin-tuc,5,Template-truyen-tranh,1,th12,1,The-thao,14,Thong-tin-cong-nghe,37,Thu-thuat-blog,10,Thu-thuat-pc,4,tin,1,Tin-gioi-tre,32,Tin-tuc,67,Toa-nha-tai-nguyen,5,Vat-pham-than-ky,12,video-farm,20,Video-hai,10,video-war,27,Vo-lam-truyen-ky,2,War-builder-base,4,Xep-nha-hall-12,1,Xep-nha-thu,43,Xep-nha-thu-bh,8,Xep-nha-thu-war,19,Xep-nha-troll,3,
ltr
item
Clash of Clans Việt: Tạo bài viết liên quan cực đẹp và đơn giản giữa trang Blog 2020
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.
https://1.bp.blogspot.com/-3HxZySyzwBA/XgcPq7XRJUI/AAAAAAAAOjI/b0opL8hvWi4cEvEKHRe-TtNA_R63QIdZgCLcBGAsYHQ/s640/tao-bai-viet-lien-quan-giua-blog-don-gian-nhat-2020.PNG
https://1.bp.blogspot.com/-3HxZySyzwBA/XgcPq7XRJUI/AAAAAAAAOjI/b0opL8hvWi4cEvEKHRe-TtNA_R63QIdZgCLcBGAsYHQ/s72-c/tao-bai-viet-lien-quan-giua-blog-don-gian-nhat-2020.PNG
Clash of Clans Việt
https://www.clashofclansviet.com/2019/12/tao-bai-viet-lien-quan-cuc-dep-va-don-gian-giua-trang-blog-2020.html
https://www.clashofclansviet.com/
https://www.clashofclansviet.com/
https://www.clashofclansviet.com/2019/12/tao-bai-viet-lien-quan-cuc-dep-va-don-gian-giua-trang-blog-2020.html
true
3345287795156014315
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All CÓ THỂ BẠN SẼ THÍCH LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy