3 lưu ý khi thiết kế website tương thích với điện thoại di đông/smartphone

Một trong những tiêu chí để đánh giá một thiết kế website chất lượng là người dùng có thể truy cập dễ dàng trên thiết bị di động và smartphone. Chính vì thế trong quá trình thiết kế website bạn cần đặc biệt lưu ý đến khả năng tương thích của website với các thiết bị công nghệ. Nếu thiết kế website không tương thích đồng nghĩa với việc doanh nghiệp của bạn đã mất đi một thị trường đầy tiềm năng. 

Vậy những lưu ý khi thiết kế website tương thích với mobile là gì? Hãy cùng vungve.com điểm nhanh qua bài viết sau đây để có câu trả lời chính xác nhất dành cho mình nhé!!! 

Nội dung bài viết :

• 1. Tối giản hóa nội dung.
• 2. Hãy tận dụng những tính năng mà website có sẵn.
• 3. Chỉ một cột duy nhất.

Phần nội dung chi tiết bài viết

1. Tối giản hóa nội dung.

Các thiết bị di động dù có thông minh, đẹp đến cỡ nào thì cũng không thể có kích thước lớn như máy tính để bàn hay laptop. Chính vì vậy việc hiển thị nội dung trên di động cần phải đặc biệt chú ý, thể hiện nội dung tối giản nhất. Bên cạnh đó, tâm lý mỗi khách hàng khi truy cập, tra cứu thông tin trên website từ các thiết bị di động không muốn đọc quá nhiều nội dung, họ chỉ cần những thông tin ngắn gọn, đầy đủ. Vì vậy, nội dung cần đảm bảo khai thác được những tính năng quan trọng nhất về sản phẩm, dịch vụ.

Những nội dung không cần thiết, không quan trọng có thể được gỡ bỏ nhằm tạo sự thuận tiện nhất cho độc giả. Hơn thế nữa, việc giảm thiểu nội dung còn là yếu tố quan trọng góp phần nâng cao tốc độ tải trang nhanh, hiệu quả mang lại sự hài lòng cho mỗi khách hàng.

2. Hãy tận dụng những tính năng mà website có sẵn.

Thiết kế website tương thích thiết bị di động không chỉ giúp người dùng tiếp cận website mọi lúc, mọi nơi mà nó còn sở hữu nhiều lợi thế thông qua các tính năng như kết nối cuộc gọi, liên hệ khi cần thiết và định vị vị trí thuận tiện. Bằng cách tận dụng những ưu điểm này bạn có thể nâng cao tiện ích cho trang web doanh nghiệp mình. Cụ thể:

Tính năng kết nối cuộc gọi

Tính năng này sẽ phát huy tác dụng khi khách hàng click vào nút đặt hàng hay liên hệ. Ngay lập tức các tư vấn viên sẽ kết nối ngay với khách hàng để tư vấn, hỗ trợ và giải đáp những thắc mắc về sản phẩm, dịch vụ mà họ lựa chọn. Việc làm sẽ tạo nên sự đồng bộ giúp website của bạn chuyên nghiệp hơn trong mắt khách hàng.

Tính năng xác định vị trí

Mọi thiết bị di động thông minh hiện nay đều có tính năng định vị. Vì thế bạn sẽ dễ dàng chia sẻ vị trí của mình cho khách hàng từ đó điều hướng họ đến những cửa hàng của bạn ngay gần vị trí của họ nhất.

3. Chỉ một cột duy nhất.

Với máy tính và laptop thông tin sẽ được trải đều trên các cột khác nhau như cột thông tin chính và các thông tin liên quan. Nhưng với sự hạn chế từ kích thước màn hình của các thiết bị di động thì thông tin chỉ nên bố cục theo 1 cột duy nhất. Nó sẽ giúp người dùng dễ dàng đọc nội dung thông tin, không bị hạn chế kích cỡ chữ và tạo giao diện phù hợp cho màn hình di động.

Sự khác nhau giữa Java và JavaScript

Tại sao Java và JavaScript lại có tên gọi tương tự nhau?

Sự tương đồng về tên gọi này là có chủ ý. Java, được tạo ra vào năm 1990 bởi James A. Gosling, một nhà khoa học máy tính tại Sun Microsystems, đã rất nổi tiếng vào thời điểm Netscape đặt tên cho ngôn ngữ lập trình của mình là JavaScript vào cuối năm 1995.
Việc dựa vào danh tiếng của Java là một động thái kinh doanh thông minh. Như một người dùng Quora từng đưa ra giả thuyết, Netscape muốn mọi người nghĩ rằng Javascript có liên quan đến Java và họ đã thành công.
Lời giải thích đó hơi khiên cưỡng và không hoàn toàn chính xác. Thực tế là JavaScript, được thiết kế bởi Brendan Eich của Netscape, ban đầu gọi là LiveScript, nhưng một thỏa thuận marketing (hay có thể gọi vui là một “mánh khóe”) giữa Netscape và Sun đã khiến Netscape đổi tên thành JavaScript, vì mục đích hợp tác thương hiệu. Vào thời điểm đó, Sun đã đồng ý cho Netscape đóng gói trình duyệt hàng đầu với Java runtime. Việc thay đổi tên là một phần của thỏa thuận.
Kể từ đó, mức độ phổ biến của Java có thể đã bị phai nhạt, nhưng JavaScript thì không. Bạn có thể cho rằng JavaScript có được ngày hôm nay là nhờ vào sự nổi tiếng của Java. Nhưng có lẽ không phải ai cũng đồng tình với quan điểm này. Điều cần nhấn mạnh ở đây là ngoài quy ước đặt tên, hai ngôn ngữ không có nhiều điểm chung.

Java và JavaScript có gì giống và khác nhau?

Sau đây là so sánh nhanh về những nét tương đồng và khác biệt giữa Java và JavaScript:

Điểm khác biệt

Java là ngôn ngữ lập trình tĩnh, hướng đối tượng, hoạt động trên nhiều nền tảng. JavaScript là ngôn ngữ lập trình động (hay ngôn ngữ kịch bản - scripted language) được sử dụng để làm cho các trang web và ứng dụng trở nên sinh động.
Java dựa trên lớp (class), còn JavaScript thì động.
Java là một ngôn ngữ độc lập. JavaScript phụ thuộc nhiều hơn, nghĩa là nó hoạt động với HTML và CSS trên các trang web để tạo nội dung động.
Vào năm 2019, JavaScript là thứ bắt buộc phải học đối với các nhà phát triển web, vì nó được sử dụng khá nhiều ở mọi nơi, trong khi Java được coi là ngôn ngữ lập trình thế hệ trước (tuy nhiên, chắc chắn rất nhiều trang web vẫn sử dụng nó).

Điểm tương đồng

Như bài viết đã nói ở trên, không có nhiều điểm tương đồng giữa Java và JavaScript. Có thể điểm qua một số nét giống nhau ở cả 2 ngôn ngữ lập trình này như sau:

Cả Java và JavaScript thường được sử dụng nhiều nhất trong các ứng dụng phía máy khách
Cả Java và JavaScript đều sử dụng cú pháp C
JavaScript sao chép một số quy ước đặt tên của Java.
Bạn nên học Java hay JavaScript?
Một lần nữa, điều này giống như so sánh giữa táo và cam. Nhưng nếu buộc phải chọn, hãy chọn JavaScript.
Theo GitHub, tính đến năm 2018, JavaScript đã được dùng để tạo nhiều kho lưu trữ hơn bất kỳ ngôn ngữ nào khác. GitHub cũng báo cáo rằng JavaScript và Python đang ngày càng trở nên phổ biến qua từng năm, đặc biệt là so với các ngôn ngữ khác như Ruby.

Đừng hiểu lầm! Java vẫn được sử dụng rộng rãi và rất phổ biến, đi kèm theo đó là vô số lý do tại sao bạn nên học Java. Nhưng JavaScript là điểm khởi đầu lý tưởng cho những người mới bắt đầu quan tâm đến việc học lập trình, đặc biệt là người yêu thích công việc phát triển web front-end hoặc full stack. Thực sự, am hiểu về Javascript là một kỹ năng đủ linh hoạt để áp dụng cho một loạt các vai trò liên quan đến công nghệ.

Rất khó để chọn lựa giữa hai ngôn ngữ này. Vì vậy, nếu bạn thực sự không chắc chắn, hãy thử xem xét mục tiêu cuối cùng và cân nhắc ưu, nhược điểm của từng ngôn ngữ.

Chúc bạn có được lựa chọn phù hợp!

Chuyển liên kết trong comment blog sang dạng văn bản thường

Có rất nhiều người đặt link của họ trong comment. để chuyển liên kết trong comment sang dạng văn bản thường chúng ta hoàn toàn có thể làm được.

Hiện tượng đặt liên kết trong comment hay còn gọi là hiện tượng hiện tượng Spam Comment.

Có rất nhiều bài viết hướng dẫn các bạn Chuyển liên kết trong comment blogger sang dạng văn bản thường, Nhưng hầu hết các bài viết là hướng dẫn các bạn xóa hoặc ẩn nó đi. Ở bài viết này mình sẽ hướng dẫn các bạn Chuyển liên kết trong comment blogger sang dạng văn bản thường,

Chuyển chứ không xóa hoặc ẩn các bạn nhé ! xin lưu ý cho.

Các bạn thực hiện các bước như sau :

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ <head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />  

Bước 2: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body> và Lưu mẫu.

<script type="text/javascript">
$("#comments p a").each(function () {
 $(this).replaceWith($(this).text());
});
</script>  

Thủ thuật này đơn giản chỉ vậy thôi ! Các bạn thực hiện là thấy ngay kết quả nên Mình không để DEMO.

Thêm tiện ích bài viết ngẫu nhiên cho blog

Có rất nhiều kiểu để thêm tiện ích bài viết ngẫu nhiên cho blog sau đây web hay chia sẻ cho các bạn 02 cách để các bạn hiển thị .

1.Dạng có hình ảnh
2.Dạng không có hình ảnh

Một widget bài đăng ngẫu nhiên là một trong những tính năng quan trong trong việc tăng số lần truy cập trang trên blog. Tiện ích, để hiển thị ngẫu nhiên các bài viết trên blogspot. Vì vậy các bài viết cũ mà khách truy cập không thấy được sẽ được mở lại trong tiện ích bài viết ngẫu nhiên.
Nhưng hầu hết các blogger thường nghĩ về việc cài đặt một widger sẽ làm giảm tốc độ tải trang.
Quay trở lại chủ đề chính thủ thuật đơn giản để tạo tiện ích bài đăng ngẫu nhiên nhanh và gọn.

1. Thêm tiện ích bài đăng ngẫu nhiên trên blogspot dạng không có hình ảnh.

• Đăng nhập vào Blogger
• Chọn trình đơn Bố cục ⇒Thêm tiện ích ⇒ HTML/Javascript
• Sao chép và lưu mã bên dưới vào

<style scoped='' type="text/css"> 
#cnttls-random ul{list-style:none;margin:0;padding:0}
#cnttls-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} 
#cnttls-random li:last-child{border-bottom:0;} 
#cnttls-random li a{color:#444;}
#cnttls-random li a:hover{color:#444;text-decoration:underline} 
</style> 
<div id='cnttls-random'>WebHay.</div> <script> 
//<![CDATA[ 
// Random Post Widget 
var homePage = 'https://vungve.com', 
 maxResults = 10, 
 containerId = 'cnttls-random'; 
function getRandomInt(min, max) { 
                return Math.floor(Math.random() * (max - min + 1)) + min; 
}
function shuffleArray(arr) { 
              var i = arr.length, j, temp; 
              if (i === 0) return false;  
              while (--i) { 
                     j = Math.floor(Math.random() * (i + 1));         temp = arr[i];         arr[i] = arr[j];         arr[j] = temp; 
                            }
                     
                            return arr; 
} 
function cnttlsRandomPosts(json) { 
             var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
            // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
            document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); 
} 
function randomPosts(json) { 
           var link, ct = document.getElementById(containerId),         entry = shuffleArray(json.feed.entry),         skeleton = "<ul>"; 
           for (var i = 0, len = entry.length; i < len; i++) { 
                            for (var j = 0, jen = entry[i].link.length; 
                            j < jen; j++) {             link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; 
           } 
                           skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>'; 
 } 
                           ct.innerHTML = skeleton + '</ul>'; 
} 
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=cnttlsRandomPosts"></scr' + 'ipt>'); 
//]]> 
</script>

