Home
Tiện ích

Cài đặt bài viết liên quan trong bài viết tùy chỉnh vị trí cho blogspot

Bài liên quan dưới dạng xem thêm để trên đầu bài viết với cách đặt nó trước thẻ <data:post.body/> thường là không được chuyên nghiệp cho lắm vì nó nằm ngay sau tiêu đề bài đăng hoặc post info và nằm trên firstImage.

Bài liên quan tại ví trí trên đầu bài viết thường có dạng chỉ có tiêu đề bài viết với số lượng tối đa là 5 thường chỉ để 3 cho gọn.
Bài liên quan ở đây có thể tùy chọn ví trí theo lần xuống dòng <br/> trong bài viết.

Hướng dẫn cài đặt bài viết liên quan trong bài viết tùy chỉnh vị trí cho blogspot

Kiểu 1


Cài đặt bài viết liên quan trong bài viết tùy chỉnh vị trí cho blogspot

DEMO
Bước 1 Thêm CSS
#related-custom{display:none;position:relative}
#related-custom h2{background:#fff;color:#3565a2;position:absolute;top:-30px;left:40px;padding:0 12px;font-size:14px;font-weight:600;z-index:1}
#related-custom a{font-weight:500;font-size:14px;display:block;padding:0}
#related-custom ul{max-width:90%;margin:30px auto 10px;padding:10px 20px 0px 30px;position:relative;border:1px solid #ddd}
#related-custom li{padding:0;margin:.6em 0;list-style-type:disc}
.post-body #related-custom{display:block}
@media (max-width:500px){#related-custom{max-width:100%}
#related-custom li{padding:0;margin:.3em 0}
}
Bước 2 Tạo một b:includable cho tiện ích này bằng cách vào phần bài đăng trên blog "main" trong chỉnh sửa HTML dán đoạn code bên dưới vào chỗ mũi tên trong ảnh.
Cài đặt bài viết liên quan trong bài viết tùy chỉnh vị trí cho blogspot
<b:includable id='post-related-custom' var='post'>
                     <script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function relatedcustom(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicate(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabel(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(relatedTitles.length>1){for(document.write("<h2>Xem thêm</h2>"),document.write("<ul>");l<relatedTitles.length&&l<20&&l<jumlahbacajuga;)document.write('<li><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
                     <div id='related-custom'>
           <b:loop values='data:post.labels' var='label'>
           <b:if cond='data:label.isLast != &quot;true&quot;'>
           </b:if>
           <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relatedcustom&amp;max-results=5&quot;' type='text/javascript'/>
           </b:loop>
           <script type='text/javascript'>
             var jumlahbacajuga=3;
             removeRelatedDuplicate();
             printRelatedLabel(&quot;<data:post.url/>&quot;);
           </script>
           </div>
                </b:includable>
Bước 3 Thêm javascript vào trước </body>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>
function insertAfter(addition, konten) {
    var parent = konten.parentNode;
    if (parent.lastChild == konten) {
        parent.appendChild(addition);
    } else {
        parent.insertBefore(addition, konten.nextSibling);
    }
}
function insertAbove(addition, konten) {
    var parent = konten.parentNode;
 parent.insertBefore(addition, konten);
}
function insertBellow(addition) {
    var parent = konten;
 parent.appendChild(addition);
}
var relatedcustom = document.getElementById(&quot;related-custom&quot;);
var konten = document.getElementById(&quot;body-post-it&quot;);
var lokasi = konten.getElementsByTagName(&quot;br&quot;);
if (lokasi.length &gt; 1) {
    insertAfter(relatedcustom,lokasi[1]);
} 
else {
 relatedcustom.innerHTML = &quot;&quot;;
}
</script>
</b:if>
Chỉ số 1 trong code là quy định bài liên quan ở vị trí lần xuống dòng thứ nhất.Bạn tùy chọn theo ý mình.
Bước 4 Gọi tiện ích với việc đặt html sau vào trước:
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
<!-- Xem thêm Start -->
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                       <b:include data='post' name='post-related-custom'/>
                      </b:if>                      
                    <!-- Xem thêm End -->
Bước 5 Kích hoạt tiện ích
Thay <data:post.body/> thành:
<div id='body-post-it'>
<data:post.body/>
</div>

Kiểu 2

Cài đặt bài viết liên quan trong bài viết tùy chỉnh vị trí cho blogspot

DEMO
Bước 1: Thêm mã dưới đây, vào trước khi mã </ head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
Bước 2: Thêm CSS sau vào trước ]]></b:skin> or </style> 
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
Bước 3: Tiếp theo, tìm đoạn mã <data: post.body /> sau đó thay thế bằng đoạn mã bên dưới. 
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Đọc thêm</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
Lưu ý:
Bên trong mẫu, bạn sẽ tìm thấy một số mã <data: post.body /> tùy thuộc vào mẫu được sử dụng, hãy thử từng cái một cho đến khi bài viết liên quan xuất hiện bên trong trang bài viết
Bước 5. Sau đó, lưu mẫu và xem kết quả.
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji