×

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

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


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>

Không có nhận xét nào:

Đăng nhận xét

Bạn có thể sử dụng biểu cảm yahoo

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3