Thay đổi url https://vungve.com thành trang của bạn rồi Lưu tiện ích và xem kết qủa

2. Thêm tiện ích bài đăng ngẫu nhiên trên blogspot dạng có hình ảnh.

Vào chủ đề chính trước hết bạn cần tạo đoạn javascript và đặt chúng ngay trước thẻ đóng </body>

<script>//<![CDATA[
var randarray = new Array();
var l = 0;
var flag;


function randomposts(json) {
  var total = parseInt(json.feed.openSearch$totalResults.$t, 10);
  for (i = 0; i < numposts;) {
    flag = 0;
    randarray.length = numposts;
    l = Math.floor(Math.random() * total);
    for (j in randarray) {
      if (l == randarray[j]) {
        flag = 1;
      }
    }
    if (flag == 0 && l != 0) {
      randarray[i++] = l;
    }
  }
  for (n in randarray) {
    var p = randarray[n];
    var entry = json.feed.entry[p - 1];
    for (k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        var w = ' thag ';
        var x = ', ';
        var t = entry.published.$t;
        var postPublished = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4);
        var postUrl = entry.link[k].href;
        var postTitle = entry.title.$t;
        var postThumbnail;
            try {
                var postThumbnail = entry.media$thumbnail.url.replace('s72-c', 's1600');
            } catch (error) {
                postThumbnail = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1vY2BW13V7xNNJ_AcMDcnDh3QDplm8x1_QBGZ1gNUXqOdbvIll7PvMKzM4VWwC2amZU4G5Si4j3mD-dErGDajgBkQGcur5tsDvD5tR6AplEW-9bog4UH04rQ7WsWMnvNlxH5mGqX96mHh/s1600/safe_image.png';
            }
        var postAuthor = entry.author[0].name.$t;
        var postUri = entry.author[0].uri.$t
        var postSnippet = entry.summary.$t.substring(0, (snippet));
        document.getElementById('random-posts').innerHTML += '<li><div class="post-thumb"><a href=' + postUrl + ' title="' + postTitle + '"><img src=' + postThumbnail + ' alt="' + postTitle + '" /></a></div><h2 class="post-title"><a href=' + postUrl + ' title="' + postTitle + '">' + postTitle + '</a></h2><div class="post-meta"><span class="post-author"><a href=' + postUri + ' title=' + postAuthor + '>' + postAuthor + '</a></span><span class="post-date">' + postPublished + '</span></div><p class="post-snippet">' + postSnippet + '...</p></li>';
      }
    }
  }
}
//]]></script>
<script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=randomposts'/>

Khi tạo xong việc tiếp theo bạn thêm đoạn mã sau vào nơi muốn hiển thị bài viết 

ví dụ trong widget thì bạn chọn thêm 1 tiện ích HTML/Javascript sau đó thêm vào trong phần nội dung:

<script>var numposts = 5; var snippet = 150;</script><ul id ="random-posts"></ul>

Trong đó:

– 5: là số bài viết muốn hiển thị
– 150: là số từ muốn cắt của đoạn tóm tắt bài viết.

Phần làm đẹp cho bố cục bài viết tức là viết css thì các bạn tự thiết kế theo sở thích của mình, mình đưa ra các class hiển thị của bài viết:

+ Class ảnh: .post-thumb và .post-thumb img
+ Class tiêu đề h2.post-title và h2.post-title a
+ Class meta bao gồm class tác giả và class thời gian: .post-meta, .post-author, .post-date.
+ Class tóm tắt: .post-snippet

Recent Comments bình luận mới cho blog

Để tạo một Recent Comments "Hay Thêm Widget bình luận mới blogger"Cho Blogspot cho blogspot các bạn làm như sau :

1. Đăng Nhập Vào Tài Khoản Blogger

2. Vào Edit HTML

3. Tìm kiếm thẻ </style> và thêm đoạn css sau vào trước nó, Hoặc sào sau thẻ <style>.

/* Bình Luận Mới Nhất By vungve.com */
ul.idbcomments{list-style:none;margin:0;padding:0}.idbcomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all;padding:8px 0!important}.idbcomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:42px;height:42px}.idbcomments li a{font-weight:700}.idbcomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}

4. Các Bạn Vào Bố Cục => Thêm Tiện ích HTML/JAVASRIPT

<script type="text/javascript">
//<![CDATA[
// Recent Comments by vungve.com
function idbcomments(a){var e;e='<ul class="idbcomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihUA23rgmWCSrd5c6U15LVLSWcI-Z7LGHtRQH1oRd8xzSfbYMWwM9mkqmit1XtXaeGtjJX5bbvMl1KmZ4vmtYNXIhewuqwK-EU6n6wvmZVYCNlDf-jxLNtxAR992ri1jvNUleDIO2mIsuM/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-o-qMEnetolr9H8N0Bjv9W5GvIDLo7Mt4AkTJuf8liTHMw_U8yDIxaysXkqbNG4RtezU4_Oz6X-8ubCqYJ_NsqPrPBuSi86GmgWxHRWbpHS4fmLOmu9LWwkwy6LGIcZUL6XJy7y_PGg87/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=7,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzUQoYQz6wu8geLo3FKya0uSlp0GpcdwkUCcGH2BQDOJ8W4YhkdfmPILBbjHUYaFgYfRQgSyk7upuywmMKNOtI6J1KxYo991C60Q1-ptFfR7oC_mfBLFhX-IkYfpWZHYiObHyIlQhnutrd/s1600/noimage.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzUQoYQz6wu8geLo3FKya0uSlp0GpcdwkUCcGH2BQDOJ8W4YhkdfmPILBbjHUYaFgYfRQgSyk7upuywmMKNOtI6J1KxYo991C60Q1-ptFfR7oC_mfBLFhX-IkYfpWZHYiObHyIlQhnutrd/s1600/noimage.png",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=idbcomments&amp;max-results=7"></script>

5. Lưu Lại Và Xem Kết Quả . Chúc Các Bạn Thành Công !

Cố định sidebar khi scroll chuột xuống dưới

Mọi thứ cần để thực hiện

khai báo thư viện ./js/sticky-sidebar.js
Khai báo đoạn: 

<script type=”text/javascript” src=”./js/sticky-sidebar.js”></script>

Đoạn Script hiển thị:

<script type=”text/javascript”> var sidebar = new StickySidebar(‘#sidebar’, {
containerSelector: ‘#main-content’,
innerWrapperSelector: ‘.sidebar__inner’,
topSpacing: 20, bottomSpacing: 20 });
</script>

