Series Javascript dành cho blogger

Script là ngôn ngữ lập trình được sử dụng khá phổ biến trên trang Blogsite sử dụng nền tảng Blogspot bài viết dưới đây sẽ giới thiệu ngôn ngữ này dưới dạng code thực chiến - quý vị chỉ cần Copy Code Script dán & chỉnh sửa thông số phù hợp với Blog của quý dzị là xong : 

  Trong Blogspot thẻ Script được khai báo như sau :

1. <script>  // code javascript </script> 
2. <script type="text/javascript" src="file.js" />
   

Cú pháp Script phổ biến - hay gặp.

Đang cập nhật nội dung :

Script trên trang digitalnomad.vn sử dụng template Fletro 5.5  :

• Script gọi link bài viết liên quan :

<script>removeRelatedDuplicates(); printRelatedLabels();</script>

Ý tưởng Code mở rộng cho đoạn code trên như sau : Tạo thêm Stiky SideBar bên trái Blog , Sau đó chèn đoạn code bài viết liên quan trên vào vị trí cần hiển thị nằm trên sticky sidebar :

Thực hiện Thủ thuật như sau : ( Lưu ý code này dùng thích hợp với template Fletro 5.5 )

Bước 1 chèn code CSS dưới đây - Style bộ quy tắc tạo Sidebar trên thẻ </head>  :

 <!--Css Sticky Sidebar-->

<style>/* <![CDATA[ */
.flex{display:-ms-flexbox;display:-webkit-flex;display:flex}.align-center{-webkit-align-items:center;align-items:center}

.flex-align{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}

.flex-center{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center}

.text-center{text-align:center}

.w-50{float:left;width:50%}

.zalo-icon:before,.contact-icon:before{content:"";display:inline-block;vertical-align:middle;width:48px;height:48px;background-position:center center;background-repeat:no-repeat}

