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 :
- <script> // code javascript </script>
- <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'> :
<script>var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var relatedPostConfig={
homePage:"<data:blog.homepageUrl/>",
widgetTitle:"<h3 class='title'>You may like these posts</h3>",
numPosts:6,
summaryLength:20,
titleLength:"auto",
thumbnailSize:300,
noImage:"data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
containerId:"related-posts",
newTabLink:false,
moreText:"Read more",
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)+"…":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)+"…":"";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==
Flagship, giá hời, đời cũ, cấu hình ngon, xem phim, chơi game, nghe nhạc cực đã. :
+ Iphone 11 :
Xem Tại Đây
+ Iphone 12 :
Xem Tại Đây
+ Iphone 13 :
Xem Tại Đây
+ Samsung Galaxy S20 FE :
Xem Tại Đây
+ Samsung Galaxy S22 Ultra 5G :
Xem Tại Đây
+ Vivo V23 5G 8GB/128GB :
Xem Tại Đây
+ Vivo V25e 4G 8GB/128GB :
Xem Tại Đây
+ Redmi Note 11 Pro 5G :
Xem Tại Đây
+ Xiaomi 12 Pro :
Xem Tại Đây
Điện Thoại Giá Rẻ, Chạy Grab, Tài Xế Công Nghệ :
+ Poco M4 Pro :
Xem Tại Đây
+ Oppo A54 :
Xem Tại Đây
+ Xiaomi Redmi Note 11 :
Xem Tại Đây
+ Samsung Galaxy A23 :
Xem Tại Đây
Smartphone Gaming Giá Rẻ, Tải App Kiếm Tiền Online, Cài Đặt Ứng Dụng Học Tập, Giải Trí, Xem Phim Nghe Nhạc, Chơi Game Online, :
+ Tecno Poca 3 :
Xem Tại Đây
+ Realme narzo 50i Prime :
Xem Tại Đây