topSpacing: 20 (tính bằng px) – khoảng cách trên cùng giữa mục Sticker và Header.
bottomSpacing: 20 (tính bằng px) – khoảng cách dưới cùng giữa mục Sticker và Footer.

Tiến hàng thực hiện

Cấu trúc HTML của trang web của bạn phải tương tự như vậy để hoạt động:

<div id=”main-content” class=”main”>
<div id=”sidebar” class=”sidebar”>
<div class=”sidebar__inner”>
<p>Content goes here</p>
</div>
</div>
<div id=”content” class=”content”>
<p>Content goes here</p>
</div>
</div>

=> các bạn có thể thay đổi các tên các class tùy theo website của bạn đang sử dụng.

Lưu ý: Lớp sidebar__inner là class bạn muốn cố định, #main-content là lớp bao bên ngoài cùng.

Ví dụ trên, bạn có thể sử dụng JavaScript sau:

<script type=”text/javascript” src=”./js/sticky-sidebar.js”></script>
<script type=”text/javascript”>
var sidebar = new StickySidebar(‘#sidebar’, {
containerSelector: ‘#main-content’,
innerWrapperSelector: ‘.sidebar__inner’,
topSpacing: 20,
bottomSpacing: 20
});
</script>

ok. Chúc các bạn thành công !

10+ cách tùy chỉnh Related Posts cho blog

1.Thay đổi tiêu đề “Related”.

function cswp_jetpack_related_posts_headline( $headline ) {
$headline = sprintf(
'<h3 class="jp-relatedposts-headline"><em>%s</em></h3>',
esc_html( 'Bài viết liên quan' )
);
return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'cswp_jetpack_related_posts_headline' );

2.Không cho bài viết nào đó xuất hiện trong ralated posts.

function cswp_jetpack_exclude_related_post( $exclude_post_ids, $post_id ) {
$exclude_post_ids[] = 12345; // Loại trừ bài viết với ID 12345
$exclude_post_ids[] = 67890; // Loại trừ bài viết với ID 67890
return $exclude_post_ids;
}
add_filter( 'jetpack_relatedposts_filter_exclude_post_ids', '_cswp_jetpack_exclude_related_post' );

ID của bài viết bạn có thể lấy bằng cách, chọn edit bài viết và nhìn link trên trình duyệt. ID là phần tôi highlight trong hình dưới.

3.Loại trừ từ nào đó không muốn xuất hiện trong ralated posts

function cswp_jetpack_filter_exclude_category( $filters ) {
$filters[] = array( 'not' =>
array( 'term' => array( 'category.slug' => 'từ muốn loại bỏ' ) )
);
return $filters;
}
add_filter( 'jetpack_relatedposts_filter_filters', 'cswp_jetpack_filter_exclude_category' );

4.Loại trừ bài viết từ một category cụ thể

function cswp_jetpack_filter_exclude_uncategorized( $filters ) {
$filters[] = array( 'exists' =>
array( 'field' => 'category.slug' )
);
$filters[] = array( 'not' =>
array( 'term' => array( 'category.slug' => 'category cần loại bỏ' ) )
);
return $filters;
}
add_filter( 'jetpack_relatedposts_filter_filters', 'cswp_jetpack_filter_exclude_uncategorized' );

5.Loại bỏ post meta bên dưới bài viết

add_filter( 'jetpack_relatedposts_filter_post_context', '__return_empty_string' );

6.Loại bỏ ralated post xuất hiện trong một bài viết nào đó

function cswp_jetpack_no_related_posts( $options ) {
if ( is_single( array( 123, 456, 789 ) ) ) {
$options['enabled'] = false;
}
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'cswp_jetpack_no_related_posts' );

Trong đó: 123, 456 và 789 là ID của bài viết, bạn có thể thêm nhiều ID khác, chúng ngăn cách bởi dấu phẩy.

7.Thay đổi số lượng Related Posts

Mặc định Jetpack sẽ hiển thị 3 bài viết liên quan nhưng bạn có thể chỉnh lại số bài viết bằng code sau:

function cswp_jetpack_more_related_posts( $options ) {
$options['size'] = 4; // số bài viết sẽ hiển thị
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'cswp_jetpack_more_related_posts' );

8.Di chuyển Related Posts lên đầu

function cswp_jetpack_move_related_posts_to_top( $options ) {
$options['show_above_content'] = true;
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'cswp_jetpack_move_related_posts_to_top' );

9.Chèn Related Posts vào bên trong nội dung của bài viết

Riêng cái này bạn không phải thêm vào file functions.php nhé. Đối với các bài viết bạn muốn hiển thị bài viết liên quan ngay trong bài viết thì thêm sortcode sau vào:

10.Không muốn hiển thị Ralated Posts nữa

function cswp_jetpack_remove_ralate-posts() {
$jprp = Jetpack_RelatedPosts::init();
$callback = array( $jprp, 'filter_add_target_to_dom' );
remove_filter( 'the_content', $callback, 40 );
}
add_filter( 'wp', 'cswp_jetpack_remove_ralated-posts', 20 );

11.Cố định bài viết liên quan đối với một bài viết

Mặc định thì bài viết liên quan sẽ thay đổi khi bạn load lại trang, nhưng với bài viết A bạn muốn nó hiển thị cố định bài viết B là bài viết liên quan thì sử dụng code sau nhé:

function cswp_jetpack_append_related_post( $hits, $post_id ) {
if ($post_id == 1234) { // 1234 là ID bài viết A
array_unshift( $hits, array( 'id' => 5678 ) ); // 5678 ID bài viết B
array_pop( $hits );
}
return $hits;
}
add_filter( 'jetpack_relatedposts_filter_hits', 'cswp_jetpack_append_related_post', 20, 2 );