.zalo-icon:before{background-color:#018fe5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%23fff' d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'%3E%3C/path%3E%3Cpath fill='%23fff' d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");background-size:55%}

.contact-icon:before{background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M22.407%200h-21.1C.586%200%200%20.586%200%201.306v21.1c0%20.72.586%201.306%201.306%201.306h21.1c.72%200%201.306-.586%201.306-1.305V1.297C23.702.587%2023.117%200%2022.407%200zm-9.094%2018.046c0%20.41-.338.737-.738.737H3.9c-.41%200-.738-.337-.738-.737v-1.634c0-.408.337-.737.737-.737h8.675c.41%200%20.738.337.738.737v1.634zm7.246-5.79c0%20.408-.338.737-.738.737H3.89c-.41%200-.737-.338-.737-.737v-1.634c0-.41.337-.737.737-.737h15.923c.41%200%20.738.337.738.737v1.634h.01zm0-5.8c0%20.41-.338.738-.738.738H3.89c-.41%200-.737-.338-.737-.738V4.822c0-.408.337-.737.737-.737h15.923c.41%200%20.738.338.738.737v1.634h.01z%22/%3E%3C/svg%3E);background-color:#00aeef;background-size:43%}

.contact-module{position:fixed;top:50%;left:-450px;transform:translate(-0%,-50%);max-width:480px;z-index:20;transition:left .7s}

.contact-module:hover{left:0}

.contact-module-content{background:#fff;padding:20px;border-radius:0 4px 4px 0;box-shadow:rgba(0,0,0,0.3) 0 0 6px,rgba(0,0,0,0.15) 0 1px 6px}

.contact-module-content>div>div:nth-of-type(1){margin-bottom:20px}

.contact-module-content>div>div:nth-of-type(2){background:#dadce0;opacity:.7;padding:10px;border-radius:4px}

.contact-module-content>div>div:nth-of-type(2)>div:nth-of-type(2){width:2px;background:#00aeef;margin:0 10px}

.contact-text-wrapper h3{line-height:1.5;opacity:.8;text-transform:uppercase;cursor:default}

.contact-module-content a{color:#212529}

.contact-module-title{background:#00aeef;border:1px solid #00aeef;border-radius:0 4px 4px 0;color:#fff;width:30px;height:150px}

.contact-module-title>div{transform:rotate(-90deg);white-space:nowrap;letter-spacing:3px;font-size:90%;font-weight:500}

.contact-module-content .has-icon{width:48px;height:48px;border-radius:50%;overflow:hidden}

.contact-set a>div:nth-of-type(2){line-height:1.4}.contact-set h4{margin-bottom:5px}

.contact-text-wrapper>div:nth-of-type(3){line-height:1.6}

.contact-text-wrapper>div:nth-of-type(3) a{font-size:1.2rem;font-weight:500}

.contact-text-wrapper>div:nth-of-type(3) a+span{font-size:1.4rem;opacity:.7}

.is-divider{display:block;margin: .7em 0 .5em;background:rgba(0,0,0,0.1);width:100%;max-width:50px;height:2px}

@media(min-width:1025px){.contact-module-title{cursor:pointer}}

@media(max-width:480px){.contact-module{display:none!important}}

/* ]]> */</style>

Bước 2 tìm đoạn code : <script>removeRelatedDuplicates(); printRelatedLabels();</script> thay thế bằng :

<b:if cond='data:blog.isMobileRequest'>  

<!--Tren mobile hien thi bai viet lien quan giua trang --> 
           <script>removeRelatedDuplicates(); printRelatedLabels();</script>
 
<!--End Tren mobile hien thi bai viet lien quan giua trang -->     
<b:else/> 
<!--Tren PC hien thi bai viet lien quan SideBar --> 
       
         
 <!--Chen Div sticky sidebar-->
 <div class='contact-module flex'>

  <div class='flex-align'>

    <div class='contact-module-content flex'>

      <div>

        <div class='contact-title'>

          <div class='contact-text-wrapper'>

            <div>

              <h3 class='text-center'>
                Bài viết liên quan - Related Post   </h3>
             
            </div>

            <div class='flex-center'>

              <div class='is-divider'/>

            </div>

            <div class='text-center'>
          
<a href='https://shorten.asia/4sJjN1Yh'>         
   <div class='panel pink'>
  <button>Shop bán lẻ thớt gỗ</button>
          </div> 
          </a>         
     
<!--chen bai viet len quan giua trang hien thi len sidebar-->  
           <div style='text-align: justify;padding:10px'>  
                    <script>removeRelatedDuplicates(); printRelatedLabels();</script>
             </div>
<!--End chen bai viet len quan giua trang hien thi len sidebar-->  
             
      
<a href='https://www.digitalnomad.vn/2021/01/gia-cong-go-oem-thot-go-khay-go-do-choi-thanh-rut-go-ban-ghe-cafe-ban-ghe-hoc-sinh-giuong-go-cau-thang-go-xu-huong-hop-tac-quoc-te-trong-thoi-dai-cong-nghiep-4.0-N5X2.html'>         
   <div class='panel blue'>
  <button>Bán sỉ, đặt SX thớt gỗ</button>
          </div> 
          </a>
             
            
             
            </div>

          </div>

        </div>

       </div>

    </div>

   
    <div class='contact-module-title flex-center'>

      <div>Related Post</div>
    </div>   
  </div>
</div>   

<!--End Chen Div sticky sidebar-->   
  </b:if>  

• Script template Fletro 5.5 bài viết liên quan chèn dưới thẻ  <div id='related-posts'> :

== Code tham khảo ==

<script>var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedPostConfig={
              homePage:&quot;<data:blog.homepageUrl/>&quot;,
              widgetTitle:&quot;&lt;h3 class=&#39;title&#39;&gt;You may like these posts&lt;/h3&gt;&quot;,
              numPosts:6,
              summaryLength:20,
              titleLength:&quot;auto&quot;,
              thumbnailSize:300,
              noImage:&quot;data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=&quot;,
              containerId:&quot;related-posts&quot;,
              newTabLink:false,
              moreText:&quot;Read more&quot;,
              widgetStyle:2,
              callBack:function(){}
              }
</script>

          <script>/*<![CDATA[*/ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h3 class='title'>Related Posts</h3>",widgetStyle:1,homePage:"http://www.jagodesain.com",numPosts:7,summaryLength:320,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",containerId:"related-posts",newTabLink:false,moreText:"Read more",callBack:function(){}}; for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.async="async";b.rel="preload";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<!-- <div class="clear"/> -->',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t; r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"} if(A==2){c+='<li><div class="item-related"><div class="item-thumbnail"><a href="'+v+'"><img class="post-thumb lazy" alt="'+w+'" data-src="'+r+'" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="></a></div><div class="item-title"><a href="'+v+'"><span>'+w+'</span></a></div></div></li>'} else{c+='<li><div class="item-related"><div class="item-thumbnail"><a href="'+v+'"><img class="post-thumb lazy" alt="'+w+'" data-src="'+r+'" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="></a></div><div class="item-title"><a href="'+v+'"><span>'+w+'</span></a></div></div></li>'} }s.innerHTML=c+="</ul>";d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); /*]]>*/</script>

Code Script sưu tầm lượm lặt.

Đang tiếp tục cập nhật...

==End Series Javascript dành cho blogger==