Nếu trong quá trình sử dụng có gặp bất cứ khó khăn nào thì hãy cho tôi biết ở phần comment nhé. Chúc các bạn thành công.

Tạo nút demo và download cho website và blog

Để tạo một bài viết review chuyên nghiệp các bạn cần tô sáng/tạo cho nút demo và download thật chuyên nghiệp. Đó là lý do cơ bản nhất để độc giả biết bạn chuyên nghiệp đến trình độ nào.

Vây để tạo được nút demo và download các bạn cần làm những gì ?

Đơn giản các bạn chỉ cần copy và dán vào html của website/blog của bạn thôi.

Đầu tiên các bạn cần vào chủ đề html của website/blog của bạn, sau đó vào chỉnh sửa html nếu là blog.

Sau đó các bạn tìm thẻ <head> và thêm đường dẫn script sau và sau thẻ <head> hoặc sau thẻ đóng </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Sau khi bạn thêm script trên rồi các bạn thêm css cho nội dụng demo và download nhé.

Code thêm trước thẻ </style> và sau thẻ <style>

Code css như sau:

#wrap { margin: 20px auto; text-align: center; 
#wrap br { display: none; }

.btn-slide, .btn-slide2 { 
position: relative; 
display: inline-block;
height: 50px; 
width: 200px; 
line-height: 50px; 
padding: 0;
border-radius: 50px; 
background: #fdfdfd; 
border: 2px solid #0099cc;
margin: 10px; 
transition: .5s; }

.btn-slide2 { 
border: 2px 
solid #efa666; } 

.btn-slide:hover {
background-color: #0099cc; } 

.btn-slide2:hover { 
background-color: #efa666; } 

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%; 
margin-left: -45px; 
background-color: #fdfdfd;
color: #0099cc; } 

.btn-slide2:hover span.circle2 { color: #efa666; } 

.btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; }

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { 
opacity: 1; 
left: 40px; }

.btn-slide span.circle, .btn-slide2 span.circle2 { 
display: block; 
background-color: #0099cc; 
color: #fff; 
position: absolute; 
float: left; 
margin: 5px; 
line-height: 42px; 
height: 40px; width: 40px; top: 0; left: 0;
transition: .5s; 
border-radius: 50%; }
.btn-slide2 span.circle2 { background-color: #efa666; } 

.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { 
position: absolute; 
left: 90px; 
text-align: center; 
margin: 0 auto; 
font-size: 16px; 
font-weight: bold; 
color: #30abd5; 
transition: .5s; 
}

.btn-slide2 span.title2, .btn-slide2 span.title-hover2 { 
color: #efa666; 
left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { 
left: 80px; 
opacity: 0; 
} 

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { 
color: #fff; }

Sau đó bạn lưu lại template nhé !

Sau đó các bạn vào phần bài đăng và tạo bài đăng mới.

Các bạn đăng bài bình thường và các bạn muốn hiển thị nút demo và download  ở đâu thì các bạn chuyển sang chế độ HTML và soạn nội dung demo và download như sau.

<div id="wrap">

<a class="mk-slide" href="https://vungve.com/" target="_blank">

  <span class="circle"><i class="fa fa-rocket"></i></span>

  <span class="title">Demo</span>

  <span class="title-hover">Click here</span>

</a>

<a class="mk-slide2" href="https://vungve.com/" target="_blank">

  <span class="circle2"><i class="fa fa-download"></i></span>

  <span class="title2">Download</span>

  <span class="title-hover2">Click here</span>

</a>

</div>

Trong đó https://vungve.com/ là link bạn muốn chuyển đến .

OK. Như vậy Web Hay đã hướng dẫn thành công cho các bạn muốn tạo nút demo và download cho blog cũng như website của mình. Chúc các bạn có những phút giây hữu ích và thành công !

Demo Click here Download Click here

Gỡ bỏ tận gốc bản quyền blogger/blogspot không bị chuyển hướng website

Hiện tại có rất nhiều template cho các bạn sự dụng phiên bản miễn phí, bới vậy đương nhiên nhà thiết kế template blog sẽ để lại thông tin bản quyền của họ. Chính vị bạn không muốn bỏ tiền ra mua nên bạn cảm thấy không vui mắt cho lắm khi trang của bạn lại gắn tên bản quyền người khác.
OK. Giờ Web Hay chia sẻ tới bạn cách mà bỏ bản quyền của họ đi để trang web của các bạn trông chuyên nghiệp hơn.
Lưu ý : có hay nên bỏ bản quyền thông tin tác giả ? Dù sao đó cũng là công sức của họ tạo ra.
Nhưng dù sao nó cũng là nhu cầu. Có bạn cần có bạn sẽ không cần và chấp nhận bỏ số tiền nhỏ ra mua nó.
Thông thường các bạn css cho nó dạng style='display:none;' hoặc các bạn visibility ở chế độ hidden thẻ bản quyền đó nó sẽ mất nhưng lập tức nó chuyển đến link mà họ đã đặt mặc định định về trang của họ. Bởi vậy mình sẽ chia sẻ các bạn bỏ bản quyền của họ luôn nó sẽ không bị chuyến hướng đi đâu cả.
Thông thường thông tin bản quyền của họ sẽ được mã hóa đoạn html nên bạn sẽ không biết chỗ nào để bỏ bản quyền đi.
Mã hóa html có dạng như sau :

\x65\x76\x61\x6c\x28\x66\x75\x6e\x63\x74\x69\x6f\x6e\x28\x70\x2c\x61\x2c\x63\x2c\x6b\x2c\x65\x2c\x64\x29\x7b\x65\x3d\x66\x75\x6e\x63\x74\x69\x6f\x6e\x28\x63\x29\x7b\x72\x65\x74\x75\x72\x6e\x28\x63\x3c\x61\x3f\x27\x27\x3a\x65\x28\x70\x61\x72\x73\x65\x49\x6e\x74\x28\x63\x2f\x61\x29\x29\x29\x2b\x28\x28\x63\x3d\x63\x25\x61\x29\x3e\x33\x35\x3f\x53\x74\x72\x69\x6e\x67\x2e\x66\x72\x6f\x6d\x43\x68\x61\x72\x43\x6f\x64\x65\x28\x63\x2b\x32\x39\x29\x3a\x63\x2e\x74\x6f\x53\x74\x72\x69\x6e\x67\x28\x33\x36\x29\x29\x7d\x3b\x69\x66\x28\x21\x27\x27\x2e\x72\x65\x70\x6c\x61\x63\x65\x28\x2f\x5e\x2f\x2c\x53\x74\x72\x69\x6e\x67\x29\x29\x7b\x77\x68\x69\x6c\x65\x28\x63\x2d\x2d\x29\x7b\x64\x5b\x65\x28\x63\x29\x5d\x3d\x6b\x5b\x63.....

Công việc của bạn bây giờ chỉ cần giải mã đoạn code trên thôi.

Đầu tiên các bạn cần vào quản trị blog và vào mẫu -- chỉnh sửa html.

Sau đó các bạn tìm Ctrl + F đoạn code sau eval , nếu không thấy các bạn tìm thẻ //<![CDATA[ này nhé.

Các bạn nhớ kỹ đoạn code được mã hóa dạng như trên nhé.

Sau đó các bạn copy đoạn code cho mình. Lưu ý Các bạn copy từ var _ đến dấu ; trước thẻ //]]> này nhé.

Sau đó các bạn tải cho mình phần mềm sau về và chạy file .exe nhé.

Download Click here

– Chọn tab decoder
– Dán toàn bộ mã hóa ở trên vào ô đầu tiên
– Sau đó chạy Run script
Tiếp đó bạn sẽ được một kết quả ở ô ngay dưới, copy toàn bộ kết quả đó
Dán thay thế toàn bộ vào ô bên trên (kết quả ở dưới dán thay thế ô bên trên) và chạy Run script đến khi nào không chạy thì thôi như hình dưới.

Ok. Lưu ý các bạn cú copy code bên dưới lên bên trên và chạy Run Script đến khi nào báo bên dưới không còn gì nhé.

Các bạn sao chép nó, truy cập https://beautifier.io/ và dán vào chạy beautify script sẽ được kết quả như dưới:

Vậy là gần xong rồi.
Sau đó các bạn copy đoàn code trên trang https://beautifier.io/ thay vào đoạn code html blog của các bạn.
Các bạn có thấy 2 ô mình kéo màu đỏ bên trên không ? Đó chính là link mà họ đặt để chuyển hướng. Giờ công việc của các bạn đơn giản rồi. Sửa luôn link bằng link của bạn hoặc chỉnh sửa style trực tiếp trên đoạn code bạn vừa giải mã html.

Thay đổi link cho blogspot xóa năm tháng ở đường dẫn

Có rất nhiều bạn không hài lòng về đường dẫn của blogspot cho lắm. Nhưng không sao chúng ta có thể thay đổi  link cho blogspot một cách đơn giản theo trình tự bên dưới.

Khi chúng ta tạo một bài viết xong thì đường dẫn của bạn sẽ có dạng như sau :
https://www.vungve.com/2020/04/chia-se-link-chon-template-dep-cho-blogspot.html

Hình ảnh minh họa link bạn muốn thay đổi

Các bạn thấy đường link/đường dẫn của nó thấy sao. 2020/04.....html

Giờ mình sẽ hướng dẫn các bạn Thay đổi link cho blogspot xóa năm tháng ở đường dẫn và bỏ đuôi .html cho đẹp mắt và chuyên nghiệp  nhé. Các bạn có thể seo cho từ khóa bất kỳ nhé. sau khi các bạn Thay đổi link cho blogspot xóa năm tháng ở đường dẫn thì nó sẽ được chuyển thành như sau:

https://www.vungve.com/2020/04/chia-se-link-chon-template-ep-cho.html

OK. bây giờ các bạn làm theo các bước cơ bản sau

1. Đầu tiên các bạn cần đăng nhập vào blogspot của bạn cần thay đổi link nhé. Tiếp đến các bạn vào chỉnh sửa HTML

2. Bước 2 các bạn tìm thẻ <head> chèn đoạn code ở bước 3 vào bước 2 >> sau thẻ head nhé, Hoặc các bạn có thể chèn trước thẻ </head> đều được. Nó đơn giản chỉ là một đoạn script thôi mà !

3. Bước 3 là đoạn code các bạn cần thêm vào trong thẻ <head>....đặt code vào đây ... </head>

<script type="text/javascript">
//<![CDATA[
// BloggerJS v0.3.1
// Copyright (c) 2017-2018 Kenny Cruz
// Licensed under the MIT License
var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();
//]]>
</script>

Giờ các bạn lưu template và quay lại trang blog của bạn và cảm nhận nhé ! Web hay chúc các bạn thành công !

Trong khi viết bài mới các bạn nhớ vào mục "Liên kết cố định" để thay đổi link cho đẹp mắt mà tiện bề cho các bạn seo từ khóa nhé."

Tạo popup quảng cáo cho blogspot/website

Hiện nay đa phần website/blog đều sử dụng popup quảng cáo để ưu tiên hàng đầu cho chuyên mục quảng cáo của họ. Khiến độc giả bắt buộc phải xem .

Phụ lục :

• 1. Lời nói đầu.
• 2. Tạo thư viện jquery.
• 3. Tạo Css và code cho nó hoạt động.

Nội dung Chi tiết bài viết :

1. Lời nói đầu.

Có rất nhiều phương thức truyền thông quảng cáo để doanh nghiệp quảng bá cho doanh nghiệp mình. Thế nhưng quảng cáo Pop-up là gì và nó có vẻ đang là một xu thế mà các doanh nghiệp đang sử dụng để tăng độ phủ của doanh nghiệp tới khách hàng hiệu quả. Vậy bạn đã biết cách để tạo ra một quảng cáo Pop-up “đánh” trúng vào khách hàng chưa?
Quảng cáo Pop-up là gì?
Pop-up là một dạng quảng cáo logo dưới chân màn hình có kích thước từ 1/8 đến 1/7 màn hình có nội dung và hình ảnh của đơn vị quảng cáo và có thời lượng 10s.

2. Tạo thư viện jquery.

Để ý website của bạn xem có đoạn jquery nào chưa nếu chưa thêm đoạn sau jquery sau vào trên thẻ </head> trong template blogspot cần hiện quảng cáo.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

Thông thường thì template blogspot nào cũng có đoạn jquery rồi. nên các bạn để ý kỹ nếu không có mới thêm vào không nó sẽ bị xung và không hoạt động.

OK. Bây giờ các bạn sang bước tiếp theo nhé !

3. Tạo Css và code cho nó hoạt động.

Các bạn tìm thẻ <body> và dán đoạn code bên dưới vào sau nó hoặc trước thẻ </body>. Miễn sao các bạn dán code bên trong là được. <body> code ở đây </body>

<style>

#qc-popup {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}

#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}

#boxview {background:#fff;border:8px solid #fff;max-width:600px;position:absolute;top:20%;left:28%;}

#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;    z-index: 99999;}

#closebox:before {font-family: FontAwesome;content:"\f00d";padding:5px 8px;background:#fff;color:#2c3e50;font-weight:normal;font-size:14px;}

#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}

#qc-box {max-width:600px;}
#qc-box img {width:100%}

</style>

<script type='text/javascript'>

 //<![CDATA[

 jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};

//]]>

</script>

 <script type='text/javascript'>

jQuery(document).ready(function($){if($.cookie(&#39;popup_facebook_box&#39;)!=&#39;yes&#39;){$(&#39;#qc-popup&#39;).delay(2500).fadeIn(&#39;fast&#39;);$(&#39;#closebox, #boxclose&#39;).click(function(){$(&#39;#qc-popup&#39;).stop().fadeOut(&#39;fast&#39;);});}});

</script>

    <div id='qc-popup'>

        <div id='boxclose'>
</div>

        <div id='boxview'>

           <div id='closebox'>
</div>

           <div id='qc-box'>

                <a href="#LINK">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyaRfpYncgBTKmRfup_1xVdllwLs1LI3g2nnuTOoG0sv2r0U9W3cHjdFpBgbDRfxyZdpZpa1l3w1DFlATBRkb0olwPxdK2_ZaUViXJNbASOJg_XnURcy2abM0_7K5wG1wBnlRyLg9WKE/s1600/thiet-ke-template-blogspot-ban-hang.jpg' width='100%'/>

                </a>

            </div>

            </div>


</div>

Thay đổi như sau:- Thay #LINK thành link liên kết quảng cáo.
- Link ảnh sau src thành Link ảnh bạn cần quảng cáo.
- max-width:600px thành kích thước chiều rộng quảng cáo phù hợp mà bạn muốn.
OK. Giờ các bạn lưu template lại và load lại trang cho nó và xem thành quả nhé !
Xong những chương trình khuyến mãi bạn có thể xóa đi, hoặc thay ảnh để đôi các chương trình khuyến mãi khác.

Tạo trang liên hệ cho blogspot đẹp và chuyên nghiệp

Bài viết này mình sẽ hướng dẫn các bạn tạo form liên hệ cho admin trên nền tảng blogspot. Với form này người dùng sẽ điền các thông tin vào form sau đó nhấn gửi thì blogspot sẽ gửi cho các Gmail đang là quản trị viên trên blog đó về hộp thư Gmail của mình.

Hình ảnh minh họa Tạo trang liên hệ đẹp cho blogspot

Nội dung bài viết : Tạo trang liên hệ đẹp cho blogspot

• 1. Css Và Tạo Code trang liên hệ đẹp cho blogspot
• 2. Tại sao nên dùng biểu mẫu liên hệ cho blogspot
• 3. Liên kết kiếm tiền cho blogspot

Phần nội dung cho mục lục

1. Css Và Tạo Code trang liên hệ đẹp cho blogspot

Bước 1: Các bạn vào blog của mình sau đó tìm đến trang và tạo 1 trang mới

Bước 2:Sau khi các bạn vào phần viết bài của trang thì các bạn chuyển qua tab HTML và dán đoạn code

<style type="text/css">

 .BsdCntct { float: none; position: relative; margin: 25px 0; margin-right: 9px }



.BsdCntct input, .BsdCntct textarea {

font-size: 16px;

padding: 15px 0;

display: block;

width: 100%;

border: none;

border-bottom: 1px solid #ddd } 




.BsdCntct input:focus, .BsdCntct textarea:focus { outline: 0 }



.BsdCntct label { color: #111; font-size: 16px; font-weight: 400; position: absolute; pointer-events: none; left: 0; top: 9px; transition: .2s ease all }



.barbsd { position: relative; display: block; width: 100% }



.barbsd:after, .barbsd:before { content: ''; height: 1px; width: 0; bottom: 1px; position: absolute; background: #00a16b; transition: .2s ease all }



 .barbsd:before { left: 50% } .barbsd:after { right: 50% }



.BsdCntct input:focus~.barbsd:after, .BsdCntct input:focus~.barbsd:before, .BsdCntct textarea:focus~.barbsd:after, .BsdCntct textarea:focus~.barbsd:before { width: 50% }



.lightbsd { position: absolute; height: 50%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: .5 }

 .BsdCntct input:focus~label, .BsdCntct input:valid~label, .BsdCntct textarea:focus~label, .BsdCntct textarea:valid~label { top: -19px; font-size: 14px; color: #00a16b } 




input#ContactForm1_contact-form-email-message { height: 150px }

 input#ContactForm1_contact-form-reset, input#ContactForm1_contact-form-submit { color: #fff !important; background: #00a16b; padding: 14px 25px; border-radius: 4px; border: none; outline: 0; cursor: pointer; transition: all .4s ease-in-out; text-transform: uppercase; float: left; font-weight: 700; font-size: 16px; margin: 10px 5px 0 0 }



 input#ContactForm1_contact-form-reset:hover, input#ContactForm1_contact-form-submit:hover { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19) } 



#ContactForm1_contact-form-error-message { float: right; color: #fff; font-size: 16px; font-weight: 700; border-radius: 3px; padding:0 5px } 



.post-body img{margin:0!important;display:inline;padding-left:10px;border-radius:0}



#ContactForm1_contact-form-success-message { float: right; background: #357A37; color: #fff; font-size: 16px; font-weight: 700; border-radius: 3px; padding:0 5px }



</style>



<form name="contact-form"> <div class="BsdCntct"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="lightbsd"></span> <span class="barbsd"></span> <label><i class="fa fa-user"></i> Tên của bạn</label> </div> <div class="BsdCntct"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="lightbsd"></span> <span class="barbsd"></span> <label><i class="fa fa-envelope"></i> Email của bạn</label> </div> <div class="BsdCntct"> <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="lightbsd"></span> <span class="barbsd"></span> <label><i class="fa fa-comment"></i> Tin nhắn</label> </div> <input id="ContactForm1_contact-form-submit" type="button" value="Gửi" /> <input id="ContactForm1_contact-form-reset" type="reset" value="Xóa" /> <br /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div>

</form>



<script src="https://www.blogger.com/static/v1/widgets/199156504-widgets.js" type="text/javascript"></script>



<script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1"; window['blogger_blog_id'] = '2389191237839036521'; BLOG_attachCsiOnload(''); } _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2389191237839036521', document.location.origin , '2389191237839036521'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), { 'contactFormMessageSendingMsg': 'Đang gửi...', 'contactFormMessageSentMsg': 'Tin nhắn của bạn đã được gửi.', 'contactFormMessageNotSentMsg': 'Không thể gửi tin nhắn. Vui lòng thử lại sau.', 'contactFormInvalidEmailMsg': 'Nhập địa chỉ email hợp lệ.', 'contactFormEmptyMessageMsg': 'Trường thông báo không được để trống.', 'title': 'Contact Form', 'blogId': '2389191237839036521', 'contactFormNameMsg': 'Tên của bạn', 'contactFormEmailMsg': 'Email của bạn', 'contactFormMessageMsg': 'Tin nhắn', 'contactFormSendMsg': 'Gửi', 'submitUrl': 'https://www.blogger.com/contact-form.do' }, 'displayModeFull'));

//]]>

Bước 4: Các bạn thay hết các ID Blog 2389191237839036521 thành ID Blog của các bạn.

Nếu không thấy email thì các bạn xem trong thư mục spam nhé, và đánh dấu thư đó không spam thì lần sau sẽ không xuất hiện trong thư mục spam nữa. Lưu ý: Để Form liên hệ hoạt động thì các bạn vui lòng không tắt JS mặc định của blog nhé!

Demo Click here

OK. Vậy là các bạn đã tạo thành công trang liên hệ đẹp và chuyên nghiệp cho blogspot của mình rồi nhé

2. Tại sao nên dùng biểu mẫu liên hệ cho blogspot

Hiện nay, nhà tiếp thị đang tìm đủ mọi cách nhằm thực hiện đủ mọi chiến dịch tiếp thị. Để từ đó, đem đến các hiệu quả tiếp thị: tăng tỷ lệ chuyển đổi, tối ưu SEO, tăng lượt nhấp,... nhằm thúc đẩy doanh thu bán hàng ngày một cao hơn.
Một nhân tố rất quan trọng để các chiến dịch tiếp thị có thể thực hiện được "đúng" - đúng người, đúng thời điểm, đúng thông điệp, đó chính là Email.
Thông qua việc nắm giữ trường thông tin Email, Nhà bán hàng có thể thực hiện được rất nhiều chiến dịch tiếp thị linh hoạt.
Một cách giúp Nhà bán hàng thu thập được email của khách hàng tự động và hiệu quả, đó chính la sử dụng các biểu mẫu liên hệ.
Ứng dụng Form Liên Hệ sẽ giúp Nhà bán hàng thực hiện điều đó!!!

3. Liên kết kiếm tiền cho blogspot

Khi bạn đã tạo được trang liên hệ rồi tức website/blog của bạn đã đạt 90% yêu cầu hãy bắt tay vào công việc kiếm tiền ngay bay giờ và ngay lúc này.

Demo Click here

Tạo mục lục trong bài viết blogspot

Để Tạo mục lục trong bài viết blogspot chúng ta làm trình tự như sau :

Mục Lục

• 1. CSS tạo khung
• 2. Javascript
• 3. Tạo mục lục trong bài viết blogspot

1. CSS Tạo Khung

#toc_container{background: #f9f9f9;border: 1px solid #aaa;padding: 0 10px;margin-bottom: 1em;font-size:95%;}p.toc_title,ul.toc_list {margin: 5px;padding-left: 0;}.toc_list li {list-style: none;margin-top: 0px; margin: 0!important;}#toc_container a {text-decoration: none;text-shadow: none;color: black;font-weight: 400;}#toc_container a:hover {color: #E9573F;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 18px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}

Bạn copy đoạn CSS dưới đây và chèn vào trước thẻ ]]></b:skin> hoặc </style>
Bạn  tùy chỉnh cho phù hợp với độ rộng của trang web/blog của bạn

2. Javascript cho mục lục

Bạn copy đoạn Javascript  dưới đây và chèn vào sau thẻ <head> hoặc trước thẻ </body>

<script>
var acc = document.getElementsByClassName(&quot;accordion&quot;);
var i;
for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle(&quot;active&quot;);
        this.nextElementSibling.classList.toggle(&quot;show&quot;);
  }
}
</script>

3. Bắt đầu code tạo mục lục trong bài viết

<div id="toc_container">

<div class="panel show">

<ul class="toc_list">

<li><a href="#1"> 1. css tạo khung</a></li>

<li><a href="#2"> 2. javascript</a></li>

<li><a href="#3"> 3. Tạo mục lục trong bài viết blogspot</a></li>

</ul>

</div>

</div>

<!-- Các bạn viết nội dung ở đây nhé -->

<h3 id='1'> 1. Css tạo khung </h3>

//nội dung phần 1 các bạn nhập vào đây

<h3 id='2'> 2. javascript </h3>

//nội dung phần 2 các bạn nhập vào đây

<h3 id='3'> 3. Tạo mục lục </h3>

//nội dung phần 3 các bạn nhập vào đây

OK vậy là hoàn thiện cách Tạo mục lục trong bài viết blogspot các bạn xuất bản bài viết và trải nghiệm nhé ! web hay Chúc các bạn thành công