Gacontapcode - Blog kiếm tiền Online, Thủ thuật làm web

Hướng dẫn tạo trang liên hệ với Google Form

noreply@blogger.com (Lợi Ryan) — Sun, 20 Sep 2020 12:16:00 +0000

Xin chào anh em, hôm nay sau khi mình thực hiện việc loại bỏ js mặc định của blogger thì phát hiện ra 1 vấn đề, đó là cái form liên hệ được tích hợp sãn trong blogspot không hoạt động được nữa. Đúng là con đường tối ưu web lắm gian nan thật :(( hết bị cái này đến cái khác.

Để giải quyết tình trạng trên mình lại lên mạng tìm hiểu các cách khác nhau, và chốt lại mình quyết định thay thế form của blogspot sang form của Google biểu mẫu. Lý do mình đưa ra quyết định này là vì mình thấy form biểu mẫu khá hay ho.

Ưu điểm của nó chính là vẫn có thông báo về mail và thứ 2 chính là nó cho phép chúng ta lưu trữ lại tất cả thông tin (bao gồm: ngày giờ, tên người gửi, email và nội dung) về 1 Sheet để quản lý, cái này mình khá ưng.

Nhược điểm chính là việc setup lúc đầu sẽ hơi khó khăn cho các bạn mới. Nhưng anh em đừng lo vì biết không đơn giản nên mình mới có hướng dẫn này cho anh em đây :)).

Follow theo mình nhé! Ok, Let's go. Để thêm contact form anh em làm như sau:

Bước 1: Đăng nhập vào Gmail → Đi đến Google Drive

Bước 2: Thay thế [Link contract form] [Code 1] [Code 2] [Code 3] lần lượt cho các vị trí được tô đỏ ở đoạn code bên dưới

<b:if cond="data:blog.url == data:blog.homepageUrl path &quot;p/contract-me.html&quot;">
<style>
input.contract-email-gacontapcode,
input.contract-name-gacontapcode,
textarea.contract-about-gacontapcode {
  padding:13px;
  width:100%;
  transition:.3s;
  outline:0;
  border-radius:10px;
  border:1px solid #ccc;
}
input.contract-email-gacontapcode {
  margin-top:10px;
}
textarea.contract-about-gacontapcode {
  margin-top:10px;
  height:270px;
}
button.button-send-gacontapcode {
  margin-top:10px;
  border-radius:10pc;
  border:none;
  background:linear-gradient(to right,#1dc8e7,#20e6b9);
  color:#fff;
  padding:12px 25px 8px 25px;
  box-shadow:0 1px 3px 0 rgba(60,64,67,.302),0 4px 8px 0 rgba(60,64,67,.149);
}
.thong-tin-lien-he {
  display:flex;
}
button.button-send-gacontapcode:hover {
  background:linear-gradient(to bottom right,#c90a6d,#ff48a0);
  transform:scale(1.05);
  transition:all .5s ease-in-out;
}
.main article h1 {
  display:none;
}
</style>
<div class="form-gacontapcode"> 
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){};" style="display: none;"></iframe> 
<div class="thong-tin-form"> 
<form action="Your link form/formResponse" id="form-gacontapcode" method="POST" target="hidden_iframe"> 
<div class="thong-tin-lien-he"> 
<input class="contract-name-gacontapcode" name="entry.Code 1" placeholder="Tên" required="" type="text" value="" />
</div> 
<div class="thong-tin-lien-he"> 
<input class="contract-email-gacontapcode" name="entry.Code 2" required="" type="text" value="" placeholder="Email"/>
</div>
<div class="thong-tin-lien-he"> 
<textarea class="contract-about-gacontapcode" name="entry.Code 3" placeholder="Nội dung" required="" type="text" value=""></textarea>
</div>
<div class="thong-tin-lien-he"> 
<button class="button-send-gacontapcode" onclick="buttonsubbmitwebseo()"> <span style="position:relative;top:-2px;">SEND</span></button> 
</div> 
</form> 
</div> 
</div> 
<script> function buttonsubbmitwebseo() { alert("Thư của bạn đã được gửi!"); window.location.assign("/p/contract-me.html")} </script>
</b:if>

Bước 3: Copy toàn bộ đoạn code bên trên → Quay trở lại Blogger và tạo 1 trang mới đặt tên là "Contact me" → Chuyển trình soạn thảo văn bản sang Html và dán toàn bộ đoạn code vừa copy được vào mục soạn thảo sau đó nhấn "Đăng trang"

Bước 4: Anh em quay trở lại Google Drive → Chọn vào File biểu mẫu Contact form ta vừa tạo ban nãy và làm như sau để tạo bảng tính lưu trữ lại tất cả thông tin của những người đã liên hệ

Giờ anh em copy toàn bộ đoạn code bên dưới này và tiếp tục đi tới bước 5:

function guiBieuMau(e){
  // Thay thế bằng địa chỉ email của bạn
  var email = "tencuaban@gmail.com";
  // Tiêu đề của email được gửi về
  var subject = "Thông báo mới tại.....";
  var s = SpreadsheetApp.getActiveSheet();
  var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0]; 
  var message = ""; 
  for ( var keys in columns ) {
    var key = columns[keys];
    if ( e.namedValues[key] && (e.namedValues[key] != "") ) {

      message += key + ' :: '+ e.namedValues[key] + "\n\n";
    }
  }
  MailApp.sendEmail(email, subject, message);
}

Bước 5: Để nhận được thông báo qua Email anh em quay lại Google Drive → Mở bảng tính ta vừa tạo ở Bước 4 và làm như sau:

Chọn tài khoản Gmail mà anh em đã dùng để tạo Contact Form và nhấn Next cho tới khi hoàn thành là được.

Bước 6: Giờ anh em mở trang "Contact me" ra và test thử đi, chúc anh em thành công. Xem Demo trang liên hệ sử dụng Google biểu mẫu

Để form được đẹp hơn anh em nên bổ sung thêm code Css

Hướng dẫn anh em hiển thị bình luận mới nhất của Blogger lên đầu

noreply@blogger.com (Lợi Ryan) — Sat, 19 Sep 2020 10:29:00 +0000

Mặc định blogger luôn ưu tiên hiển những thị bình luận cũ lên đầu phần Comment. Điều này gây ra rất nhiều phiền hà cho không ít anh em.

Bởi vì mỗi lần chúng ta muốn xem 1 bình luận mới thì lại phải kéo tút xuống phía dưới thì mới theo dõi được.

Nội dung bài viết

1.Hướng dẫn đưa bình luận mới nhất lên đầu
Cách 1.Sử dụng thuộc tính của Css
Cách 2.Sử dụng Jquery/ Javascript để điều hướng bình luận
Sử dụng Jquery
Sử dụng Javascript
2.Tổng kết

Với bài viết ít bình luận thì không nói, nhưng với những bài có số lượt bình luận cao thì việc kéo xuống thôi cũng đủ mệt rồi.

Mà blogger lại không cung cấp sẵn tính năng để ta có thể tùy ý sắp xếp bình luận theo ý muốn. Do đó, đây là một trong những thứ gây ức chế cho cả người viết bài và đọc giả xem bài viết.

Nếu đây cũng là những gì anh em đang gặp phải thì đừng bỏ lỡ chủ đề này. Trong bài viết hôm nay, mình sẽ hướng dẫn cho anh em 2 cách để khắc phục vấn đề trên. Ok! Let's go.

Hướng dẫn đưa bình luận mới lên đầu trong Blogger

Để có thể sắp xếp lại bình luận cũng khá đơn giản ta chỉ việc lợi dụng cách thức đảo ngược là đươc thôi. Còn làm thế nào để đảo ngược được bình luận anh em cứ theo dõi tiếp bài viết để biết cách nhé!

Thực ra, ban đầu mình cũng khá đau não cho vấn đề này, nên phải liên tục bổ sung vitamin bồi bổ trí óc để lao vào mày mò tìm giải pháp từ việc mò code, cho đến tham khảo các chủ đề thảo luận của những người đi trước.

Nhưng không may, cả mấy ngày trời mất ăn mất ngủ mình vẫn không tìm thấy giải pháp phù hợp :((

Lúc đó, mình nghĩ từ bỏ thôi làm gì có cách để đưa bình luận lên đầu mà kiếm. Và mình từ bỏ thật :)) mình tìm sang chủ đề khác là khắc phục tình trạng sử dụng hình ảnh theo định dạng mới mà công cụ Speed test của Google gợi ý (mình sẽ có bài viết riêng nói về chủ đề này).

Rất may sau đó, trong lúc tìm hiểu cách chuyển định dạng ảnh sang webp mình lại phát hiện ra có những website sử dụng mã nguồn của blogger nhưng vẫn có thể sắp xếp bình luận mới lên trên cùng. Như vậy là vẫn có cách...

Ngon, vậy là mình bắt đầu thử với các từ khóa tìm kiếm khác như: "How to get newest comment to the top for blogspot" thì may mắn cũng đã mỉm cười với mình.

Cuối cùng cũng đã tìm ra được cách giải quyết. Và giờ mình sẽ chia sẻ nó cho anh em, mình sẽ đi lần lượt từng cách 1 từ dễ trước sau đó phức tạp sau nhá :))

Cách 1: Sử dụng thuộc tính CSS

Với những anh em thường xuyên chỉnh sửa giao diện web, nếu để ý 1 tý thì sẽ nhận ra các bình luận của blogger thường được đặt trong thẻ .comment-thread ol

Vì thế để có thể thay đổi vị trí của các bình luận, cụ thể là đảo chiều bình luận cũ xuống cuối còn bình luận mới lên đầu thì ta chỉ cần lợi dụng thuộc tính sắp xếp của display: flex là được.

Anh em làm theo mình nhé! Bây giờ, tại giao diện quản trị của blogger anh em đi đến phần "Chỉnh sửa HTML" và search đoạn code sau:

#comments .comment-thread ol

Bổ sung thêm thuộc tính CSS như sau cho nó:

#comments .comment-thread ol {
    display: flex;
    flex-direction: column-reverse;
}

Nếu không tìm thấy thì anh em có thể copy đoạn code trên và paste nó bên trên thẻ đóng ]]></b:skin> sau đó lưu nó lại và kiểm tra kết quả.

Với những anh em không thích cách trên của mình thì có thể chọn cách làm thứ 2, ưu điểm của cách làm này là chúng ta có thể tùy ý lựa chọn chế độ xem bình luận theo khung thời gian mình muốn, mới nhất hoặc cũ nhất.

Cách 2: Sử dụng thuộc tính JS hoặc Jquery

Ở phần này, chúng ta sẽ lật ngược lại các child của thẻ .comments-content ol. Ok! Giờ tới bước thực hiện.

Bước 1: Bạn tìm tới đoạn code sau

<div class='comments-content'>

Sau khi tìm thấy, anh em tiếp tục chèn thêm đoạn code markup theo mẫu dưới này:

<div class='comments-content'>
    <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threadedCommentJs' />
    </b:if>

    <!-- HTML Markup go here -->
    <div class='sort-comment'>
        <span class='sort-title'>Sort by</span>
        <div class='sort-sel'>
           <select class='sort-option'>
              <option selected='selected' value='newest'>Newest</option>
              <option value='oldest'>Oldest</option>
           </select>
        </div>
    </div>
    <!-- End HTML Markup -->

    <div id='comment-holder'>
        <data:post.commentHtml/>
    </div>
</div>

Lưu ý: Anh em chỉ cần chèn phần code được mình đánh dấu

Bước 2: Thêm tiếp đoạn code Css sau ngay dưới vị trí kết thúc thẻ <div class='comments-content'>

<style>
.sort-comment {
  text-align:right;
}
.sort-comment .sort-title {
  font-size:14px;
  display:inline-block;
  margin-right:3px;
}
.sort-comment .sort-sel {
  display:inline-block;
  position:relative;
}
.sort-comment .sort-sel::after,
.sort-comment .sort-sel::before {
  position:absolute;
  content:"";
  right:7px;
  border-style:solid;
  border-width:4px;
  width:0;
  height:0;
}
.sort-comment .sort-sel::after {
  top:2px;
  border-color:transparent transparent #333;
}
.sort-comment .sort-sel::before {
  bottom:2px;
  border-color:#333 transparent transparent;
}
.sort-comment .sort-sel .sort-option {
  cursor:pointer;
  background:#fff;
  border:1px solid #aaa;
  padding:2px 20px 2px 7px;
  color:#656565;
  font-size:14px;
  overflow:hidden;
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  white-space:nowrap;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -moz-appearance:window;
  -webkit-appearance:none;
  outline:0;
}
</style>

Bước 3: Giờ anh em chọn tiếp 1 trong 2 đoạn code sau và thêm nó bên dưới đoạn code Css bên trên.

Sử dụng Jquery:

Nhớ thêm thư viện Jquery nếu bạn chưa có, giờ bạn copy và dán đoạn code bên dưới thẻ đóng /style bên trên.

<script>//<![CDATA[
$.fn.reverseChildren = function() {
    return this.each(function() {
        var $this = $(this);
        $this.children().each(function() {
            $this.prepend(this);
        });
    });
};
$(".comments-content ol").reverseChildren();
$(".sort-option").on("change", function() {
$(".comments-content ol").reverseChildren();
})
//]]></script>

Sử dụng Javacript:

Nếu anh em không thích dùng Jquery thì có thể sử dụng đoạn code sau:

<script>//<![CDATA[
HTMLElement.prototype.reverseChildren = function() {
    for (var c = this.children, d = 0; d < c.length; d++) this.insertBefore(c[d], this.firstChild)
}
var _cmt = document.querySelector(".comments-content ol");
_cmt.reverseChildren();
document.getElementsByClassName("sort-option")[0].addEventListener("change", function() {
    _cmt.reverseChildren();
})
//]]></script>

Bước 4: Cuối cùng chúng ta lưu mẫu lại và kiểm tra thành quả.

Tổng kết

Cách làm đơn giản chỉ vài bươc như vậy thôi, tuy nhiên nó thật sự tốt đối với trải nghiệm của khách hàng. Ai mà chẳng muốn đọc được bình luận mới nhất hay vì bình luận cũ từ vài năm trước :))

Hi vọng thủ thuật nhỏ này có thể giúp ích cho anh em. Còn giờ thì bái bai hẹn gặp lại anh em trong bài viết kế tiếp (｀ 3′)

Ngoài ra, anh em cũng nên đọc lại bài viết những tính năng cơ bản trong blogger để biết thêm về cách quản lý các bình luận trên blogspot.

Làm thế nào để thêm mã Lazyload Analytics cho Website

noreply@blogger.com (Lợi Ryan) — Fri, 18 Sep 2020 06:30:00 +0000

Hello! Chào anh em, lần này Ryan muốn chia sẻ với anh em một phương pháp giúp cải thiện tốc độ load của website, bằng cách trì hoãn tải Google Analytics.

Analytics rất có lợi cho việc xây dựng và phát triển website, vì chúng ta có thể theo dõi, đánh giá nhanh chóng các hoạt động của khách hàng. Từ đó cải thiện web nhằm mang lại cho khách trải nghiệm tốt hơn.

Tuy nhiên, không phải vì là sản phẩm của Google mà các đoạn mã điều được tối ưu. Dù mang lại lợi ích lớn nhưng chính đoạn mã này lại là 1 trong những nguyên nhân làm cho website của chúng ta trở nên ì ạch :))

Vậy làm thế nào để vẫn có thể chạy Analytic mà không làm ảnh hưởng đến tốc độ của website. Đó chính là mục đích của bài viết này, anh em làm theo hướng dẫn bên dưới này của Ryan là được:

» Dành cho những anh em vẫn chưa biết đến lợi ích của Google Analytics, anh em nên tìm và đọc lại bài viết Hướng dẫn thêm mã Analytics cho Website mình đã có phân tích khá kỹ.

Hướng dẫn thêm mã Lazyload Google Analytics cho Website

Bước 1: Đăng nhập vào blogger

Bước 2: Truy cập vào phần "Chỉnh sửa HTML"

Bước 3: Tìm đến đoạn mã

/head

Bước 4: Copy và dán đoạn code sau vào phía trên đoạn mã vừa tìm được

<script>//<![CDATA[
//LazyLoadAnalytics
var lazyanalytics=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanalytics||0!=document.body.scrollTop&&!1===lazyanalytics)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//www.googletagmanager.com/gtag/js?id=UA-171682603-1";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalytics=!0)},!0);
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-171682603-1');
//]]></script>

Thay mã Google Analytics của anh em vào những chỗ được bôi đỏ

Đoạn code này sẽ ngăn Google Analytics tải ngay khi load web, mã chỉ được tải khi có sự kiện Scroll chuột xảy ra.

Hướng dẫn thêm thẻ robot.txt cho website Blogger

noreply@blogger.com (Lợi Ryan) — Fri, 18 Sep 2020 04:30:00 +0000

Hello! Chào anh em, trong bài viết lần này Ryan sẽ hướng dẫn cho anh em cách để thêm mã robot tùy chỉnh cho website blogspot và làm thế nào để thiết lập thẻ robot.txt cho đúng.

Mục đích của việc thêm mã robot.txt là để giúp chúng ta khai báo với công cụ tìm kiếm nên lập chỉ mục thành phần nào trên website còn những thành phần nào không cần lập chỉ mục.

Việc này là cần thiết, vì anh em sẽ muốn ẩn đi một vài thứ đặc biệt trên website do mục đích cá nhân. Đồng thời khi thêm thẻ robot cho web cũng giúp cho các công cụ tìm kiếm dễ dàng tìm thấy website của chúng ta hơn.

Nếu thêm mã sai hay thiết lập không chính xác có thể khiến cho website của chúng bị các công cụ tìm kiếm bỏ qua mà không được lập chỉ mục, như vậy rất có hại cho SEO vì web không được hiển thị trên các trang kết quả tìm kiếm của Google, Bing, Coccoc,...

Ok! Không luyên thuyên nữa giờ chúng ta bắt đầu luôn thôi.

Hướng dẫn thêm mã Robot.txt cho Blogspot

Bước 1: Như thường lệ anh em đăng nhập vào trang quản trị của Blogger

Bước 2: Tiếp đó anh em đi đến phần "Cài đặt"

Bước 3: Kéo xuống phía dưới và tìm tới mục "Trình thu thập thông tin và lập chỉ mục"

Bước 4: Anh em làm theo hướng dẫn của mình nhé! Chuyển công cụ robot tùy sang chế độ mở.

Nhấp vào thẻ " Robots.txt tùy chỉnh" anh em copy và paste đoạn code sau vào.

User-agent: Mediapartners-Google
Allow: /
Disallow: /search

User-agent: *
Allow: /
Allow: /search/label/
Disallow: *archive.html
Disallow: *?updated-max*

Sitemap: https://www.gacontemplate.com/sitemap.xml
Sitemap: https://www.gacontemplate.com/atom.xml?redirect=false&start-index=1&max-results=500

Thay thế đường link được bôi màu đỏ thành link website của bạn

Thẻ tiêu đề robot tùy chỉnh ta cũng chuyển sang chế độ mở.

" Các thẻ dùng cho trang tìm kiếm và lưu trữ", " Các thẻ dùng cho bài đăng và trang" anh em thiết lập như hình dưới này.

Tổng kết

OK! Bên trên là hướng dẫn làm thế nào có thể thêm mã robot.txt cho website, nếu anh em có bất kỳ thắc mắc hay câu hỏi nào cần được giải đáp thì nhớ để lại bình luận bên dưới, mình sẽ hồi đáp cho anh em sớm nhất có thể.

Trong bài viết kế tiếp mình sẽ tiếp tục chia sẻ đến cho anh em bộ thẻ Meta được tối ưu tốt cho SEO. Còn giờ thì bái bai và hẹn gặp lại anh em trong bài viết kế tiếp ♪(´▽｀).

Hơn 650 ký tự đặc biệt thường dùng trong code html

noreply@blogger.com (Lợi Ryan) — Mon, 10 Aug 2020 09:50:00 +0000

Với những anh em thiết kế website trên nền tảng html, hẳn đã không ít lần bỡ ngỡ vì đôi lúc các đoạn code của mình lưu lại xong thì nó lại được mã hóa sang các ký tự lạ.

Dẫn đến việc gặp khó khăn trong chỉnh sửa code vì không biết rõ các ký tự mới đó là gì.

Có khi ta xóa nhầm mất 1 đoạn hay cả đoạn code vì nghĩ nó không thiết hoặc có lúc ta lại quên bổ sung đoạn code bị mất làm cho 1 vài chức năng của website không hoạt động và tệ hơn website có thể bị vỡ bố cục.

Ví dụ: Ta có đoạn code sau

<a href="https://www.gacontapcode.com"></a>

Khi bạn đánh đoạn code trên ở dạng văn bản trong phần soạn thảo bài đăng của Blogger, thì khi chúng ta chuyển sang dạng soạn thảo bằng html sẽ nhìn thấy là đoạn code vừa rồi đã được thay đổi thành

&lt;a href="https://www.gacontapcode.com"&gt;&lt;/a&gt;

Đâu phải ai cũng hiểu nó đâu đúng không, thề luôn mình lúc đầu nhìn thấy cũng hoảng lắm giờ thì đỡ rồi :))

Cho nên để giúp anh em dễ dàng hình dung các đoạn code trên biểu trưng cho ký tự nào trong html, hôm nay Ryan xin phép giới thiệu với anh em bảng mã bao gồm hơn 650 ký tự thường dùng trong thiết kế website html để anh em sử dụng và làm quen dần.

Anh em có thể bookmark trang này lại để tiện xem lại khi cần ^^

left single quote		‘	‘
right single quote		’	’
single low-9 quote		&sbquo;	‚
left double quote		“	“
right double quote		”	”
double low-9 quote		&bdquo;	„
dagger		&dagger;	†
double dagger		&Dagger;	‡
per mill sign		&permil;	‰
single left-pointing angle quote		&lsaquo;	‹
single right-pointing angle quote		&rsaquo;	›
black spade suit		&spades;	♠
black club suit		&clubs;	♣
black heart suit		&hearts;	♥
black diamond suit		&diams;	♦
overline, = spacing overscore		&oline;	‾
leftward arrow		←	←
upward arrow		↑	↑
rightward arrow		→	→
downward arrow		↓	↓
trademark sign	™	™	™
unused	-
horizontal tab
line feed
unused
space
exclamation mark	!		!
double quotation mark	"	"	“
number sign	#		#
dollar sign	$		$
percent sign	%		%
ampersand	&	&	&
apostrophe	'		‘
left parenthesis	(		(
right parenthesis	)		)
asterisk	*		*
plus sign	+		+
comma	,		,
hyphen	-		–
period	.		.
slash	/	&frasl;	/
digits 0-9	0- 9
colon	:		:
semicolon	;		;
less-than sign	<	<	<
equals sign	=		=
greater-than sign	>	>	>
question mark	?		?
at sign	@		@
uppercase letters A-Z	A- Z
left square bracket	[		[
backslash	\
right square bracket	]		]
caret	^		^
horizontal bar (underscore)	_		_
grave accent	`		`
lowercase letters a-z	a- z
left curly brace	{		{
vertical bar	\|		\|
right curly brace	}		}
tilde	~		~
unused	-
en dash		–	–
em dash		—	—
unused	-
nonbreaking space
inverted exclamation	¡	¡	¡
cent sign	¢	¢	¢
pound sterling	£	£	£
general currency sign	¤	¤	¤
yen sign	¥	¥	¥
broken vertical bar	¦	¦ or &brkbar;	¦
section sign	§	§	§
umlaut	¨	¨ or &die;	¨
copyright	©	©	©
feminine ordinal	ª	ª	ª
left angle quote	«	«	«
not sign	¬	¬	¬
soft hyphen
registered trademark	®	®	®
macron accent	¯	¯ or &hibar;	¯
degree sign	°	°	°
plus or minus	±	±	±
superscript two	²	²	²
superscript three	³	³	³
acute accent	´	´	´
micro sign	µ	µ	µ
paragraph sign	¶	¶	¶
middle dot	·	·	·
cedilla	¸	¸	¸
superscript one	¹	¹	¹
masculine ordinal	º	º	º
right angle quote	»	»	»
one-fourth	¼	¼	¼
one-half	½	½	½
three-fourths	¾	¾	¾
inverted question mark	¿	¿	¿
uppercase A, grave accent	À	À	À
uppercase A, acute accent	Á	Á	Á
uppercase A, circumflex accent	Â	Â	Â
uppercase A, tilde	Ã	Ã	Ã
uppercase A, umlaut	Ä	Ä	Ä
uppercase A, ring	Å	Å	Å
uppercase AE	Æ	Æ	Æ
uppercase C, cedilla	Ç	Ç	Ç
uppercase E, grave accent	È	È	È
uppercase E, acute accent	É	É	É
uppercase E, circumflex accent	Ê	Ê	Ê
uppercase E, umlaut	Ë	Ë	Ë
uppercase I, grave accent	Ì	Ì	Ì
uppercase I, acute accent	Í	Í	Í
uppercase I, circumflex accent	Î	Î	Î
uppercase I, umlaut	Ï	Ï	Ï
uppercase Eth, Icelandic	Ð	Ð	Ð
uppercase N, tilde	Ñ	Ñ	Ñ
uppercase O, grave accent	Ò	Ò	Ò
uppercase O, acute accent	Ó	Ó	Ó
uppercase O, circumflex accent	Ô	Ô	Ô
uppercase O, tilde	Õ	Õ	Õ
uppercase O, umlaut	Ö	Ö	Ö
multiplication sign	×	×	×
uppercase O, slash	Ø	Ø	Ø
uppercase U, grave accent	Ù	Ù	Ù
uppercase U, acute accent	Ú	Ú	Ú
uppercase U, circumflex accent	Û	Û	Û
uppercase U, umlaut	Ü	Ü	Ü
uppercase Y, acute accent	Ý	Ý	Ý
uppercase THORN, Icelandic	Þ	Þ	Þ
lowercase sharps, German	ß	ß	ß
lowercase a, grave accent	à	à	à
lowercase a, acute accent	á	á	á
lowercase a, circumflex accent	â	â	â
lowercase a, tilde	ã	ã	ã
lowercase a, umlaut	ä	ä	ä
lowercase a, ring	å	å	å
lowercase ae	æ	æ	æ
lowercase c, cedilla	ç	ç	ç
lowercase e, grave accent	è	è	è
lowercase e, acute accent	é	é	é
lowercase e, circumflex accent	ê	ê	ê
lowercase e, umlaut	ë	ë	ë
lowercase i, grave accent	ì	ì	ì
lowercase i, acute accent	í	í	í
lowercase i, circumflex accent	î	î	î
lowercase i, umlaut	ï	ï	ï
lowercase eth, Icelandic	ð	ð	ð
lowercase n, tilde	ñ	ñ	ñ
lowercase o, grave accent	ò	ò	ò
lowercase o, acute accent	ó	ó	ó
lowercase o, circumflex accent	ô	ô	ô
lowercase o, tilde	õ	õ	õ
lowercase o, umlaut	ö	ö	ö
division sign	÷	÷	÷
lowercase o, slash	ø	ø	ø
lowercase u, grave accent	ù	ù	ù
lowercase u, acute accent	ú	ú	ú
lowercase u, circumflex accent	û	û	û
lowercase u, umlaut	ü	ü	ü
lowercase y, acute accent	ý	ý	ý
lowercase thorn, Icelandic	þ	þ	þ
lowercase y, umlaut	ÿ	ÿ	ÿ
Alpha	Α		Α
alpha	α		α
Beta	Β		Β
beta	β		β
Gamma	Γ		Γ
gamma	γ		γ
Delta	Δ		Δ
delta	δ		δ
Epsilon	Ε		Ε
epsilon	ε		ε
Zeta	Ζ		Ζ
zeta	ζ		ζ
Eta	Η		Η
eta	η		η
Theta	Θ		Θ
theta	θ		θ
Iota	Ι		Ι
iota	ι		ι
Kappa	Κ		Κ
kappa	κ		κ
Lambda	Λ		Λ
lambda	λ		λ
Mu	Μ		Μ
mu	μ		μ
Nu	Ν		Ν
nu	ν		ν
Xi	Ξ		Ξ
xi	ξ		ξ
Omicron	Ο		Ο
omicron	ο		ο
Pi	Π		Π
pi	π		π
Rho	Ρ		Ρ
rho	ρ		ρ
Sigma	Σ		Σ
sigma	σ		σ
Tau	Τ		Τ
tau	τ		τ
Upsilon	Υ		Υ
upsilon	υ		υ
Phi	Φ		Φ
phi	φ		φ
Chi	Χ		Χ
chi	χ		χ
Psi	Ψ		Ψ
psi	ψ		ψ
Omega	Ω		Ω
omega	ω		ω
password dot	●		●
bullet	•		•

Tổng kết

Bên trên là bảng tổng hợp các ký tự thường dùng khi thiết kế website với html, mong rằng những kiến thức này hữu ích với anh em. Còn giờ bái bai và hẹn gặp lại mọi người trong bài viết tới :))

Hướng dẫn thêm mã Google Analytics cho Blogger

noreply@blogger.com (Lợi Ryan) — Thu, 23 Jul 2020 02:48:00 +0000

Hello, anh em! Hôm nay, Ryan sẽ cùng anh em tìm hiểu về 1 công cụ marketing miễn phí nhưng vô cùng mạnh mẽ, đến từ nền tảng tiếp thị của Google, và làm thế nào để thêm công cụ Google Analytics vào website.

Nếu trong đầu anh em đang có những câu hỏi, như:

Google Analytics là gì?
Tại sao chúng ta phải gắn nó vào website?
Thêm nó vào web như thế nào?
Cuối cùng làm thế nào để tận dụng công cụ này cho hiệu quả?

thì không sao cả, đây cũng là điều mình từng trải qua. Vì thế, bài viết này chính là những gì anh em cần.

Nội dung bài viết

1.Google Analytics là gì?
2.Tại sao nên sử dụng GA cho website?
3.Làm thế nào để thêm mã GA cho Blogger?
4.Hướng dẫn sử dụng GA
5.Tổng kết

Ok! Để giải đáp cho những câu hỏi trên, mình sẽ có những giải thích ngắn gọn về Google Analytics trong phạm vi hiểu biết, sau đó chúng ta sẽ cùng nhau thực hiện công việc chính là gắn mã GA vào website nhé!

Trước hết chúng ta sẽ cùng tìm hiểu:

Google Analytics là gì?

Google Analytics (hay gọi tắt là GA) là 1 công cụ phân tích mạnh mẽ, cho phép chúng ta có cái nhìn tổng thể, rõ ràng về những hành vi của khách hàng dưới dạng số liệu. Từ đó, đưa ra các phương án thay đổi phù hợp để tăng trải nghiệm của khách hàng và cải thiện mức độ chuyển đổi.

Tại sao nên sử dụng Google Analytics cho website?

Dù bạn là 1 doanh nghiệp, hay chỉ đơn thuần là 1 cá nhân. Nếu bạn đang sở hữu 1 blog hoặc 1 website nào đó, thì mình tin bạn sẽ muốn sử dụng GA, để có thể hiểu được đọc giả cũng như khách hàng của bạn.

Khi website của bạn có GA, bạn sẽ biết được:

Có bao nhiêu khách hàng ghé thăm website?
Họ đến từ đâu?
Website của bạn đã thân thiện với thiết bị di động hay chưa?
Khách hàng tìm thấy web của bạn từ nguồn nào?
Cách tiếp cận nào đang thu hút được nhiều khách nhất?
Trang nào trên website được khách hàng quan tâm nhiều nhất?
Có bao nhiêu khách hàng đã chuyển đổi thành khách hàng tiềm năng?
Khách hàng hứng thú với điều gì nhất?
Nội dung nào được yêu thích nhất?
vân..vân..và..vân.vân

Sử dụng công cụ GA 1 cách thành thạo, bạn sẽ có được nhiều hơn những câu trả lời mà bạn muốn biết, như: hành vi của khách hàng, hiệu quả chiến dịch marketing bạn đang áp dụng, cũng như khả năng chuyển đổi của website.

Túm lại thằng này dùng ngon :)) nên anh em chịu khó tìm hiểu tí nhé!

Làm thế nào để thêm mã Google Analytics cho Blogger?

Thêm Google Analytic vào Blogger đơn giản với 4 bước:

Bước 1: Đăng ký tài khoản Google Analytics

Nhấp chọn vào "Start for Free" để tạo tài khoản mới

Đăng nhập bằng Gmail bất kỳ

Lưu ý về Email đăng ký GA
Bạn nên sử dụng email mà chỉ bạn mới có quyền truy cập, bởi vì bạn sẽ không muốn người khác có thể toàn quyền kiểm soát tình hình website. Nếu chẳng may bạn và người ta không làm việc với nhau nữa, thì xác định dữ liệu phân tích của GA hoàn toàn có thể bị mang đi

Ở trang kế tiếp chúng ta chọn vào nút "Thiết lập miễn phí"

Nhập tên tài khoản của bạn → nhấn vào nút "Tiếp tục"

Lựa chọn nền tảng bạn muốn phân tích → nhấn vào nút "Tiếp tục"

Bổ sung thông tin cần thiết như: Tên website, địa chỉ website, lĩnh vực, múi giờ → sau đó nhấn vào nút "Tiếp tục" để hoàn thành đăng ký.

Bước 2: Lấy mã ID theo dõi Analytics

Ngay tab "Quản trị viên" bạn chọn vào tên website vừa tạo tiếp tục tìm tới phần "Thông tin theo dõi" chọn tiếp vào "Mã theo dõi". Giờ nhìn qua phần mở rộng bên phải bạn sẽ nhìn thấy Mã theo dõi có dạng "Ux - xxxx"

Copy đoạn mã theo dõi này và tiếp tục thực hiện bước 3

Bước 3: Đăng nhập vào Blogger → chọn blog/ website bạn muốn gắn mã theo dõi

Bước 4: Ở góc bên phải trang quản trị chọn vào tính năng "Cài đặt" → nhìn vào phần mở rộng bên phải tìm đến dòng "Mã thuộc tính Google Analytics" nhấp vào nó → tiếp tục Paste ID bạn đã lấy được ở bước 2 vào → cuối cùng nhấn vào "Lưu" để cập nhật.

Ok! Như vậy là mình đã hướng dẫn cho anh em cách để thêm mã Google Analytics vào Blogger thành công. Để công cụ bắt đầu phân tích được dữ liệu của website cần mất từ 24h - 48h.

Trong lúc chờ đợi, anh em mình sẽ cùng nhau tìm hiểu tiếp về cách sử dụng công cụ này sao cho hiệu quả.

Lưu ý: Với nếu anh em đã điền mã theo dõi mà vẫn chưa thấy cập nhật từ Google Analytics, đó có thể là do Template mà mọi người chọn không được thêm sẵn mã thuộc tính Analytics.

Lúc này mọi người có thể chọn giải pháp là copy toàn bộ đoạn code trong mục "Thẻ trang web toàn cầu" và Paste nó lên trước thẻ /head sau đó lưu mẫu lại hoặc chọn cách thêm đoạn mã sau
  
<b:if cond='data:blog.analyticsAccountNumber'>
<b:include data='blog' name='google-analytics'/>
</b:if>
đoạn code này cũng đặt bên trên thẻ /head

Xem thêm cách để thêm mã Lazyload Google Analytics giúp tăng tốc website.

Hướng dẫn sử dụng Google Analytics

Để sử dụng Analytics cho hiệu quả, anh em chú ý tuân thủ 3 phần sau:

Tạo và gắn mã theo dõi (tracking) lên website
Thiết lập các mục tiêu
Xem, phân tích và đánh giá dữ liệu

Trước hết chúng ta sẽ tìm hiểu về các thành phần chính trong trang quản trị.

Cấu trúc tài khoản GA

Một tài khoản GA sẽ bao gồm 3 thành phần chính, như: Tài khoản, Thuộc tính và Chế độ xem. Như hình dưới này.

Thế 3 phần này là gì? Mình sẽ giải thích 1 cách ngắn gọn cho anh em dễ hiểu:

1.Tài khoản:

Cái này không phải là tài khoản gmail của chúng ta đâu nhé! Vì với mỗi 1 tài khoản gmail anh em có thể tạo ra 100 tài khoản GA lận. Do đó, chúng ta chỉ nên xem nó như 1 Project quản lý các đối tượng ta cần theo dõi.

2.Thuộc tính:

Chính là website hoặc ứng dụng mà Google Analytics sẽ tiến hành thu thập dữ liệu. Với mỗi 1 tài khoản GA ta có thể tạo và quản lý 50 thuộc tính.

3.Chế độ xem:

Cho phép chúng ta thiết lập bộ lọc để phân tích các dữ liệu cần được theo dõi. Với mỗi 1 thuộc tính ta có thể thiết lập tối đa 25 chế độ xem.

Thiết lập mục tiêu

Mỗi 1 phần bao gồm rất nhiều thành phần nhỏ khác, anh em có thể tự tìm hiểu thêm. Sau khi đã hiểu hơn về một số khái niệm cơ bản. Bây giờ, chúng ta sẽ cùng nhau thực hiện bước "Thiết lập mục tiêu" cho Google Analytics.

Mục đích của việc này là để ta có thể theo dõi tỷ lệ chuyển đổi của 1 sự kiện nào đó diễn ra trên website. Ví dụ:

Khi bạn có 1 website thu thập data khách hàng tiềm năng qua việc để lại thông tin, bạn có thể theo dõi tỷ lệ chuyển đổi bằng việc tạo ra 1 trang cám ơn (xác nhận đăng ký) và gắn mã theo dõi tại đây.

Hay bạn có 1 website bán hàng bạn cũng có thể theo dõi tỷ lệ chuyển đổi bằng việc gắn mã theo dõi vào trang xác nhận đặt hàng thành công, hoặc trang điền thông tin vận chuyển.

Chúng ta chỉ có thể tạo tối đa 20 mục tiêu. Nên anh em cần phải cân nhắc thật cẩn thận, trong quá tạo ra những mục tiêu. Hãy chắc rằng nó có ích cho sự phát triển của website. Ok! Để "Thiết lập mục tiêu" ta làm như sau:

Bước 1: Nhấp vào "Mục tiêu" bạn sẽ tìm thấy nó ở phần "Chế độ xem"

Bước 2: Tạo mục tiêu mới

Bước 3: Chọn mục tiêu phù hợp rồi nhấn vào "Tiếp tục"

Bước 4: Nhập Url/ đường dẫn của trang bạn muốn theo dõi và nhấn vào "Lưu" để hoàn tất.

Xong, giờ chúng ta sẽ tìm hiểu tiếp phần thống kê báo cáo dữ liệu phân tích từ website.

Xem, phân tích và đánh giá dữ liệu

Để bắt đầu chúng ta sẽ đi đến phần giao diện chính của GA bằng cách nhấp vào "Trang chủ". Anh em xem hình bên dưới này.

Ok! Mình sẽ lần lượt giải thích từng phần được đánh dấu để anh em dễ hình dung.

1.Hierarchy Navigation

Cho phép ta dễ dàng chuyển đổi qua lại giữa các tài khoản GA

2.Tài khoản, thiết lập và thông báo

Đây là nơi hiển thị tài khoản google mà bạn dùng để tạo tài khoản Google Analytics, Google Console và là nơi thông báo tình trạng của các thuộc tính.

3.Menu báo cáo

Tại đây sẽ có 5 mục chính mà ta cần chú ý đó là: Thời gian thực (Real-time), Đối tượng (Audience), Thu nạp (Acquisition), Hành vi (Behavior) và Chuyển đổi (Conversion)

Audience: Cho bạn biết tất cả mọi thứ mà bạn muốn hiểu về khách hàng của bạn, như: Nhân khẩu học, Sở thích, Vị trí địa lý, Ngôn ngữ, Hành vi, Thiết bị họ sử dụng.
Acsquisition: Cho bạn biết tất cả thông tin liên quan đến lưu lượng khách truy cập vào website, như: Mạng xã hội, Quảng cáo Adwords, Các trang giới thiệu hay từ Trang tìm kiếm.
Behavior: Cho phép bạn đo lường hành vi của khách hàng, như: Trang nào được tìm kiếm nhiều, Số lần xem trang,Thời gian ở lại trên 1 trang, Tỷ lệ thoát trang (Bounce Rate), Tỷ lệ thoát web (Exit Rate). Ngoài ra bạn còn có thể, kiểm tra tốc độ website và nhận đề suất từ google để cải thiện tốc độ nữa.
Conversion: Bạn có thể nhìn thấy được nơi mà khách hàng đã thực hiện chuyển đổi, số lượng khách hàng đã thực hiện hành vi click và hoàn thành 1 sự kiện nào đó (mua hàng/ điền form/ Click chuyển sang 1 url mới)

Lưu ý: Với báo cáo chuyển đổi bạn chỉ xem được dữ liệu khi bạn đã thiết lập Mục tiêu cho Google Analytics

Ý nghĩa của 1 số thuật ngữ:

Bounce Rate: Biểu thị phần trăm số người truy cập vào 1 trang nào đó trên web đọc nội dung xong và thoát luôn mà chưa thực hiện bất cứ hành vi nào. Ở đây nó có thể bị ảnh hưởng bởi 2 yếu tố: Nội dung kém chất lượng hoặc Hình thức bố trí của website.

Exit Rate: Biểu thị phần trăm khách hàng đã vào website xem ít nhất 2 nội dung trên web và thoát khỏi web sau đó.

4.Thời gian

Cho phép ta tùy chỉnh khung thời gian muốn xem thống kê các dữ liệu trên website, nhờ đó có thể đưa ra sự so sánh phù hợp cho từng thời điểm.

5.Cấu hình phân đoạn

Đây là tập con của Google Analytics nhưng anh em chưa cần để ý đến nó, vì thằng này hơi chuyên sâu 1 chút.

6.Các tab báo cáo

Cho phép ta xem nhiều định dạng khác nhau trên cùng 1 dữ liệu thống kê.

7.Biểu đồ

Thể hiện dữ liệu dưới dạng biểu đồ

8.Bảng thống kê

Thể hiện dữ liệu của website với nhiều tùy chỉnh nâng cao.

Tổng kết

Ok! Bên trên là những chia sẻ về những gì mình biết về Google Analytics. Chúc bạn áp dụng GA hiệu quả vào việc phát triển website cũng như công việc. Hẹn gặp lại anh em trong bài viết tiếp theo, còn giờ thì bái bai (～￣▽￣)～

Tài liệu tham khảo

Google Analytics - Wikipedia

Sử dụng Analytic với Blogger - Google Support

Hướng dẫn bắt đầu sử dụng Analytics - Google Support

Analytics Academy - Google Academy

Marketingplatform - Google Flatform

Đổi đường dẫn của trang và bài viết đã xuất bản

noreply@blogger.com (Lợi Ryan) — Mon, 20 Jul 2020 00:58:00 +0000

Khi 1 trang hay một bài viết mới được tạo ra. Mặc định, Blogger cũng tự tạo ra 1 liên kết. Tuy nhiên, những liên kết này lại không được đẹp mắt.

Nên trước khi bắt đầu soạn thảo nội dung, công việc đầu tiên mình hay làm là tùy chỉnh lại đường dẫn của trang hoặc bài viết sao cho hợp.

Nội dung bài viết

1.Làm thế nào để có thể thay đổi liên kết cho trang/ bài viết?
2.Thay đổi đường dẫn cho Bài đăng đã xuất bản
3.Thay đổi đường dẫn cho Trang đã xuất bản
4.Tổng kết

Nói vậy thôi! Chứ đôi lúc mình cũng ngố, quên luôn việc phải thay đổi liên kết bài viết, hoặc lắm lúc liên kết mình tự chỉnh lại không ưu mắt nữa.

Giờ muốn sửa lại cũng không được, vì Blogger không cho phép tự ý thay đổi đường dẫn của trang hoặc bài viết đã xuất bản.

Vậy giờ làm thế nào để có thể thay đổi liên kết cho trang/ bài viết?

Dễ thôi, anh em cứ tạo ra 1 bài viết mới hay trang mới, rồi copy và paste nội dung cũ vào, sau đó thay lại đường dẫn là được :))

Cái này mình chia sẻ thật, vì lúc đầu mình toàn làm vậy. Chứ không nghĩ có thể tùy chỉnh lại liên kết của bài viết đã được xuất bản.

Tính ra nó cũng là 1 cách (*￣▽￣*). Nhưng nó không phải mục tiêu của bài viết này, đừng ông nào làm theo tôi như trên, vì chúng ta còn 1 cách khác có thể thay đổi được liên kết cho bài viết mà không cần phải tạo mới.

Thay đổi đường dẫn cho Bài đăng đã xuất bản

Cách này rất đơn giản, anh em cứ follow theo từng bước mình hướng dẫn bảo đảm làm được ngay:

Bước 1: Anh em đăng nhập vào trang quản trị của Blogspot

Bước 2: Đi đến mục "Bài đăng" tìm bài viết mà anh em muốn thay đổi lại đường dẫn

Bước 3: Sau khi tìm thấy chúng ta nhấp vào nút "Quay lại bản nháp" để bài viết trở về tình trạng như lúc ta chưa xuất bản.

Bước 4: Ok! Giờ thì ta vào phần soạn thảo và tùy chỉnh lại đường link ở mục "Liên kết".

Anh em nào vẫn chưa biết cách đặt tên link cho đúng, thì nên xem lại phần thiết lập liên kết cho bài đăng, trong bài viết tìm hiểu tính năng cơ bản của Blogger mình đã có hướng dẫn chi tiết.

Bước 5: Cuối cùng ta nhấn vào "Xuất bản" để đăng lại bài viết lên web là xong.

Thay đổi đường dẫn cho Trang đã xuất bản

Không giống như "Bài đăng", với "Trang" thì chúng ta không thể thay đổi đường dẫn của trang bằng cách "Quay lại bản nháp", vì phần "Cài đặt trang" rất hạn chế không có chức năng để ta có thể tùy chỉnh lại "Liên kết", mà đường dẫn được tạo ra hoàn toàn phụ thuộc vào Blogger.

Do đó, khi anh em không nhận được liên kết như ý muốn, thì chỉ có thể tạo lại 1 trang mới, và đặt tên tiêu đề của trang sao cho đúng, để blogspot có thể tạo ra đường dẫn như ý muốn của mình.

Để làm được như vậy ta cần hiểu biết đôi chút về cách hoạt động của chức năng auto tạo link từ Blogger.

Nói một cách dễ hiểu, Blogger sẽ sử dụng tên tiêu đề mà chúng ta đã đặt cho trang, để tạo ra 1 liên kết bằng cách bỏ đi các dấu câu và thay khoảng trống giữa các từ bằng dấu "-", ví dụ:

Khi mình tạo ra một trang mới có tiêu đề: "Cách thay đổi đường dẫn cho trang khi đã lỡ xuất bản", với tiêu đề dài như thế này, lúc xuất bản trang chúng ta sẽ nhận được đường dẫn như sau: "/cach-thay-oi-uong-dan-cho-trang-khi-lo.html".

Anh em thấy đó như vậy đường dẫn của chúng ta trong đa số trường hợp sẽ không được như ý muốn, điều này sẽ không tốt cho SEO vì liên kết được tạo ra là 1 đoạn văn bản vô nghĩa.

Tuy nhiên, chúng ta vẫn có cách để khắc phục, mình sẽ chỉ cho anh em một mẹo.

Bây giờ anh em hãy tạo lại một trang mới → Sau đó thay vì đặt tiêu đề cho bài viết là "Cách thay đổi đường dẫn cho trang khi đã lỡ xuất bản", chúng ta sẽ đặt như thế này "cach-thay-doi-duong-dan-cho-trang" → Tiếp tục nhấn vào nút "Xuất bản" để đăng Trang.

Giờ anh em nhấp chọn "Xem trước" để xem trang và quan sát đường dẫn hiện tại. Có phải nó sẽ trông như thế này: "/cach-thay-doi-duong-dan-cho-trang.html".

Ngon lành hơn rồi, và đây cũng là cách để anh em có thể tùy chỉnh liên kết cho trang.

Khi đã nhận được liên kết ưng ý, việc của chúng ta bây giờ là quay trở lại trang vừa xuất bản, xóa bỏ tiêu đề cũ, nhập tiêu đề mới vào, tiếp tục soạn thảo nội dung cho trang và sau đó nhấn vào nút "Cập nhật" để lưu lại thay đổi là được.

Tổng kết

Ok! Bên trên là 1 vài kiến thức nhỏ mà mình muốn gửi đến anh em. Mong rằng những chia sẻ của mình hữu ích với mọi người. Còn giờ thì bái bai và hẹn gặp lại :))

Hướng dẫn đăng video Youtube Responsive

noreply@blogger.com (Lợi Ryan) — Sat, 18 Jul 2020 07:33:00 +0000

Hello, anh em! Trong bài viết lần này Ryan sẽ hướng dẫn cho mọi người cách để đăng video từ youtube lên website tương thích với mọi thiết bị.

Nội dung bài viết

1.Responsive là gì?
2.Tại sao nó lại có tác dụng?
3.Làm thế nào để nhúng video Responsive vào website?
3.1 Sử dụng công cụ Online để tạo video Responsive
3.2 Sử dụng CSS để biến video Youtube thành video Responsive
4.Tổng kết

Tức video sẽ luôn hiển thị tốt ở mọi kích thước màn hình không gặp phải tình trạng tràn ra khỏi khung chứa nội dung nếu màn hình hiển thị quá nhỏ, như hình bên dưới này.

Bên trên là tình trạng mà mọi người sẽ gặp phải khi chỉ thực hiện chèn video theo cách thông thường, như sử dụng công cụ sẵn có của Blogger trong phần soạn thảo:

Hay dùng cách chèn video bằng mã Iframe mà youtube cung cấp:

Ok! Bạn thấy đó việc nhúng video bằng những cách như vậy sẽ có nhiều hạn chế, vì kích thước video đã bị cố định về chiều rộng và chiều cao.

Do đó, video của chúng ta có thể chạy tốt khi khách hàng xem trên máy tính, nhưng khi xem trên các thiết bị có kích thước màn hình nhỏ như điện thoại thì video sẽ bị tràn khỏi phần nội dung chính làm vỡ bố cục.

Để không bị vậy, chúng ta cần thêm vào thuộc tính responsive cho mỗi video được chèn vào web. Vậy thuộc tính Responsive là gì? Tại sao nó lại có tác dụng?

Responsive là gì?

Công nghệ responsive hiểu một cách đơn giản là sự tương thích hay sự thích ứng, được tạo ra nhằm mục đích giúp các nội dung trên website có thể hiển thị tốt ở mọi dạng kích thước màn hình khác nhau.

Tại sao nó lại có tác dụng?

Nhờ việc chuyển đổi kích thước hiển thị chiều rộng và chiều cao của nội dung bất kỳ sang dạng phần trăm hay vì là 1 con số cụ thể. Thuộc tính Responsive cho phép đối tượng tự động được kéo dãn tự nhiên theo sự thay đổi của kích thước màn hình mà không bị biến dạng.

Làm thế nào để nhúng video Responsive vào website?

Để video được nhúng vào web có thể chạy tốt cho nhiều thiết bị khác nhau, chúng ta có 2 cách:

Cách 1: Sử dụng công cụ tạo video Responsive sau đó lấy mã và chèn vào website.
Cách 2: Sử dụng mã code để biến video Youtube thành video Responsive.

Sử dụng công cụ Online để tạo video Responsive

Đây là cách làm đơn giản dành cho anh em biết ít về code, việc chúng ta cần làm là tìm video tạo mã và dán vào nơi muốn hiển thị là được. Anh em làm theo mình hướng dẫn nhé!

Bước 1: Đăng nhập vào website Embedresponsively.com

Bước 2: Đăng nhập vào Youtube, chọn video mà ta muốn chèn vào web sau đó copy đường dẫn của video đó

Bước 3: Dán đường liên kết vào mục Youtube Page URL

Bước 4: Nhấn vào nút "Embed" để tạo code

Bước 5: Copy toàn bộ đoạn code vừa được tạo ra

Bước 6: Chuyển nội dung soạn thảo sang định dạng HTML và dán đoạn code vừa tạo vào nơi muốn hiển thị video.

Bước 7: Nhấn vào nút Cập nhật để lưu lại thay đổi và quay trở lại website để tận hưởng thành quả thôi ^^

Sử dụng CSS để biến video Youtube thành video Responsive

Bước 1: Anh em đăng nhập vào Blogger đi đến mục "Chủ đề" chọn vào dấu "..." sau đó chọn tiếp vào "Chỉnh sửa HTML"

Bước 2: Giờ mọi người copy đoạn mã CSS bên dưới này:

.video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

Bước 3: Ta quay lại phần "Chỉnh sửa HTML", nhấn phím Ctrl + F và tìm kiếm đoạn code sau:

]]></b:skin

Bước 4: Giờ anh em Paste toàn bộ đoạn code mà ta vừa code ở bước 2 lên phía trên đoạn mã vừa tìm được và nhấn vào nút để lưu lại.

Bước 5: Để chèn hoặc nhúng video Youtube vào web anh em sử dụng đoạn code sau nhớ chuyển phần soạn thảo sang dạng HTML trước

<div class="video-container"> 
<iframe src="https://www.youtube.com/embed/ID video Youtube" frameborder="0" width="560" height="315"></iframe> 
</div>

Dán nó vào nơi anh em muốn hiển thị video nhớ thay ID video Youtube thành mã video mà anh em muốn chèn vào nhé! Cách để lấy ID video Youtube anh em xem bên dưới này.

Hướng dẫn lấy mã ID video trên youtube

Bước 1: Anh em đăng nhập vào Youtube

Bước 2: Chọn vào video mà anh em muốn

Bước 3: Nhìn lên thanh địa chỉ của trình duyệt web anh em sẽ thấy đường link video hiện tại có dạng như sau https://youtube.com/watch?v=[ID video], thì ID của video chính là đoạn mã nằm phía sau ".../watch?v="

Như hình trên thì ID video chính là đoạn grQ-w-8W-Kg, giờ ta chỉ việc copy đoạn mã này và dán vào thay thế phần code mà mình đã bôi đỏ là được. Chúc anh em thành công.

Tổng kết

Ok! Như vậy là chúng ta đã biết được cách làm thế nào để thêm video từ youtube vào website mà vẫn đảm bảo hiển thị tốt trên mọi kích thước màn hình. Mong những kiến thức mình chia sẻ có thể hữu ích với bạn.

Trong bài viết lần tới, Ryan sẽ hướng dẫn cho anh em cách thay đổi đường dẫn của 1 bài viết hoặc 1 trang đã xuất bản lên website, cùng chờ nhé! Còn giờ thì bái bai và hẹn gặp lại ~(￣▽￣)~

Tài liệu tham khảo:

Embed video - Youtube

Add Image and video to your blog - Google Support

Chia sẻ kinh nghiệm chọn mua Hosting/ Domain

noreply@blogger.com (Lợi Ryan) — Mon, 13 Jul 2020 05:36:00 +0000

Hello! Chào anh em, hôm nay Ryan muốn dành ra vài phút để chia sẻ cũng như tâm sự với anh em về những gì liên quan đến dịch vụ Hosting mà mình từng trải nghiệm.

Với những người mới bắt đầu tìm hiểu về website, muốn tạo ra 1 trang web để lưu trữ những trải nghiệm của mình, hay muốn đưa sản phẩm và dịch vụ của mình đến với người dùng trên mạng.

Việc tìm kiếm cho mình 1 nhà cung cấp hosting uy tín, chất lượng hẵn là 1 trong những trăn trở khó giải quyết nhất.

Tại sao mình lại nói vậy vì mình cũng là người từng trải qua quãng thời gian đó. Nên mình biết chắc các Newbies như mình cũng sẽ thấy như vậy thôi :))

Và chúng ta sống trên tinh thần, người đi trước giúp đỡ cho người phía sau, anh em đừng trông mong mình chia sẻ những gì quá cao siêu vì mình cũng chỉ là tay ngang nên kiến thức và kinh nghiệm không thể như các đàn anh đi trước.

Do đó trong bài viết này mình có gì, biết gì thì mình sẽ nói cái đó. Giờ mình sẽ giải thích ngắn gọn về Hosting và Domain để anh em phân biệt được 2 cái này.

Hositng là gì? Tại sao phải sử dụng hosting?

Hướng dẫn chỉnh sửa giao diện Website cơ bản

noreply@blogger.com (Lợi Ryan) — Mon, 13 Jul 2020 03:03:00 +0000

Hello! Anh em

Tính năng trong Blogger từ cơ bản đến nâng cao

noreply@blogger.com (Lợi Ryan) — Mon, 13 Jul 2020 02:52:00 +0000

Hello, anh em! Để thuận tiện cho anh em trong việc thao tác làm quen với Blogger. Hôm nay, Ryan sẽ cùng mọi ngườitìm hiểu và khám phá những tính năng có trong giao diện quản trị của Blog.

Nội dung bài viết

1.Tìm hiểu những tính năng cơ bản
2.Tìm hiểu những tính năng nâng cao
3.Tổng kết

Blogger hay còn gọi là Blogspot cũng như những nền tảng khác, bản thân nó cũng có 1 nơi riêng tư để chúng ta soạn thảo, quản lý và theo dõi những chuyển đổi xảy ra trên website. Nơi mà khách hàng không thể truy cập vào được.

Việc nắm rõcác chức năng trong Blog sẽ giúp ích chúng ta rất nhiều trong công việc xây dựng 1 website chỉnh chu. Ứ phải lò mò tìm hiểu hay thắc mắc từng cái một, không biết vọc vào có sao không? Mình cũng vọc nó rồi :)) phải nói là tốn thời gian lắm.

Mà không phải ai cũng rảnh để đi tìm hiểu từng chút một như mình :v bởi vậy để tránh phí thời giờ vô ích, anh em nên xem qua những hướng dẫn của mình cho đỡ phải mò nhé! Nó cũng đơn giản thôi.

Về cơ bản giao diện quản trị của Blogger sẽ được chia làm 2 khu vực chính, phần bên trái là nơi tập chung các tính năng, phần bên phải là nơi ta sẽ thực hiện chỉnh sửa, bổ sung các nội dung trong từng tính năng.

Để anh em không phải nhồi nhét quá nhiều kiến thức 1 lúc, mình sẽ chia bài viết này làm 2 phần. Phần 1 chúng ta sẽ đi tìm hiểu những tính năng cơ bản trước, sau đó mới tiếp tục đến phần 2 tìm hiểu các tính năng nâng cao. Ok! Let's go.

Những tính năng cơ bản trong Blogger

1.Xem blog của bạn

Tính năng này khá đơn giản nó giúp cho chúng ta nhanh chóng di chuyển đến website mà không phải mất công gõ địa chỉ lên thanh trình duyệt, mình thường dùng nó để kiểm tra nhanh các chỉnh sửa vừa thực hiện trong trang quản trị.

Để thực hiện bạn nhấn vào dòng chữ "Xem blog của bạn" là được.

2.Bài đăng

Đây là tính năng giúp ta soạn thảo bài viết để đăng lên blog/ website. Để bắt đầu viết 1 bài mới anh em làm như sau. Chọn vào "Bài đăng" sau đó nhấn vào biểu tượng "+" để thêm bài viết mới.

Ta sẽ được chuyển đến trang soạn thảo bài viết, tại đây chúng ta có những thứ cần lưu ý như sau:

+ Tiêu đề: Điền tên chủ đề bài viết của bạn

+ Khung soạn thảo: Viết nội dung liên quan đến chủ đề, bao gồm: văn bản, hình ảnh, video, âm thanh,.v.v. Nó khá giống Word anh em có thể tự tìm hiểu chỉ cần lưu ý vài mục giúp mình như này là được:

Biểu tượng bút chì: cho phép anh em chuyển đổi qua lại phần soạn thảo nội dung dưới dạng văn bản bình thường hoặc dạng mã HTML

Heading: Tức là định dạng cho các đề mục trong bài viết bao gồm h1 (Tiêu đề lớn: 1 trang chỉ có 1 h1 do đó anh em không nên lạm dụng nhé ), h2 (Tiêu đề), h3 (Tiêu đề phụ), h4 (Tiêu đề nhỏ).

Chèn hoặc chỉnh sửa liên kết: Cho phép ta chèn thêm đường dẫn liên kết từ A sang B, dưới dạngAnchor Text.

Chèn hình ảnh: Có rất nhiều cách mọi người có thể lựa chọn như: tải lên từ máy tính, tải ảnh từ google photo, dùng lại các ảnh đã tải lên từ kho lưu trữ của blogger, lấy ảnh từ website thông qua liên kết url.

Chèn video: Bạn có thể tải video trực tiếp lên Blog tuy nhiên mình không khuyến khích anh em chọn cách này vì chất lượng sẽ không được tốt, thay vì như vậy anh em có thể chọn cáchđăng video từ Youtube lên Blog sẽ cho ta chất lượng tốt hơn.

Chèn ký tự đặc biệt: cái này là tính năng mới của Blogger rất hay, anh em nên tìm hiểu qua 1 chút nó cũng dễ sử dụng thôi.

━ Chèn dấu ngắt đoạn: nó có tác dụng giúp ta tùy chọn phần tóm tắt trong nội dung của bài viết, khi hiển thị ra trang chủ và công cụ thu thập dữ liệu. Ví dụ: Bình thường anh em sẽ có 1 đoạn tóm tắt khá dài dòng, nó thường ngắt quãng ở những đoạn vô nghĩa như hình bên dưới.

Ngắt đoạn

Như vậy đoạn tóm tắt của ta vừa ngắn, vừa đủ kích thích để khiến khách hàng tò mò tìm hiểu thêm về bài viết. Muốn làm được anh em thực hiện như sau:

Bài đăng

Ngắt đoạn

Xóa định dạng: công cụ này giúp ta xóa bỏ các định dạng không mong muốn khi soạn thảo văn bản, đôi lúc anh em sẽ soạn bài viết trên word hay copy 1 đoạn văn ở đâu đó nhưng bị dính format sẵn có khiến cho chữ hiển thị không được đẹp. Lúc này để xóa bỏ định dạng của nó ta thực hiện lệnh bôi đen đôi tượng cần xóa định dạng và chọn vào biểu tượng chữ "T" bị gạch bỏ để xóa bỏ tất cả các format.

+ Cài đặt bài đăng: Bổ sung các thiết lập cần thiết cho cho bài viết trước khi đăng lên website/ blog như:

Nhãn: thông báo cho khách hàng biết bài viết của bạn thuộc chuyên mục nào. Ví dụ: Bạn đăng một bài viết thuộc chuyên mục về "bóng đá" bạn sẽ muốn để nhãn là "bóng đá" để thực hiện anh em làm như sau: nhấp vào mục "Nhãn" → nhập tên nhãn mới của bạn ở phần "Thêm nhãn" → chọn tích vào ô nhãn vừa thêm và nhấn nút cập nhật để hoàn tất.

Ngày xuất bản: thông báo ngày đăng bài viết

Liên kết: thiết lập đường dẫn tới bài viết ta đang soạn thảo. Ví dụ: Anh em đang viết 1 bài về "giải đá ngoại hạng anh" thì anh em sẽ muốn đường dẫn trông như thế này "/giai-da-ngoai-hang-anh" thay vì "/gia-da-ngoa-hang"

Vì nếu anh em không tự chỉnh thì Blogger sẽ tự tạo ra cho ta 1 đường dẫn mặc định và thường thì nó sẽ không được đẹp cho lắm, như vậy nó sẽ không tốt cho SEO. Rất may, Blogger vẫn cho phép chúng ta tùy chỉnh lại đường dẫn theo ý muốn để làm được anh em thực hiện như sau:

Liên kết

Cài đặt bài đăng

Liên kết tùy chỉnh

không dấu và cách nhau bằng dấu "-"

Cách để sửa đường dẫn liên kết cho bài viết/ trang đã đăng

Vị trí: nơi xuất bản bài viết

Mô tả tìm kiếm: giúp hiển thị nhanh tóm tắt nội dung bài viết trên công cụ tìm kiếm, đây là đoạn trích nhanh mà khách hàng sẽ đọc được khi tìm thấy bài viết của chúng ta trên Google.

Tùy chọn: lựa chọn muốn hoặc không muốn người khác bình luận trên bài viết

Thẻ robot tùy chình: thông báo cho phép/ không cho phép công cụ tìm kiếm tìm thấy bài viết của bạn (thông thường mục này chúng ta sẽ để là mặc định)

+ Hiển thị bài đăng:

Lưu: chỉ lưu lại bài đăng dưới dạng bản nháp mà không công khai hiển thị bài đăng lên website

Xem trước: cho phép anh em xem qua định dạng bài đăng hoàn chỉnh khi công khai mà không phải xuất bản.

Xuất bản: công khai bài đăng lên website để mọi người có thể tìm thấy, xem và bình luận.

3.Nhận xét

Đây là nơi chúng ta có thể quản lý tất cả nhận xét trên website/ blog, cụ thể như: Xóa, đánh dấu spam, kiểm duyệt nhận xét, cho hiển thị nhận xét hay chỉ đơn giản là xóa đi nội dung nhận xét của người khác.

Cái hay của tính năng này là chúng ta dễ dàng biết được nhận xét của người ta đang thuộc bài viết nào giúp ta hiểu được chính xác những gì mà khách hàng đang nói tới để có thể trả lời.

4.Trang

Cũng tương tự như Bài đăng, tính năng Trang cho phép chúng ta tạo ra 1 trang mới trên website. Tuy nhiên, điểm khác biệt nằm ở chỗ bài đăng khi công khai thì sẽ hiển thị lên website còn trang thì không.

Trang chỉ xuất hiện ra ngoài khi chúng ta gắn 1 liên kết dẫn tới nó (Mỗi trang sẽ có 1 đường dẫn cụ thể).

Ví dụ khi mình muốn hiển thị Sitemap ra ngoài trang chủ, thì mình có thể tạo một Menu có tên tương tự và chèn liên kết của trang Sitemap cho nó, hoặc nó cũng có thể là 1 ký tự, 1 bức ảnh, 1 buttons,...miễn là chúng ta có thể thêm liên kết vào.

Với "Cài đặt trang" thì chúng ta chỉ có 2 phần là "Mô tả" và "Tùy chọn" chứ không có nhiều lựa chọn như phần "Cài đặt bài đăng".

5.Bố cục

Trong phần bố cục chúng ta có thể thay đổi, thêm hoặc bớt các thành phần trên website, cụ thể như:

Bổ sung logo, tiêu đề, mô tả của Blog.
Thêm Menu cho website
Chỉnh sửa hiển thị bài đăng trên web
Thêm các tiện ích như: hộp tìm kiếm search box, bài đăng phổ biến, bài đăng gần đây,.v..v.
Thêm các plugin cho Website.

Bạn nên tự thao tác qua để làm quen với các chức năng của nó, hoặc xem video hướng dẫn cuối bài viết để hiểu rõ hơn cách sử dụng từng chức năng đểcải thiện giao diện website.

6.Chủ đề

Tại đây ta có thể thay đổi giao diện website bằng cách sử dụng template mặc định mà Blogger cung cấp hoặccài đặt template mới cho Blogspot.

Ngoài ra, ta còn có thể chỉnh sửa website bằng cách tác động trực tiếp lên mã code của Template, ví dụ nhưthêm bài viết liên quan hoặc thêm một menu mới cho web chẳng hạn.

7.Cài đặt cơ bản

Trong phần này chúng ta sẽ có những thiết lập cơ bản, bao gồm:

Tiêu đề: phần này cũng có ở phần bố cục rồi, nếu anh em đã thêm thì không phải làm gì thêm nữa cứ để nguyên là ổn. Còn anh em nào thích đổi sang tiêu đề khác thì chỉ cần nhấp vào chữ "Tiêu đề" ngay lập tức sẽ có 1 Popup chỉnh sữa hiện ra, chúng ta nhập tiêu đề mới vào và nhấn "Lưu" cập nhật. Nếu không thích đổi nữa thì anh em nhấn vào "Hủy" để tắt Popup đi.

Mô tả: Phần này tương tự như mục tiêu đề, anh em có thể giữ nguyên. Nếu muốn thay đổi/ bổ sung thì cứ nhấn vào chữ "Mô tả" để đổi hoặc thêm mới mô tả.

Ngôn ngữ: Phần này anh em chọn theo ngôn ngữ trên website, nếu web là tiếng Việt thì chọn Vietnamese, nếu web là tiếng Anh thì chọn English.

Cảnh báo nội dung người lớn: Anh em nào làm web có nội dung nhạy cảm thì tích vào, còn không thì để nguyên nhé!

Gắn mã thuộc tính Google Analytics: Phần này ta chèn mã theo dõi của Google vào để tiện cho việc theo dõi và đánh giá web được chi tiết. Xemhướng dẫn gắn mã Google Analytics cho Blogger để biết cách lấy mã.

Thêm biểu tượng trang web: Đây là nơi anh em có thể bổ sung biểu tượng cho website (Còn gọi là Favicon) giúp khách hàng dễ dàng phân biệt website/ blog của chúng ta khi mở nhiều tab trên trình duyệt hay khi tìm kiếm lại trong phần Bookmark.

Những tính năng nâng cao trong Blogger

Ok! Bên trên chính là những tính năng cơ bản trong giao diện quản trị của blogspot mà anh em ta cần phải nắm rõ để có thể dễ dàng thực hiện các thao tác phục vụ cho công việc quản lý, chỉnh sửa và theo dõi website.

Giờ chúng ta tiếp tục tìm hiểu sang những tính năng nâng cao trong Blogger.

1.Bảo mật

Cho phép chúng ta lựa muốn hoặc không muốn robot tìm kiếm của Google tìm thấy website của chúng ta. Thường chúng ta sẽ để theo mặc định của Blogger ở chế độ mở.

2.Địa chỉ Blog

Ở phần này chúng ta có thể thay đổi lại địa chỉ của website bằng cách nhấn vào "Địa chỉ Blog" → thêm địa chỉ mới vào và nhấn "Lưu" để thay đổi.

Tuy nhiên, mình khuyên là anh em không nên đổi địa chỉ quá nhiều sẽ ảnh hưởng đến kết quả tìm kiếm và thứ hạng của website.

Và mỗi khi thực hiện thay đổi này chúng ta lại phải làm nhiều thao tác phức tạp khác, như: thay đổi lại các đường dẫn trong Menu, thay đổi lại các liên kết nội bộ và thực hiện chuyển hướng tên miền cũ sang tên miền mới để tránh ảnh hưởng đến khách truy cập, cùng với ty tỷ các thứ linh tinh khác.

3.Thêm tên miền tùy chỉnh

Trong phần này chúng ta có thể chọn thêm tên miền mới với đuôi ngắn hơn thay vì là .blogspot.com thì giờ chỉ còn .com, hoặc là.vn, cũng có thể là.net.

Để thêm domain mới cho blog anh em vẫn thao tác cũ là nhấn vào "Thêm tên miền tùy chỉnh" nhập vào tên miền mà anh em đã mua sau đó thực hiện thao tác thay đổi DNS theo hướng dẫn của Google là được.

4.Https (SSL)

Đây là 1 trong những tính năng rất hay mà nền tảng blogspot hỗ trợ cho người dùng, nó giúp tăng cường tính bảo mật, làm đẹp phần hiển thị tên miền trên thanh địa chỉ của trình duyệt. Ta nên để theo mặc định của blog ở chế độ mở.

5.Setup quyền quản lý

Ở mục này anh em có thể dễ dàng setup thêm mới một hoặc nhiều tác giả, để họ có thể đăng bài giúp phát triển nội dung của website và blog.

Ngoài ra, chúng ta còn có thể phân quyền và xóa những tác giả được mời chỉ với vài thao tác click chuột, khỏi sợ bị người khác chỉnh sửa thay đổi cấu trúc website. Hay bị chơi xấu xóa luôn cả website mà chúng ta đã mất công tạo ra.

Để làm được điều này anh em thực hiện như sau:

Bước 1: Nhấp vào nút "Mời thêm tác giả" → nhập địa chỉ email của người mà ta muốn mời vào → sau đó nhấn vào "Gửi"

Bước 2: Chờ người được mời xác nhận trở thành "Tác giả mới" thì ta có thể vào phần "Quản trị viên và tác giả" để phân quyền cho họ hoặc xóa bỏ nếu không muốn họ tham gia xây dựng web nữa.

Cũng tại đây chúng ta có thể quản lý được các lời mời từ những website/ Blog khác muốn kết hợp với chúng ta để phát triển.

Anh em cũng có thể lựa chọn cho phép hoặc không cho phép website của chúng ta công khai, để mọi người đều có thể truy cập hoặc chỉ có những cá nhân nhất định mới được phép vào xem (vì đôi lúc ta chỉ muốn tạo ra 1 website nội bộ mà không muốn quá nhiều người biết tới).

Để setup anh em nhấn vào "Quyền truy cập của người đọc" và đưa ra các lựa chọn:

Công khai: cho phép ai cũng có thể theo dõi web
Riêng tư: chỉ mình có thể xem web
Tùy chọn: chỉ cho phép 1 vài cá nhân được truy cập

6.Quản lý hiển thị bài đăng

Tính năng cho phép ta quản lý số bài đăng hiển thị bên ngoài trang chủ bằng cách nhấp vào "Số bài đăng hiển thị trên trang chính" → nhập số bài đăng mà anh em muốn hiển thị và nhấn vào "Lưu" để cập nhật là được.

Một tính năng thêm khá hay của phần này chính là "Hộp đèn hình ảnh" nếu anh em chọn mở, thì chúng ta sẽ được xem tất cả ảnh ở dạng Slide view khi nhấp vào ảnh trên cùng 1 bài viết hay 1 trang bất kỳ.

7.Quản lý cài đặt nhận xét

+ Với tính năng này chúng ta có thể lựa chọn hiển thị hộp bình luận ở nhiều dạng khác nhau:

Được nhúng: thao tác nhận xét sẽ nằm ngay trên website (Đây là dạng phổ biến nhất)

Toàn bộ trang: khi nhận xét khách hàng sẽ được chuyển tới 1 trang to bự chỉ để nhập nhận xét và xuất bản :)) (riêng mình không thích cách này lắm)

Popup: khi nhấp vào thêm nhận xét 1 cửa sổ nhỏ sẽ hiện ra và khách hàng sẽ nhập bình luận của mình vào và xuất bản (Mình cũng không dùng cách này)

Ẩn: Không cho hộp nhận xét xuất hiện trên website. (1 số ít website chỉ cho ta đọc mà không cho nhận xét hay bình luận sẽ áp dụng cách này)

+ Lựa chọn cho phép người nào được phép để lại bình luận:

Bất kỳ ai: tất cả mọi người kể cả người dùng ẩn danh hoàn toàn

Người dùng có tài khoản Google: chỉ dành cho những người có tài khoản Gmail

Thành viên của Blog: chỉ dành cho người được set quyền trên Blog.

+ Lựa chọn kiểm duyệt nhận xét:

Luôn luôn: mọi nhận xét đều được giữ lại xét duyệt trước khi xuất hiện trên Blog/ Website (này là 1 cách hay để ngăn chặn cách bình luận có tính chất Spam)

Đôi khi: chỉ một vài nhận xét được google cho là không tốt mới bị giữ lại.

Không bao giờ: cho phép tất cả mọi bình luận đều được công khai mà không cần xem xét.

Hình ảnh xác nhận khi bình luận được xuất bản: cái này là 1 tính năng google phát triển nhằm ngăn chặn tình trạng xuất hiện các con bot tự động đi spam trên các website (Anh em có thể chọn tắt hoặc mở, mình thì chọn tắt vì không muốn gây phiền phức cho khách hàng)

Thông báo biểu mẫu bình luận: đây là văn bản xuất hiện bên trên khung nhận xét để thông báo nội quy, hoặc hướng dẫn khách hàng bình luận đúng cách.

8.Setup email nhận thông báo

Anh em có thể mời thêm người nhận thông báo khi có nhận xét mới, hay bài đăng mới trên website/ blog bằng cách nhấp vào "Mời thêm người nhận thông báo về bình luận" "Mời thêm người nhận thông báo về bài đăng" → sau đó nhập email người mà anh em muốn mời → chọn "Gửi".

9.Định dạng ngày, giờ cho Blogger

Ở phần này chúng ta cần thiết lập lại múi giờ cho phù hợp với anh em ở Việt Nam thì nên chọn là (GTM + 7) Đông Dương, Hồ Chí Minh. Nếu bạn ở nơi khác thì nên tìm hiểu giờ của khu vực mình sinh sống để setup cho đúng nhé!

Định dạng dấu thời gian: hiển thị thời gian xuất hiện bên dưới tiêu đề bài viết.

Định dạng dấu thời gian của bình luận: hiển thị thời gian xuất hiện trên mỗi nhận xét của khách hàng.

10.Thẻ meta

Đây là nội dung tóm tắt sẽ xuất hiện khi khách hàng tìm thấy trang chủ của chúng ta trên công cụ tìm kiếm, anh em chọn tích để mở, phần "Nội dung mô tả tìm kiếm" chúng ta nhấp vào → bổ sung thông tin → sau đó nhấn "Lưu" để cập nhật.

11.Lỗi và chuyển hướng

Tùy chỉnh 404: Đây là lỗi xảy ra khi khách hàng truy cập vào một đường dẫn trên website nhưng không tồn tại hoặc đã bị xóa.

Tính năng này cho phép chúng ta thông báo tới họ về sự cố này, gửi khách hàng lời xin lỗi và hướng họ tới một trang khác (Thông thường ta sẽ chọn là trang chủ)

Lệnh chuyển hướng: Được dùng để chuyển hướng khách hàng có mục đích từ liên kết A sang liên kết B. Tính năng này thường được chúng ta áp dụng khi thay đổi tên miền hay domain mới cho website.

12.Lập chỉ mục cho Blogger

Phần này giúp ta thiết lập và yêu cầu Google lập chỉ mục website để đưa website của chúng ta nhanh chóng xuất hiện trên công cụ tìm kiếm. Mình cũng đã có bài viết hướng dẫn cách để thêm mã robot.txt cho website Blogspot anh em nên xem qua sau khi đọc xong bài viết này.

13.Kiếm tiền

Đây là tính năng kiếm tiền từ quảng cáo của Google, tuy nhiên tính năng này ta chỉ nên bật khi blog/ website của chúng ta có lượng khách truy cập nhất định. Nếu không thì ta nên để trống.

14.Quản lý blog

Đây là phần cho phép ta quản lý dữ liệu của Blog (bao gồm bài viết, nhận xét), video đã tải lên và xóa bỏ Blog.

Sao lưu nội dung: tải về toàn bộ dữ liệu bài viết, trang và nhận xét có trên blog/ website

Nhập nội dung: tải nội dung đã sao lưu lên blog/ website

Video từ blog: xem lại hoặc tải về các video đã upload lên blogger

Xóa blog: Xóa bỏ website/ blog của bạn nhưng bạn vẫn có thể khôi phục lại nếu chưa xóa vĩnh viễn.

15.Nguồn cấp dữ liệu

Phần này cho phép ta khai báo về nguồn cấp và nơi lưu trữ dữ liệu trên website, thông thường chúng ta sẽ để nguyên.

16.Hồ sơ người quản lý

Phần này cho phép chúng ta thiết lập quản lý hồ sơ admin của website.

Để truy cập vào "Hồ sơ" anh em chọn vào "Hồ sơ người dùng" → ta sẽ được chuyển tới trang hồ sơ, tại đây chúng ta có thể bổ sung các nội dung còn thiếu như ảnh Avatar, tên hiển thị, giới tính, email, giới thiệu ngắn, website → sau đó để cập nhật ta nhấn vào nút "Lưu" .

Xem video hướng dẫn về cáctính năng trong Blogger bên dưới này

Tổng kết

Ok! Bên trên là chia sẻ về những hiểu biết cơ bản khi mình làm việc với Blogger hy vọng nó hữu ích với anh em. Chúc mọi người vui vẻ, bái bai :))

Hướng dẫn tạo khung chứa code đẹp cho Blog

noreply@blogger.com (Lợi Ryan) — Thu, 18 Jun 2020 10:34:00 +0000

Với Blogger thì việc chia sẻ code là chuyện thường làm rồi. Nhưng làm thế nào để chèn code vào bài viết thì không phải ai cũng biết, càng chưa nói đến là có 1 khung chia sẻ code đẹp nịnh mắt người xem.

Nội dung bài viết

1.Mẫu khung trắng
2.Mẫu khung đen
3.Tổng kết

Nhiều anh em sẽ chọn cách đóng khung, hay chú thích đoạn code nào đó lại nhưng như vậy thì trông bài viết sẽ không được chuyên nghiệp.

Vì thế, Ryan hôm nay sẽ chia sẻ cho bạn cách tạo ra khung chứa code cực đẹp cho Blog của mình.

Khung code sẽ có 2 mẫu trắng và đen, bạn cứ chọn theo ý thích của mình :))

Mẫu khung trắng

Bước 1: Các bạn đăng nhập vào blogger.com đi đến phần "Chủ đề" phía bên phải bạn chọn vào dấu "..." sẽ có 1 tab xổ xuống bạn chọn tiếp vào "Chỉnh sửa HTML".

Sau đó bạn chép đoạn code CSS sau vào trước thẻ ]]></b:skin> hoặc </style>

/* CSS Simple Pre Code */
pre {
  background:#fff;
  white-space:pre;
  word-wrap:break-word;
  overflow:auto;
}
pre.code {
  margin:20px 25px;
  border:1px solid #d9d9d9;
  border-radius:2px;
  position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
  font-family:sans-serif;
  font-weight:normal;
  font-size:13px;
  color:#444;
  position:absolute;
  left:1px;
  top:16px;
  text-align:center;
  width:60px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  pointer-events:none;
}
pre.code code {
  font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  display:block;
  margin:0 0 0 60px;
  padding:15px 16px 14px;
  border-left:1px solid #d9d9d9;
  overflow-x:auto;
  font-size:13px;
  line-height:19px;
  color:#444;
}
pre::after {
  content:"double click to selection";
  padding:0;
  width:auto;
  height:auto;
  position:absolute;
  right:18px;
  top:14px;
  font-size:12px;
  color:#aaa;
  line-height:20px;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  transition:all 0.3s ease;
}
pre:hover::after {
  opacity:0;
  visibility:visible;
}
pre.code-css code {
  color:#0288d1;
}
pre.code-html code {
  color:#558b2f;
}
pre.code-javascript code {
  color:#f57c00;
}
pre.code-jquery code {
  color:#78909c;
}

Bước 2: Bây giờ bạn copy đoạn code Javascript "JS" bên dưới và paste nó vào trước thẻ </body> là ta đã gần hoàn thành rồi :))

<script type="text/javascript">//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() { return $('<pre><code>' + $(this).html() + '</code></pre>');});var pres = document.querySelectorAll('pre,kbd,blockquote');for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false);}
//]]></script>

Bước 3: Sau khi đã hoàn thành 2 bước trên bạn chọn Save Templates (Lưu mẫu) lại

Bước 4: Để bắt đầu chia sẻ code thì bạn nhớ chuyển cách viết bài đăng sang dạng HTML rồi Copy và Paste đoạn code bên dưới vào là được.

<pre class='code code-html'>
<label>HTML</label>
<code>... Để Code HTML ở đây ...</code>
</pre>

<pre class='code code-css'>
<label>CSS</label>
<code>... Để Code CSS ở đây...</code>
</pre>

<pre class='code code-javascript'>
<label>JS</label>
<code>... Để Code JavaScript ở đây...</code>
</pre>

<pre class='code code-jquery'>
<label>Jquery</label>
<code>... Để Code jQuery ở đây...</code>
</pre>

|| Bạn có thể bỏ dấu "..." mình để vào để cho dễ nhìn thôi :v

Demo

Mẫu khung đen

Với khung đen bạn chỉ việc thay thế đoạn code CSS bên trên bằng đoạn CSS mới bên dưới này là ta sẽ có 1 khung chia sẻ code màu đen cực cool ngầu cho Blog của mình rồi!

GIỜ BẠN CHỈ VIỆC TẬN HƯỞNG THÔI :))

 /* CSS Simple Pre Code */
pre {
  background:#333;
  white-space:pre;
  word-wrap:break-word;
  overflow:auto;
}
pre.code {
  margin:20px 25px;
  border-radius:4px;
  border:1px solid #292929;
  position:relative;
}
pre.code label {
  font-family:sans-serif;
  font-weight:bold;
  font-size:13px;
  color:#ddd;
  position:absolute;
  left:1px;
  top:15px;
  text-align:center;
  width:60px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  pointer-events:none;
}
pre.code code {
  font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  display:block;
  margin:0 0 0 60px;
  padding:15px 16px 14px;
  border-left:1px solid #555;
  overflow-x:auto;
  font-size:13px;
  line-height:19px;
  color:#ddd;
}
pre::after {
  content:"double click to selection";
  padding:0;
  width:auto;
  height:auto;
  position:absolute;
  right:18px;
  top:14px;
  font-size:12px;
  color:#ddd;
  line-height:20px;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  transition:all 0.3s ease;
}
pre:hover::after {
  opacity:0;
  visibility:visible;
}
pre.code-css code {
  color:#91a7ff;
}
pre.code-html code {
  color:#aed581;
}
pre.code-javascript code {
  color:#ffa726;
}
pre.code-jquery code {
  color:#4dd0e1;
}

Demo

Tổng kết

Ok! Bên trên là tips nhỏ của mình gửi đến anh em về cách tạo ra 1 khung chứa code đẹp cho Blog/ Website của anh em. Hy vọng, anh em sẽ thích! Hẹn gặp lại anh em trong bài viết khác, Bái bai!

Hướng dẫn tải và cài đặt Photoshop CC 2015 (Full)

noreply@blogger.com (Lợi Ryan) — Tue, 16 Jun 2020 00:35:00 +0000

Hello, anh em! Hôm nay, mình sẽ hướng dẫn cho mọi người cách tải và cài đặt một phần mềm chỉnh sửa đồ họa cực kỳ mạnh mẽ, phù hợp cho mọi đối tượng sử dụng từ những nhu cầu cơ bản cho đến nâng cao.

Nội dung bài viết

1.Tải phần mềm Adobe Photoshop CC 2015 (Full)
2.Hướng dẫn cài đặt Photoshop CC 2015
3.Hướng dẫn Active Photoshop CC 2015
4.Tổng kết

Đây là 1 phần mềm nổi tiếng trong giới thiết kế đồ họa, vì những tính năng mạnh mẽ mà nó mang lại có thể thỏa mãn hầu hết các nhu cầu chỉnh sửa ảnh của chúng ta như: cắt, ghép, phục chế, crop, xóa phông, làm mờ,..vân..vân..mây..mây các kiểu con đà điểu.

Nói chung anh em gần như có thể làm mọi thứ với nó. Nhất là với các anh em đang FA :))

Người nào đam mê công nghệ thì chắc cũng đã nghe qua tên của phần mềm quen thuộc này rồi, nó chính là phần mềm Photoshop.

Tại sao mình không giới thiệu với anh em những công cụ đơn giản hơn như Paint hay 1 công cụ chỉnh sửa khác như Powerpoint của Microsoft?

Thật ra cũng không có lý do gì nhiều, đơn giản là vì mình thấy đã là dân làm web/ làm marketing/ làm đồ họa/ kinh doanh hay chỉ đơn giản là đăng ảnh lên mạng xã hội thì anh em cũng nên biết 1 chút về Photoshop.

Anh em sẽ không chịu thiệt đâu, Thật đấy!

Khi đã biết 1 chút ít kỹ năng căn bản như cắt ghép, xóa phông và thêm tý sáng tạo đảm bảo anh em sẽ không bao giờ thất vọng vì đã biết về Photoshop :v

Sống ảo phải gọi là quá đỉnh anh em biết vợ chồng của Minh Nhựa sống ảo trên Instagram như nào rồi đó ^^.

Cụ thể hơn những tấm hình anh em tìm thấy trên website của mình đều được mình chỉnh sửa trên Photoshop cả đấy.

Ok! Không luyên thuyên nữa mình cùng nhau Tải và cài đặt Photoshop CC 2015 thôi nào. (Bản này giao diện hiện đại, nhẹ và đủ dùng cho anh em tụi mình rồi, không cần phải tải bản cao làm gì đâu)

Nền tảng:	Adobe
Tên phần mềm:	Photoshop CC 2015
Hướng dẫn:	Lợi Ryan
Phát hành:	Gacontapcode
GIỚI THIỆU Photoshop CC 2015 là một phần mềm chỉnh sửa ảnh toàn diện, chuyên nghiệp được ưa chuộng trên toàn thế giới, bạn có thể tạo ra gần như mọi bức ảnh đặc sắc từ phần mềm chỉ với vài thao tác, chắc chắn sẽ làm bạn hài lòng. Cùng tận hưởng nhé!

Tải về phần mềm Adobe Photoshop CC 2015 (Full)

File cài đặt sẽ có 2 bản, 1 bản dành cho anh em nào đang sử dụng win 32bit, 1 bản dành cho win 64bit. Anh em đang dùng win nào thì tải file dowload của bản đó để tận dụng tối đa sự hỗ trợ của máy tính, giúp quá trình làm việc được trơn tru hơn.

Làm thế nào để biết win mình đang sử dụng thuộc bản nào? Rất đơn giản dưới đây mình sẽ chỉ cho anh em vài cách cơ bản.

Xác định thông tin hệ điều hành dành cho window 7:

Bước 1: Anh em nhấn vào nút Start → ngay tại ô tìm kiếm anh em gõ "Computer" → sau đó nhấp chuột phải vào Computer và chọn Properties.

Bước 2: Trong bản thông tin anh em tìm phần Window Edition sẽ nhìn thấy thông tin bản win mà anh em đang sử dụng là 32 bit hay 64 bit.

Xác định thông tin hệ điều hành dành cho window 8:

Bước 1: Nếu anh em đang dùng máy tính có chức năng cảm ứng thì vuốt phải từ cạnh bên phải của màn hình → sau đó chọn vào Settings → tiếp tục chọn vào Change PC settings và làm tiếp Bước 3.

Bước 2: Với những anh em đang sử dụng máy tính bình thường, thì anh em di chuyển con trỏ chuột sang góc cuối màn hình bên phải → tiếp tục di chuyển chuột tới phần Settings và chọn vào nó → chọn tiếp vào Change PC settings.

Bước 3: Anh em chọn mục PC and devices → chọn tiếp vào PC info để xem thông tin của máy.

Bước 4: Sau đó anh em nhìn sang phải sẽ thấy bản thông tin, thì thông tin của hệ điều hành anh em xem ngay bên dưới chữ PC nhé.

Xác định thông tin hệ điều hành dành cho window 10:

Bước 1: Anh em chọn vào Start → sau đó chọn tiếp vào Settings → tiếp tục chọn System và nhấp vào mục About để xem thông tin máy

Bước 2: Anh em nhìn sang bảng thông tin bên phải, thông tin bản win của anh em sẽ nằm ngay mục Device specifications nằm ở dòng System type

Link 32bit

Download

Link 64bit

Download

Hướng dẫn cài đặt Photoshop CC 2015

Ok! Sau khi anh em đã tải về bản photoshop phù hợp, thì giờ chúng ta sẽ bắt đầu tiến hành cài đặt phần mềm. Vì là bản tách từ file down tổng hợp nên anh em trước khi cài đặt cần phải ngắt kết nối mạng.

Sau khi đã tắt mạng anh em làm theo hướng dẫn của mình để bắt đầu cài đặt phần mềm.

Bước 1: Giải nén file cài đặt phần mềm Photoshop CC 2015. Bằng cách nhấp chuột phải vào file cài đặt và chọn vào Exact to Adobe Photoshop... để giải nén ra thư mục ngay tại nơi dowload.

Bước 2: Ta mở thư mục giải nén ra chọn file cài đặt nhấn Click chuột để tiến hành cài đặt. Giờ ta chờ cho file cài đặt được setup xong 100% thì đi đến bước kế tiếp.

Bước 3: Sau khi file cài đặt được setup thành công ta tiếp tục chọn vào Sign In Later để bỏ qua bước đăng nhập tài khoản Adobe.

Bước 4: Tiếp tục chọn vào Start trial để dùng thử phần mềm 30 ngày miễn phí.

Bước 5: Cuối cùng ta chọn vào Accept để chấp nhận điều khoản và hoàn thành cài đặt.

Bước 6: Ok! Sau khi anh em nhấp vào Accept thì phần mềm sẽ tự động mở ra, giờ ta sẽ tiến hành kiểm tra bản quyền sử dụng coi có phải đang là bản Trial hay không, bằng cách như sau:

Ngay tại thanh công cụ trên cùng anh em chọn vào Help → System info để xem thông tin phần mềm. Giờ chúng ta kéo xuống phía dưới và tìm dòng "License type" "Serial number".

Nếu nó để là "License type: Tryout version" "Serial number: Tryout version" thì đúng là ta đang sử dụng bản miễn phí như lúc nãy ta vừa setup.

Ok! Như vậy là chúng ta đã cài đặt thành công phần mềm Photoshop, giờ chúng ta tiếp tục đến bước Active phần mềm.

Hướng dẫn Active phần mềm Photoshop

Bước 1: Đầu tiên anh em cần phải tải về file Active đã, mọi người nhấp vào nút dowload bên dưới này.

Download

Bước 2: Để sử dụng phần mềm anh em cần phải tắt hết tất cả các chương trình diệt vai rớt và phần mềm photoshop đi trước nhé!

Bước 3: Giờ ta tiến hành giải nén tập tin vừa tải về thành công và mở file Active bằng cách nhấp chuột phải và chọn vào Open.

Bước 4: Ngay tại thanh lựa chọn đầu tiên anh em tìm tới Adobe Photoshop CC 2015 và chọn vào.

Bước 5: Sau khi chọn vào xong ta nhấn vào "Install" để tiến hành Active phần mềm.

Bước 6: Tìm tới thư mục cài đặt photoshop và chọn vào file cần Active sau đó nhấn Open.

Bước 7: Nếu anh em chọn đúng thì sẽ nhận được thông báo từ phần mềm như sau "WORKING DONE".

Bây giờ ta quay trở lại phần mềm và kiểm tra lại bản quyền lần nữa xem như thế nào. Nếu không còn chữ "Tryout version" thì chúc mừng anh em đã Active thành công ^^. Xem ảnh kết quả dưới này.

Tổng kết

Ok! Vậy là Ryan đã hướng dẫn cho anh em xong cách cài đặt và active phần mềm Photoshop CC 2015, hy vọng những kiến thức mình chia sẻ hữu ích với mọi người.

Trong lần chia sẻ tới mình sẽ hướng dẫn anh em tải và sử dụng một phần mềm ghép trời vô cùng bá đạo chỉ cần nhấp chuột chọn trời và chờ kết quả mọi công việc khác như xóa phông, ghép nền trời và lens màu đều được tự động hóa hoàn toàn bằng công nghệ AI, nghe ghê quá phải không :))

Mà nó hay thiệt đó mọi người. Cùng đón chờ bài chia sẻ phần mềm kế tiếp của mình nhé. Còn giờ thì bái bai và hẹn gặp lại!

Tài liệu tham khảo:

Which version of Windows operating system am I running? - Support Microsoft

Xóa bỏ biểu tượng chỉnh sửa và thêm bài viết liên quan

noreply@blogger.com (Lợi Ryan) — Sun, 14 Jun 2020 09:28:00 +0000

Hello! Chào anh em, như đã hứa trong bài viết này Ryan sẽ cùng mọi người khắc phục lỗi biểu tượng cờ lê và bút chì xuất hiện bên ngoài giao diện website Blogspot, cũng như bổ sung thêm tiện ích bài viết liên quan vào cho template mẫu mà chúng ta đã cài đặt.

Nội dung bài viết

1.Biểu tượng cờ lê và bút chì là gì?
2.Hướng dẫn xóa bỏ biểu tượng cờ lê và bút chì cho Blogspot
2.1 Loại bỏ icon bút chì trong bài viết
2.2 Loại bỏ icon cờ lê trên giao diện website
Bonus: Xóa bỏ biểu tượng cờ lê bằng thuộc tính CSS
3.Hướng dẫn thêm bài viết liên quan cho Blogger
4.Tổng kết

Thật ra việc xuất hiện các biểu tượng này cũng không phải chuyện gì quá nghiêm trọng, mà nó chỉ là 1 tính năng trong Blogger.

Nếu anh em xem website dưới dạng khách truy cập thì sẽ không nhìn thấy những biểu tượng này, bởi! Nó có ảnh hưởng tới đọc giả/ khách của chúng ta đâu. Thế sao ta phải xóa nó làm gì:))

Ờ thì...mình biết là vậy nhưng cái chính nó làm cho chúng ta đôi lúc sẽ cảm thấy khá khó chịu khi cứ nhìn thấy những icon này xuất hiện trên website. Để không phải khó chịu nữa thì mình xóa nó đi thôi.

Biểu tượng cờ lê và bút chì là gì?

Cờ lê và bút chì là những công cụ chỉnh sửa nhanh mà Blogger cung cấp cho chúng ta để có thể nhanh chóng thực hiện thao tác chỉnh sửa các widget hay bài viết ngay trực tiếp tại website, mà không phải quay trở lại giao diện quản trị của Blogger.

Những biểu tượng này luôn xuất hiện khi chúng ta đăng nhập vào blogger.com. Dù nó có ích khi giúp ta nhanh chóng chỉnh sửa, nhưng chính cái có ích đó lại làm cho mình có cảm giác website rất mất thẩm mỹ, mỗi lần mình quay lại web để kiểm tra những thay đổi đã được lưu.

Với những người khó tính thì đây không phải là 1 tính năng hay ho cho lắm, ngược lại trông nó rất phiền phức và rối mắt.

Vậy chúng ta phải làm thế nào để loại bỏ những icon cờ lê và bút chì đáng ghét này. Nó rất đơn giản anh em xem và làm theo hướng dẫn của Ryan nhé!

Hướng dẫn xóa bỏ biểu tượng cờ lê và bút chì cho Blogspot

Trong phần này chúng ta sẽ tiến hành xóa lần lượt icon bút chì trước, kế đến sẽ là icon cờ lê. Ok! Chúng ta bắt đầu luôn nào.

Loại bỏ icon bút chì (Quick edit icon) trong bài viết

Bước 1: Anh em đăng nhập vào blogger.com và ngay tại giao diện quản trị của Blog anh em chọn vào mục "Bố cục" (Layout)

Bước 2: Ngay tại đây, chúng ta kéo xuống vào tìm hộp công cụ có tên là "Bài đăng trên blog" (Blog Posts) nó nằm trong phần main. Ta tiếp tục nhấp chọn vào dòng chữ "Chỉnh sửa" (Edit) để tiến hành mở hộp công cụ bài đăng.

Bước 3: Ta nhấp bỏ chọn ô có tên "Hiển thị chỉnh sửa nhanh" (Show Quick Editing), chọn "Lưu lại" và giờ chúng ta quay lại website để kiểm tra kết quả.

Đó chỉ vậy thôi là anh em mình giải quyết xong 1 thằng rồi :D. Giờ ta giải quyết thằng kế tiếp nào.

Loại bỏ icon cờ lê (Wrench icon) trên giao diện website

Bước 1: Cũng ngay tại giao diện quản trị của Blogger chúng ta chọn vào mục "Chủ đề" nhấp vào dấu "..." và chọn vào dòng "Chỉnh sửa HTML" (Edit HTML) để truy cập vào phần chỉnh sửa HTML của Template.

Bước 2: Ta nhấn phím Ctrl + F và tìm kiếm đoạn mã sau

<b:include name='quickedit'/>

Bước 3: Anh em có thể xóa bỏ nó đi luôn hoặc thay thế nó bằng đoạn code sau

<!-- b:include name='quickedit' -->

Đoạn code <b:include name='quickedit'/> có thể có nhiều hơn 1 đoạn, cụ thể nó tương ứng với số lượng widget đang có trên website của anh em. Nếu anh em thêm widget mới thì đồng nghĩa nó cũng sẽ xuất hiện thêm 1 đoạn mã. Do đó, anh em nhớ xóa hoặc thay thế hết các đoạn mã tương tự có trong phần chỉnh sửa Template nhé!

Bước 4: Xong rồi không còn bước nào nữa, giờ lưu lại và xem kết quả nào.

Bonus: Xóa bỏ biểu tượng cờ lê bằng thuộc tính CSS

Nếu anh em thấy cách trên quá rắc rối khi mỗi lần thêm 1 widget mới chúng ta lại phải tìm và xóa bỏ/ thay thế nó bằng đoạn code mình cung cấp bên trên thì đây mình sẽ chỉ cho anh em cách làm đơn giản hơn.

Ok! Anh em làm theo mình nhé! Do biểu tượng này được gán 1 giá trị là "quickedit" nên chúng ta sẽ lợi dụng nó để ẩn icon cờ lê đi bằng thuộc tính "none" trong CSS. Cụ thể như sau:

Bước 1: Anh em truy cập vào phần "Chỉnh sửa HTML" và tìm đoạn code

]]></b:skin

Bước 2: Anh em thêm đoạn code sau lên trên đoạn code vừa tìm được, sau đó lưu lại và kiểm tra. Sau này chúng ta không phải lo thay thế hay xóa gì nữa nhé ^^!

.quickedit{display:none;}

Ok! Chỉ vậy thôi là mấy cái icon củ cải đó sẽ biến mất hết. Chúc anh em thành công :))

Hướng dẫn thêm bài viết liên quan cho Blogger

Bây giờ chúng ta vào công việc chính là bổ sung thêm tiện ích Related Posts cho bài viết trên web. Lần trước khi chúng ta thêm các bài viết demo cho blog trong phần hướng dẫn chuẩn hóa giao diện website

Nếu anh em chú ý thì sẽ phát hiện ra lỗi ở phần Related Posts không hiển thị chính xác bài viết liên quan và bị mất hình ảnh.

Đó cũng là lý do mà mình viết bài này để giúp anh em khắc phục lỗi đó. Ok! Không lằng nhằng nữa anh em mình vô làm luôn thôi.

Bước 1: Anh em ta lại quay về phần "Chỉnh sửa HTML" và tìm đoạn code sau

</head>

Bước 2: Anh em Copy và Paste đoạn code sau lên bên trên đoạn code mà ta vừa tìm được

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
  float:left;
  width:auto;
}
#related-posts h2 {
  margin-top:10px;
  background:none;
  padding:3px;
}
#related-posts .related_img {
  margin:5px;
  border:4px solid #f2f2f2;
  width:105px;
  height:105px;
  transition:all 300ms ease-in-out;
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  -o-transition:all 300ms ease-in-out;
  -ms-transition:all 300ms ease-in-out;
}
#related-title {
  color:#222;
  line-height:16px;
  padding:0 10px;
  text-align:center;
  text-shadow:0 2px 2px #fff;
  width:100px;
}
#related-posts .related_img:hover {
  opacity:.7;
  filter:alpha(opacity=70);
  -moz-opacity:.7;
  -khtml-opacity:.7;
}
#related-title:hover {
  text-decoration:underline;
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5inaAeaXkpYLDNceWRujMz60Z2hnGeaCXN8W6JnJb7DnBk81nt9jV0ponGp76bifp-1JGjKIBmzSyNoL3h9zvKwOhVLL8OpmAstIKiZ1rqlDcVP_lCl3ldNfu2jNigeR3mZtyAFcVO8Uo/s1600-rw/no-thumbnail.webp";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5inaAeaXkpYLDNceWRujMz60Z2hnGeaCXN8W6JnJb7DnBk81nt9jV0ponGp76bifp-1JGjKIBmzSyNoL3h9zvKwOhVLL8OpmAstIKiZ1rqlDcVP_lCl3ldNfu2jNigeR3mZtyAFcVO8Uo/s1600-rw/no-thumbnail.webp'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]></script>
</b:if>

Bước 3: Anh em tiếp tục tìm kiếm đoạn code sau

<div class='post-footer'>

Có 2 đoạn code như vậy anh em tìm đoạn thứ 2 nhé!

Bên trên nó sẽ có đoạn code như sau

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<section class='boxframe' id='related-posts'> 
<div id='related-posts'> 
<script type='text/javascript'> 
//<![CDATA[ 
var ry='<h3 class="heading-border"><span>Related Posts</span></h3>';rn='<h3 class="heading-border"><span>No related post available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes'; var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0FIF3uS2UWKRBx1W1C9qF3klR2wklHR3Nzq6sC-wAdK5jACVkBQ8oIK8mX8G6Cq3XmNb5KtoX8JrmbXCA2h0yliwKPmLIzvJlE7neB6n-hTCpn1p7fNNPP9qvFquUHjqjylRk_8oBJWi/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw}; 
//]]></script> 
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/> 
</b:loop> 
<script type='text/javascript'> 
var maxresults=4;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);
</script> 
</div> 
<div class='clear'/> 
</section> 
</b:if>

Bước 4: Ta sẽ thay thế toàn bộ đoạn code vừa tìm thấy bằng đoạn code bên dưới này

<!-- Related post  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div id='related-posts'>       
<b:loop values='data:post.labels' var='label'>            
<b:if cond='data:label.isLast != &quot;true&quot;'>        
</b:if>        
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>        
<script type='text/javascript'>            
var currentposturl=&quot;<data:post.url/>&quot;;           
var maxresults=4;           
var relatedpoststitle=&quot;<b style='font-size: 22px;color: #000;'>Bài viết liên quan:</b>&quot;;            
removeRelatedDuplicates_thumbs();            
printRelatedLabels_thumbs();        
</script>    
</div>
</b:if>
<!-- End Related post  -->

Bước 5: Sau khi thay thế xong chúng ta lưu lại và kiểm tra thành quả. ^^

Demo

Tổng kết

Ok! Như vậy là mình đã hoàn thành xong bước hướng dẫn cho anh em cách khắc phục tình trạng xuất hiện các icon chỉnh sửa trên giao diện của website, cũng như bổ sung thành công tiện ích bài viết cùng chuyên mục cho Blogspot.

Trong bài viết tiếp theo, Ryan sẽ cùng mọi người thực hiện những chỉnh sửa cơ bản để làm đẹp cho website bằng CSS, như thay đổi kiểu chữ, kích cỡ, định dạng, thay đổi màu sắc, đóng khung các thành phần trong website, .vân. vân. .và. .vân. .vân. Cùng chờ nhé (●'◡'●).

Nếu anh em có thắc mắc nào thì nhớ để lại comment dưới phần bình luận mình sẽ giải đáp cho mọi người. Chúc anh em thành công. Còn giờ thì bái bai và hẹn gặp lại anh em.

Chuẩn hóa giao diện website từ Template mẫu

noreply@blogger.com (Lợi Ryan) — Thu, 11 Jun 2020 03:24:00 +0000

Hello, anh em! Trong bài viết này Ryan sẽ cùng mọi người hoàn thành nốt công việc kế tiếp sau khi chúng ta đã tải giao diện lên website thành công.

Với những anh em vẫn chưa biết cách làm thế nào để cài một giao diện mới cho Blogger thì anh em nên quay lại bài hướng dẫn Tải và cài đặt template cho Blogspot của mình để xem và thực hành.

Nội dung bài viết

1.Cài đặt Logo cho Blogger
2.Cài đặt Widget cần thiết cho Web
2.1 Search Box (Thanh công cụ tìm kiếm)
2.2 Newsletter form (Hộp đăng ký nhận thông báo)
2.3 Social Media (Icon mạng xã hội)
3.Cài đặt các tính năng khác cho Web
3.1 Thêm khung tác giả ở cuối mỗi bài viết
3.2 Thêm Breadcrumbs chuẩn SEO cho web
3.3 Thêm nút chia sẻ mạng xã hội cho web
3.4 Thay đổi style cho Label Cloud
4.Tổng kết

Còn ở trong khuôn khổ bài viết này, chúng ta sẽ cùng nhau hoàn thiện giao diện website dựa trên template mà chúng ta đã tải về trước đó.

Ok! Không làm mất thời gian của anh em nữa chúng ta bắt tay vào công việc chính luôn nào.

Cài đặt Logo cho Blogger

Đầu tiên, chúng ta sẽ quay trở lại thư mục mà chúng ta giải nén lần trước, tại đây anh em sẽ nhìn thấy 2 File và 1 Folder.

Trong đó, có 1 file là Template có định dạng .xml, 1 file là file ảnh Logo và 1 Folder Document chứa tài nguyên. Tạm thời chúng ta sẽ không cần chú ý đến Folder, mà ta chỉ làm việc với file ảnh.

Anh em ghi nhớ địa chỉ lưu của File ảnh để lát nữa chúng ta tìm cho dễ. Bây giờ chúng ta đăng nhập vào Blogger và ngay tại giao diện quản trị anh em chọn vào tab "Bố cục"

Ở bảng bố cục bên phải anh em tìm đến Box có tên là "blog-title" sau đó nhấp vào "Chỉnh sửa" để bắt đầu thêm Logo vào cho website.

Sau khi nhấp vào "Chỉnh sửa" ngay lập tức một hộp Popup sẽ hiện ra, đây là công cụ để chúng ta có thể tùy chình phần Tiêu đề, mô tả và chèn thêm logo vào cho web.

Tại đây chúng ta sẽ tiếp tục nhấn vào nút "Chọn tệp" để tải ảnh lên "Từ máy tính của bạn", ta tìm đến địa chỉ lưu thư mục giải nén ban nãy mở nó ra và chọn đến file ảnh có sẵn bên trong thư mục để upload lên bằng cách nhấn vào "Open".

Anh em chờ 1 chút cho file được hệ thống load lên hoàn tất thì nhấn vào nút "Lưu" nằm ở phía trái góc dưới cùng.

Như vậy là chúng ta đã upload logo cho website thành công, giờ anh em mình quay trở lại website và xem như thế nào nhé!

Lưu ý: Nếu anh em không thích sử dụng Logo của mình anh em có thể tự chọn cho mình 1 logo khác, điều này là không bắt buộc nên anh em cứ thoải mái mà lựa chọn. Tuy nhiên, anh em chỉ nên chọn ảnh có kích thích bằng hoặc nhỏ hơn kích thước file ảnh Logo đã được gửi sẵn trong thư mục BS3 (chọn ảnh ≤ 344x125)

Cài đặt Widget cần thiết cho Web

Ok! Xong phần Logo rồi. Giờ anh em mình chèn tiếp các widget vào cho web để tăng thêm sự chuyên nghiệp nào ^^.

Thêm các Widget vào web rất đơn giản, công việc của chúng ta chỉ là copy và paste. Làm luôn thôi anh em, let's go!

Search Box (Thanh công cụ tìm kiếm)

Widget đầu tiên Ryan muốn cùng anh em thêm vào đó là Search Box. Để thêm widget này anh em ta lại quay trở về thư mục giải nén và giờ ta mở Folder Document ra.

Sau khi mở Folder ra xong anh em sẽ thấy có rất nhiều file có định dạng là .txt. Anh em đừng hoang mang, cứ làm theo mình là được.

Tại đây anh em di chuyển chuột đến File có tên "Widget search form", mọi người nhấp chuột phải vào File sau đó chọn vào dòng chữ "Open with", chọn tiếp "Notepad" và nhấn "Ok" để mở File .txt.

Tiếp theo anh em nhấn tổ hợp phím Ctrl + A và Ctrl + C để copy toàn bộ những gì có trong File, chút nữa chúng ta sẽ cần dùng tới.

Giờ chúng ta quay trở lại giao diện quản trị của Blogger và vào lại tab "Bố cục" sau đó ở phần bố cục bên phải anh em tìm đến Box có tên "sidebar", chúng ta chọn vào ô "Thêm tiện ích".

Lúc này sẽ có 1 hộp tiện ích Popup hiện ra, mọi người tìm tới mục có tên "HTML/ Java Script" và nhấp vào dấu "+" để thêm tiện ích vào box "sidebar"

Sau khi nhấp vào dấu "+" một hộp tiện ích "HTML/ Java Script" sẽ xuất hiện, lúc này anh em Paste toàn bộ đoạn code mà ta vừa copy ở file .txt vào ô "Nội dung" và nhấn vào "Lưu" để hoàn tất việc thêm Search Box vào thanh Sidebar trên web!

Đơn giản quá đúng không! Giờ anh em mình quay trở lại web để xem thành quả như thế nào nào :))

Demo

Ok! Chúng ta làm tương tự như trên cho 2 File Widget kế tiếp "Widget Newsletter form" và "Widget Social buttons", ở 2 widget này mình sẽ đặt tên cho dễ dàng quản lý nhé!

Newsletter form (Hộp đăng ký nhận thông báo)

Tương tự như widget Search form, mọi người cũng mở file .txt có tên "Widget-Newsletter-form" và copy toàn bộ đoạn code chứa trong đó.

Sau đó quay trở lại giao diện quản trị của Blogger, đi đến phần "Bố cục", tìm box "sidebar" nhấn vào "Thêm tiện ích HTML/ Java script" và Paste toàn bộ code vào phần nội dung.

Chúng ta sẽ đặt tên cho Widget ngay mục "Tiêu đề" như hình sau đó nhấn "Lưu" để hoàn tất.

Demo

Lưu ý: Đối với Widget này, có 2 đoạn code anh em cần phải thay thế bằng mã feedburner trong Blog của anh em để đảm bảo Widget hoạt động chính xác.

Đoạn 1: http://feedburner.google.com/fb/a/mailverify?uri=Terocket

Đoạn 2: <input type="hidden" value="Terocket" name="uri" />

Ở 2 đoạn code này anh em thay thế "Terocket" thành mã feed burner của anh em vào.Làm thế nào để xác định được mã Feedburner của website Blogger?

Rất đơn giản anh em cứ làm y hình là được :)). Đầu tiên thêm một tiện ích mới có tên là "Theo dõi qua Email"

Sau khi hộp tiện ích mở ra, anh em chú ý vào đoạn mã mình tô đậm nằm ở cuối của đường link http://feeds.feedburner.com/Mã feedburner, đấy chình là mã Feedburner của anh em.

Giờ anh em chỉ việc copy đoạn mã này và Paste vào thay thế đoạn mã "Terocket" và "Lưu" lại là được.

Còn tiện ích mới này anh em nhấn vào "Hủy" để chọn không thêm tiện ích vào web.

Social Media (Icon mạng xã hội)

Phần này hơi khác 1 chút, anh em làm theo Ryan để tránh bị lỗi. Sau khi mở File .txt bằng Notepad mọi người cần để ý mục note dưới cùng /*Thêm đoạn code...*/ phần này anh em không copy chung với đoạn code bên trên mà sẽ copy sau nhé!

Ok! Giờ anh em copy phần code bên trên để paste vào tiện ích "HTML/ Java Script" và "Lưu" lại.

Sau khi hoàn thành xong anh em quay lại file Notepad và copy đoạn code cuối.

Giờ ta trở lại giao diện quản trị của Blogger, đi đến Tab "Chủ đề", chọn tiếp vào dấu "..." và tiếp tục đến phần "Chỉnh sửa HTML"

Ngay tại giao diện "Chỉnh sửa" của theme anh em chọn vào Ctrl + F và gõ </head> để tìm kiếm thẻ đóng head.

Sau khi tìm thấy thẻ ta Paste đoạn code vừa copy lên phía trên nó. Sau đó chúng ta lưu lại.

Xong giờ mọi người quay lại website và xem kết quả thôi :v

Trông xịn xò ra phết rồi :)). Ngoài ra, anh em còn có thể thay đổi vị trí các Box để trông thuận mắt hơn bằng cách di chuyển các Box lên xuống trong phần "sidebar".

Demo

Lưu ý: Anh em nhớ bổ sung đường link mạng xã hội của anh em vào đoạn <a href="Link social"...></a> để các icon hoạt động, anh em mà không bổ sung thì mấy icon này nó chỉ dùng trưng cho đẹp thôi :))

Cài đặt các tính năng khác cho Web

Ok! Giờ chúng ta đến công đoạn cuối cùng là bổ sung các tính năng còn thiếu cho Website. Bao gồm khung tác giả, thanh trạng thái breadcrumbs, nút chia sẻ mạng xã hội và thay đổi Style cho nhãn để trông bắt mắt hơn. Anh em mình bắt đầu luôn thôi!

Trước khi thêm các tính năng này anh em cần bổ sung 1 vài bài viết + thêm nhãn demo cho web trước! Nếu bạn chưa biết cách thêm nhãn, thì nên tham khảo qua bài viết những tính năng từ cơ bản đến nâng cao trong Blogger mình đã có hướng dẫn

Thêm khung tác giả ở cuối mỗi bài viết

Tương tự như thêm Widget anh em mở file "Author-box-for-Posts" bằng Notepad và thực hiện như sau:

Bước 1: Anh em quay trở lại giao diện quản trị của Blogger, đi đến tab "Chủ đề", chọn vào "Chỉnh sửa HTML"

Bước 2: Tại giao diện chỉnh sửa của theme, anh em nhấn phím Ctrl + F và tìm kiếm đoạn code sau

<data:post.body/>

Sau đó copy và paste đoạn code sau bên dưới nó

<!-- Author Box --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='authorboxwrap'> 
<div class='authorboxfull'> 
<div class='avatar-container'> 
<a href=''> 
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/> 
</a> 
</div> 
<div class='author_description_container'> 
<h4>Author: <a href='#' rel='author'><data:post.author/></a></h4> 
<p> <data:post.authorAboutMe/> </p> 
<div class='authorsocial'> 
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a> 
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> 
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a> 
<div class='clr'/> 
</div> 
</div> 
</div> 
</div> 
<div style='clear:both'/> 
</b:if> 
<!-- End Author Box -->

Bước 3: Anh em tiếp tục tìm kiếm đoạn code

]]></b:skin>

Bước 4: Sau đó copy và thêm đoạn code này phía trên nó

/* CSS Author Bio Box by MS Design */
.authorboxwrap {
  Font-family:Open Sans;
  background:#fff;
  margin:10px auto 20px;
  padding:20px;
  overflow:hidden;
  border:1px solid #ccc;
}
.avatar-container {
  float:left;
  margin-right:20px;
  border:1px solid silver;
  padding:3px;
}
.avatar-container img {
  width:110px;
  height:auto;
}
.author_description_container h4 {
  font-family:Open Sans;
  font-weight:700;
  font-size:16px;
  display:block;
  margin:0;
  margin-bottom:2px;
}
.author_description_container h4 a {
  color:#ef4824;
}
.author_description_container h4 a:hover {
  color:#404040;
}
.author_description_container p {
  margin:0;
  color:#888;
  font-size:95%;
  margin-bottom:8px;
  font-family:Open Sans;
}
.authorsocial a {
  display:inline-block;
  text-align:center;
  margin-right:10px;
}
.authorsocial a i {
  font-family:Fontawesome;
  width:25px;
  height:25px;
  padding:5px;
  display:block;
  opacity:1;
  border-radius:50%;
  transition:all .3s;
}
.authorsocial a:nth-child(1) i {
  background:#2d609b;
  color:#fff;
}
.authorsocial a:nth-child(2) i {
  background:#19bfe5;
  color:#fff;
}
.authorsocial a:nth-child(3) i {
  background:#eb4026;
  color:#fff;
}
.authorsocial a:hover:nth-child(1) i,
.authorsocial a:hover:nth-child(2) i,
.authorsocial a:hover:nth-child(3) i {
  opacity:0.90;
}

Ok! Giờ anh em lưu mẫu lại và xem kết quả.

Demo

Nhớ bổ sung đường link mạng xã hội của anh em vào đoạn <a href="Linksocial"...></a> để các icon hoạt động, không thì chỉ dùng để trưng thôi đấy

Nếu anh em search thấy có nhiều hơn 1 đoạn <data:post.body/> thì anh em thử từng cái 1 và quay lại web kiểm tra cho đến khi Box tác giả xuất hiện là được nhé!

Thêm Breadcrumbs chuẩn SEO cho web

Ok! Ta tiếp tục bổ sung Breadcrumbs cho website, bằng cách mở file .txt "Code-Breadcrumbs" và thực hiện như sau:

Bước 1: Anh em đi tới phần "Chỉnh sửa HTML" và tìm đoạn code sau

<b:include data='top' name='status-message'/>

Bước 2: Anh em copy và dán đoạn code sau bên dưới nó

<b:include data='posts' name='breadcrumb'/>

Bước 3: Anh em tiếp tục tìm đoạn code

<b:includable id='main' var='top'>

Bước 4: Chúng ta copy và dán đoạn code sau lên trên nó

<b:includable id="breadcrumb" var="posts"> 
<b:if cond="data:blog.homepageUrl == data:blog.url"> 
<!--No breadcrumb on home page--> 
<b:else> 
<b:if cond="data:blog.pageType == &quot;item&quot;">
<!--breadcrumb for the post page--> 
<a href="https://loiryan0202.blogspot.com/"> </a>
<p class="breadcrumbs">
<a href="https://loiryan0202.blogspot.com/"> 
<span class="post-navigation"> </span>
</a>
<a expr:href="data:blog.homepageUrl" rel="tag"> Home &gt;&gt; </a> 
<b:loop values="data:posts" var="post"> 
<b:if cond="data:post.labels"> 
<b:loop values="data:post.labels" var="label"> 
<b:if cond="data:label.isLast == &quot;true&quot;"> 
<a expr:href="data:label.url" rel="tag"> <data:label .name=""> &gt;&gt; </data:label></a> 
</b:if> 
</b:loop> 
<b:else> 
Unlabelled 
</b:else>
</b:if> 
<span> <data:post .title=""> </data:post></span> 
</b:loop> 
</p> 
<b:else> 
<b:if cond="data:blog.pageType == &quot;archive&quot;"> 
<!--breadcrumb for the label archive page and search pages..--> 
<p class="breadcrumbs"> 
<span class="post-labels post-navigation"> 
<a expr:href="data:blog.homepageUrl"> Home </a> 
Archives for <data:blog .pagename=""> </data:blog>
</span> 
</p> 
<b:else> 
<b:if cond="data:blog.pageType == &quot;index&quot;"> 
<p class="breadcrumbs"> 
<span class="post-labels post-navigation"> 
<b:if cond="data:blog.pageName == &quot;&quot;"> 
<a expr:href="data:blog.homepageUrl"> Home </a> All posts 
<b:else> <a expr:href="data:blog.homepageUrl"> Home </a> 
<span>Posts filed under <data:blog .pagename=""></data:blog></span> 
</b:else>
</b:if> 
</span> 
</p> 
</b:if> 
</b:else>
</b:if> 
</b:else>
</b:if> 
</b:else>
</b:if> 
</b:includable>

Bước 5: Anh em tiếp tục tìm đến đoạn code

]]></b:skin>

Bước 6: Sau đó anh em copy và paste đoạn code sau lên trên nó và lưu mẫu lại.

/* CSS Breadcrumbs */
.breadcrumbs {
  margin:0 0 15px 0;
  font-size:95%;
}
.post-navigation >
  a {
  color:#000;
  position:relative;
  text-decoration:none;
  transition:all 0.2s ease 0s;
}

Ok! Giờ ta có thể quay lại website và kiểm tra xem kết quả.

Demo

Anh em nhớ thay đoạn https://loiryan0202.blogspot.com thành địa chỉ trang blog của anh em nhé!

Thêm nút chia sẻ mạng xã hội cho web

Giờ chúng ta sẽ bổ sung thêm tính năng chia sẻ bài viết cho Blogger, tính năng chia sẻ này ở Blog mặc định cũng đã sẵn có nhưng nó rất xấu và không được chuyên nghiệp.

Do đó, anh em tụi mình sẽ bổ sung 1 công cụ chia sẻ ngon hơn để website của chúng ta thêm phần hiện đại. Ok! Bắt đầu nào.

Anh em mở file .txt "Share-Buttons-for-Posts" ra và thực hiện như sau

Bước 1: Ở phần "Chỉnh sửa HTML" anh em tìm đến đoạn code

</head>

Bước 2: Sau đó ta copy và paste đoạn code lên trên nó

<!-- Share Buttons --> 
<script type='text/javascript'>
//<![CDATA[//CSS Readyfunction 
loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]></script>

Bước 3: Ta tiếp tục tìm đến đoạn code

]]></b:skin>

Bước 4: Copy và paste đoạn code sau lên trên nó

/* Share Button */
.post-footer {
  margin-top:30px;
}
.share-post,
.multiauthor-box {
  margin-bottom:50px;
}
.share-post ul {
  padding:0;
  margin:0;
  text-align:center;
}
.share-post li {
  list-style:none;
  display:inline-block;
  margin-right:10px;
  padding:0;
  font-weight:700;
  text-transform:uppercase;
}
.share-post li:first-child {
  font-size:16px;
  color:#22a1c4;
}
.share-post li a {
  display:block;
  text-align:center;
}
.share-post span {
  display:none;
}
.share-post li a i {
  display:block;
  color:#fff;
  width:40px;
  height:40px;
  line-height:40px;
  font-size:18px;
  border-radius:40px;
  font-weight:normal;
  transition:all .3s;
}
.share-post {
  margin-bottom:0;
  border-top:1px solid #eff0f0;
  border-bottom:1px solid #eff0f0;
  line-height:52px;
  min-height:52px;
  margin-left:-30px;
  margin-right:-30px;
}
.share-post li a i.fa.fa-facebook {
  background:#3b5998;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-twitter {
  background:#19bfe5;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-google-plus {
  background:#d64136;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-linkedin {
  background:#006699;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-pinterest {
  background:#cb2027;
  border:1px solid transparent;
}
.share-post li a i.fa.fa-facebook:hover {
  background:#fff;
  color:#3b5998;
  border:1px solid #4666aa;
}
.share-post li a i.fa.fa-twitter:hover {
  background:#fff;
  color:#19bfe5;
  border:1px solid #2acef4;
}
.share-post li a i.fa.fa-google-plus:hover {
  background:#fff;
  color:#d64136;
  border:1px solid #e95247;
}
.share-post li a i.fa.fa-linkedin:hover {
  background:#fff;
  color:#006699;
  border:1px solid #017ab6;
}
.share-post li a i.fa.fa-pinterest:hover {
  background:#fff;
  color:#cb2027;
  border:1px solid #e33239;
}

Bước 5: Tiếp tục tìm đến đoạn code

<data:post.body/>

Bước 6: Copy và paste đoạn code sau bên dưới nó

<!-- Share post -->
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a>
</li>
</ul>
</div>
<!-- End share post -->

Ok! Giờ anh em lưu mẫu và trở lại website để xem thành quả.

Demo

Thay đổi style cho Label Cloud

Chúc mừng anh em nào đã đi đến bước này cùng mình. Chắc chắn giờ trang web của mọi người đã giống với web demo 80% rồi, phần cuối này chỉ là 1 phần nhỏ mà Ryan muốn bonus thêm để web của chúng ta trở nên pro hơn trong mắt khách hàng.

Còn với website hiện tại anh em đã sẵn sàng kiếm tiền với Blogger rồi ^^. Giờ hoàn thành nốt phần còn lại thôi!

Ok! Chúng ta mở file .txt "Style-Labels-Cloud" ra và thực hiện các bước như sau:

Bước 1: Chúng ta quay lại phần giao diện "Chỉnh sửa HTML" và tìm đến đoạn code

]]></b:skin>

Bước 2: Ta copy và paste đoạn code sau lên bên trên đoạn code mà ta vừa tìm thấy

/* cloud label */
.label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
  font-size:100%;
  filter:alpha(100);
  opacity:10;
}
.cloud-label-widget-content {
  text-align:left;
}
.label-size {
  background:#0dd7b4;
  display:block;
  float:left;
  margin:0 3px 3px 0;
  color:#ffffff;
  font-size:11px;
  text-transform:uppercase;
}
.label-size a,
.label-size span {
  display:inline-block;
  color:#ffffff !important;
  padding:6px 8px;
  font-weight:bold;
}
.label-size:hover {
  background:#333333;
}
.label-count {
  white-space:nowrap;
  padding-right:3px;
  margin-left:-3px;
  background:#333333;
  color:#fff !important;
}
.label-size {
  line-height:1.2;
}

Bước 3: Anh em lưu mẫu và trở lại website để xem thành quả thôi. Quá đơn giản :))

Demo

Tổng kết

Yeah! Vậy là Ryan và anh em đã hoàn thành xong thao tác chuẩn hóa Template để tạo ra 1 website chuyên nghiệp.

Nếu anh em để ý thì vẫn còn 1 lỗi nhỏ ở website đó chính là phần bài viết liên quan, các thumbnails không được hiển thị đúng.

Trong bài viết lần tới mình sẽ hướng dẫn anh em cách xóa bỏ biểu tượng chỉnh sửa và thêm tiện ích related posts cho website, nên anh em đừng lo lắng cứ yên tâm bắt tay vào việc tạo ra những bài viết đầu tiên đăng lên blog của anh em đi nhé!

Và đừng quên đăng ký hòm thư để nhận được thông báo sớm về các bài viết của mình ♪(´▽｀). Hẹn gặp lại anh em, bái bai!

Tài liệu tham khảo:

How do I creat a Blogger Feed? - Google Support

Hướng dẫn tải và cài đặt Template cho Blogspot

noreply@blogger.com (Lợi Ryan) — Tue, 09 Jun 2020 14:15:00 +0000

Hello, anh em! Như đã hứa hôm nay Ryan sẽ hướng dẫn cho mọi người cách để cài đặt Template cho Blogspot cực chuẩn để anh em bắt đầu viết Blog kiếm tiền. Để làm việc anh em cần phải chuẩn bị 1 giao diện website trước.

Mình đã chuẩn bị sẵn cho anh em 1 Template ngon lành, để chúng ta cùng nhau thực hành rồi, giá trị của nó là $9 và mình sẽ tặng cho anh em Miễn Phí nên anh em yên tâm, việc của mọi người chỉ là Dowload nó về và sử dụng là được.

Nội dung bài viết

1.Hướng dẫn tải template cho Blogspot
2.Cài đặt Template cho Blogspot
Cách 1: Upload File .xml lên bằng công cụ tải của Blogger cung cấp
Cách 2: Upload Template trực tiếp lên Blogger thông qua code từ File .xml
3.Tổng kết

Hướng dẫn tải template cho Blogspot

Ok! Giờ mình sẽ giới thiệu sơ qua cho anh em về Template mà anh em sắp tải về nhé! Để anh em yên tâm sử dụng :)) Dưới này là hình ảnh Demo của Template.

Em nó có giao diện sạch sẽ, cách bố trí gọn gàng dễ nhìn. Với 2 thanh menu điều hướng được đặt phía trên và dưới Logo giúp mọi người dễ dàng tìm kiếm chuyên mục mình yêu thích.

Bố cục web được chia làm 2 cột chuyên nghiệp, giao diện này cũng đã được mình tối ưu, nên tốc độ phản hồi phải nói là rất nhanh! Dưới này là đánh giá của Google Speed về tốc độ của web.

Đối với máy tính bàn:

Đối với điện thoại:

Không chỉ cho tốc độ phản hồi nhanh mà giao diện này còn được tối ưu hiển thị trên mọi thiết bị. Tuyệt quá luôn còn gì, đâu phải giao diện nào cũng được tối ưu sẵn như vậy có nhiều web ở desktop thì đẹp mà qua mobie nó phải nói là quá tệ.

Website cũng có sẵn các nơi để anh em tự đặt quảng cáo của mình hay Google Ads. Còn giờ anh em nào muốn xem qua giao diện của web thì nhấp vào nút "Demo" bên dưới này nhé!

Demo Download

Để bắt đầu tải Template anh em nhấp vào nút "Dowload" phía trên.

Sau khi nhấp vào anh em sẽ được chuyển tiếp tới trang Dowload template, anh em làm theo hướng dẫn sau để tải Template về nhé!

Ngay tại trang Dowload anh em nhấp vào nút "Dowload" trên cùng bên phải.

Sau đó, chọn nơi để lưu File, ở đây Ryan sẽ chọn lưu ở thư mục Dowload mặc định. Anh em có thể chọn nơi khác miễn sao anh em dễ quản lý là được.

File tải về sẽ ở dạng nén, anh em tiếp tục đi đến thư mục chứa File ta vừa tải về xong bằng cách nhấp vào dòng "Hiển thị trong thư mục" như trong ảnh bên dưới.

Ta tiến hành giải nén File vừa được tải về, nhấp chuột phải và chọn vào dòng "Exact to BS3" để giải nén file ra thành thư mục BS3 ngay tại nơi lưu trữ.

Nếu anh em làm đúng như mình hướng dẫn, anh sẽ nhìn thấy 1 thư mục cùng tên với File nén ta đã tải về có tên là "BS3" như vậy là ta đã giải nén thành công.

Cài đặt Template cho Blogspot

Ok! Giờ thì ta sẽ tiến hành cài đặt giao diện cho website blogger, ta sẽ có 2 cách để tải giao diện website lên Blogger, Ryan sẽ chỉ anh em từng cách 1.

Nhưng mình Recommend anh em làm theo cách thứ 2 bởi vì theo mình cách này sẽ giúp web chạy tốt và sạch sẽ hơn so với cách 1. Còn như nào thì anh em cứ theo dõi tiếp sẽ biết nhé :))

Cách 1: Upload File .xml lên bằng công cụ tải của Blogger cung cấp

Bước 1: Đầu tiên và quan trọng nhất là anh em phải đăng nhập vào Blogger, sau đó ngay tại giao diện quản trị của Blog chúng ta chọn vào Tab "Chủ đề"

Bước 2: Tiếp theo anh em chọn tiếp vào mục dấu "..." như hình bên dưới.

Bước 3: Sau đó chúng ta nhấp vào dòng "Khôi phục", tiếp tục chọn "Tải lên" để bắt đầu Upload Template lên blogspot

Bước 4: Tại đây anh em đi đến thư mục mà ta vừa giải nén thành công ban nãy, và chọn vào File BS3.xml để tải file lên nhé!

Giờ thì ta chờ cho File được upload thành công, bạn quan sát ở góc dưới bên trái sẽ có 1 hộp thoại thông báo của hệ thống, khi nhìn thấy hệ thống báo "Đã khôi phục chủ đề" thì ta đã Upload File thành công.

Ok! Bên trên là cách đầu tiên để anh em có thể tải lên giao diện website cho Blog của mình.

Nhược điểm của cách làm này chính là nó vẫn sẽ lưu giữ lại 1 vài đoạn code và những file widget của giao diện trước đó. Như vậy chúng ta sẽ phải mất công để loại bỏ đi những thứ râu ria không cần thiết.

Để có được 1 giao diện sạch sẽ gọn gàng, không chứa những thứ linh tinh không mong muốn anh em có thể chọn cách làm thứ 2 ngay bên dưới này.

Cách 2: Upload Template trực tiếp lên Blogger thông qua code từ File .xml

Bước 1: Tương tự như cách đầu tiên, anh em cũng cần đăng nhập vào Blogger, đi đến phần "Chủ đề" và chọn vào dấu "..." sau đó chọn tiếp vào dòng "Chỉnh sửa HTML" để đi đến giao diện chỉnh sửa của theme như hình bên dưới

Bước 2: Bây giờ anh em quay trở lại nơi chứa thư mục mà ta vừa giải nén xong, chúng ta sẽ nhấp chuột phải vào File "BS3.xml" và mở File thông qua Notepad bằng cách di chuột tới dòng "Open with" và chọn "Notepad" như hình.

Bước 3: Sau đó anh em nhấn tổ hợp phím Ctrl + A và Ctrl + C để copy toàn bộ code chứa trong File txt và Paste tất cả vào phần "Chỉnh sửa HTML" của Blogger bằng tổ hợp phím Ctrl + A và Ctrl + V.

Cuối cùng chúng ta nhấp vào nút lưu để hoàn tất quá trình tải giao diện, anh em xem hướng dẫn bên dưới và làm theo nhé!

Cũng như cách 1, anh em cần phải chờ cho File được Update thành công như hình bên dưới này.

Chúc mừng anh em đã đi đến bước này cùng mình, giờ ta hãy quay lại giao diện chính và chọn vào "Xem blog của bạn" để ngó xem website của ta như nào cái :))

Ok! Đây chính là giao diện website của chúng ta hiện tại.

Xem video hướng dẫn cách cài đặt template cho blogger bên dưới này:

Tổng kết

Như vậy là chúng ta đã cùng nhau đi qua 2 cách thức để có thể cài đặt 1 Template cho website, trong bài viết kế mình sẽ hướng dẫn anh em cách để chuẩn hóa giao diện Website từ template mẫu ta vừa cài đặt thành công, sao cho giống với bản Demo mà anh em đã xem qua.

Vì vậy, anh em nhớ đăng ký hòm thư để nhận được thông báo sớm từ Ryan về bài viết sắp tới nhé!

Còn giờ anh em có thể tìm hiểu về các tính năng trong Blogger để biết thêm các thao tác cơ bản.

Hiện tại, mình sẽ đi rất chậm ở những bài đầu để anh em quen dần, về sau chúng ta sẽ không lặp lại những bước đơn giản nữa. Ok! Bái bai và hẹn gặp lại anh em ^^.

Tạo Website miễn phí với blogger cho người mới

noreply@blogger.com (Lợi Ryan) — Mon, 08 Jun 2020 08:54:00 +0000

Hello, anh em! Hôm nay, Ryan muốn bắt đầu chia sẻ với mọi người cách để tạo ra một trang Web miễn phí từ nền tảng Blogger của Google.

Trong bài viết này, mình sẽ hướng dẫn anh em từng bước 1 từ việc tạo ra tài khoản gmail, đăng ký Blogger như nào cho đến khi anh em tạo ra được một Website hoàn chỉnh.

Anh em cứ Follow theo từng bước mình chỉ chắc chắn anh em sẽ làm được. Ok! Let's go.

Nội dung bài viết

1.Tại sao lại là Blogger mà không phải nền tảng Platform khác?
2.Những ai sẽ phù hợp với Blogger?
3.Hướng dẫn tạo Website miễn phí với Blogger
3.1.Hướng dẫn đăng ký Gmail
3.2.Tạo Website với Blogger
4.Tổng kết

Tại sao lại là Blogger mà không phải nền tảng Platform khác?

Lý do Ryan Recommend bạn chọn Blogger rất đơn giản.

Đầu tiên, vì nó miễn phí :)) Như vậy anh em mình sẽ không phải lo việc phải đóng tiền hàng tháng, hàng năm cho bên dịch vụ thứ 3. (Nghe là thấy ưng rồi ^^)

Thứ 2 nó là con của Google nên tất nhiên nó sẽ dễ được ưu tiên hơn trên trang tìm kiếm (Vì hầu hết mọi người vẫn đang dùng Google để tìm kiếm thông tin)

Câu cửa miệng của dân mạng hiện nay "Cái gì không biết thì hỏi Google " chỉ vậy thôi là anh em đủ hiểu được tầm quan trọng khi có được thứ hạng cao trên mục tìm kiếm rồi.

Tất nhiên mình không bảo cứ dùng Blogger là anh em sẽ lên Top cả thế thì quá cha rồi :)) Để lên Top của Google còn phụ thuộc nhiều yếu tố khác nữa liên quan đến tối ưu website, viết bài, lưu lượng truy cập, backlink gọi chung là SEO.

Những cái này mình sẽ cùng anh em trao đổi ở một bài viết khác còn nay anh em chỉ cần quan tâm đến cách tạo web bằng Blogger là được rồi.

Tốc độ duyệt web cực nhanh mà những hosting giá rẻ không làm được nếu được tối ưu tốt.

Tính ổn định cao (Sẽ có thời điểm website của bạn có rất nhiều người truy cập cùng lúc nếu host sever không tốt thì web sẽ dễ gặp các vấn đề như giật, lag, đứng web và tệ hơn là sập web, như vậy khách của bạn sẽ không vào web được).

Vì vậy việc lựa chọn hosting tốt là rất cần thiết cho những ai muốn website phát triển về sau này.

Thứ 3 dễ dàng tùy biến giao diện website theo ý muốn của mình nếu bạn có một chút kiến thức về HTML, CSS và JAVA SCRIPT (JS).

Bạn hoàn toàn có thể thiết kế ra 1 website bắt mắt bằng blogger mà chẳng thua kém bất kỳ nền tảng nào khác như Wordpress. Giống như Website Gacontapcode này là mình đã tự tạo ra sau khi học hỏi kinh nghiệm từ các đàn anh đi trước

Thậm chí nếu bạn không biết gì thì vẫn có rất nhiều Templates trên mạng rất đẹp bạn chỉ cần Add vào Blog và sử dụng là được.

Tuy nhiên, bạn nên lưu ý chỉ tải Template ở những nguồn đáng tin cậy tránh việc bị người khác cài mã độc vào web, ảnh hưởng đến sau này.

Thứ 4 có rất nhiều Plugin tùy biến để tăng thêm trải nghiệm và tính chuyển đổi của khách hàng khi truy cập vào website của bạn như (Popup, Livechat, Widget sticky, Bài viết liên quan,etc) Những thứ này mình sẽ hướng dẫn anh em trong các bài viết khác :)).

Thứ 5 dễ dàng cài đặt và sử dụng, cách tạo website với blogspot cũng đơn giản như cách tạo tài khoản Gmail hay Facebook, mình tin chắc ai cũng có thể làm được.

Vậy đó, có rất nhiều mặt lợi khi bạn sử dụng Blogger. Mặt hại thì sao?

Vấn đề về mặt hại này nằm ở chỗ chúng ta đang sử dụng dịch vụ host lưu của bên thứ 3 cụ thể là Google do đó Website/ Tài khoản của chúng ta có thể bị ngừng bất cứ khi nào nếu vi phạm chính sách của Google/ nếu Google ngừng cung cấp dịch vụ Blogger.

Những ai sẽ phù hợp với Blogger?

Để nói rằng ai phù hợp với việc viết Blog thì Ryan nói thật là ai cũng hợp cả, ngay cả cụ 70 vẫn có thể trở thành 1 Blogger nếu cụ muốn.

Vì vậy nó không có giới hạn cụ thể nào cả. Nhưng để anh em dễ hình dung thì mình xin mạng phép chia ra làm 3 kiểu người chính như sau:

1. Người muốn tìm nơi để chia sẻ niềm đam mê, kỹ năng và tâm sự của mình đến với cộng động mạng
2. Người muốn mang dịch vụ/ Sản phẩm của mình giới thiệu nhiều hơn đến cho khách hàng
3. Người thích kiếm tiền trên mạng từ nhiều nền tảng khác nhau (Rút gọn link, GA, CPC, CPS,CPL,etc)

Mình đoán mình thuộc cả 3 kiểu trên :)). Ok! Giới thiệu với anh em vậy đủ rồi. Giờ chúng mình vào công việc chính luôn nhé!

Hướng dẫn tạo Website miễn phí với Blogger

Để bắt đầu thì mọi người cần phải có 1 Gmail. Nếu ai chưa có thì cần phải tạo cho mình 1 gmail mới thì mới có thể làm tiếp những bước sau được,

Ai có rồi thì có thể bỏ qua bước này đi đến bước kế tiếp Hướng dẫn tạo website với Blogger. Ok! Giờ thì mình cùng nhau thực hiện bước 1 là tạo 1 Gmail mới thôi nào.

Hướng dẫn đăng ký Gmail

Bước 1: Bạn truy cập vào website https://mail.google.com để tạo Gmail mới

Bước 2: Click chuột vào "Tạo tài khoản" để bắt đầu tạo 1 tài khoản mới.

Bước 3: Nó sẽ hiện ra 1 hộp thoại hỏi rằng bạn muốn chọn loại Email nào, chúng ta cứ chọn tiếp vào mục "Cho bản thân tôi" để đi đến bước kế tiếp. Nếu là doanh nghiệp thì bạn có thể chọn mục bên dưới.

Sau khi nhấp vào đó xong, chúng ta sẽ được chuyển tới trang khai báo thông tin đăng ký. Có dạng như sau:

Bước 4: Ta điền các thông tin cần thiết vào và nhấn vào nút "Tiếp theo". Ở phần tên người dùng bạn có thể đặt nó là tên của mình/ tên theo brand mà bạn sẽ đặt cho website để dễ nhớ.

Ví dụ: Website mình là gacontapcode thì mình sẽ đặt luôn là gacontapcode, hoặc mình cũng có thể chọn theo tên như là loiryan.

Kế đến bạn nhập mật khẩu cho gmail

Lưu ý: Mật khẩu bạn đặt phải trên 8 ký tự kết hợp cả số, ký tự đặt biệt, chữ in hoa và chữ thường để tăng cường tính bảo mật của tài khoản

Sau đó bạn nhập lại lần nữa mật khẩu ở box "Xác nhận" để đảm bảo mật khẩu bạn đã đánh chính xác, nếu không chắc bạn có thể nhấn vào biểu tượng con mắt để xem lại mật khẩu mà bạn đã đặt trước đó và điền vào cho chính xác.

Bạn cũng không nên đặt mật khẩu quá phức tạp tránh sau này lại quên nhé! Mất công tạo mật khẩu mới thôi chứ cũng không có gì :)) Xem hình ảnh minh họa bên dưới này.

Ở trang kế, chúng ta sẽ cần nhập 1 số điện thoại vào để xác minh tài khoản email của mình, có một vài trường hợp bạn không cần phải xác thực hiện bước xác minh này.

Tuy nhiên, Ryan vẫn recommend bạn thêm số điện thoại vào email để có thể đảm bảo tính bảo mật và có thể khôi phục lại mật khẩu dễ dàng.

Bạn nhập số điện thoại của mình vào ô hướng dẫn sau đó nhấn vào nút "Tiếp theo" để tiếp tục đi đến bước nhập mã xác minh, mã này bao gồm 6 chữ số sẽ được Google gửi SMS đến số điện thoại bạn vừa nhập.

Vì vậy bạn cần lưu ý nhập đúng số nếu không sẽ không nhận được mã từ Google Nếu nhập sai anh em có thể chọn "Trở về" để điền lại số điện thoại cho đúng nên cứ yên tâm.

Ngoài ra, anh em cũng có thể chọn nghe cuộc thoại để lấy mã xác minh, hình thức cũng tương tự như nhận SMS thôi.

Như vậy là chúng ta gần hoàn thành bước đăng ký tài khoản rồi đấy, ở bước kế anh em chỉ cần bổ sung thêm email khôi phục tài khoản, ngày tháng năm sinh và giới tính vào nữa là xong, nếu anh em không có email khôi phục thì có thể để trống.

Chi tiết anh em xem ảnh bên dưới và làm theo mình nhé!

Ting! Chúng ta đã hoàn thành bước đầu tiên là đăng ký mới 1 tài khoản Gmail để khởi đầu cho việc tạo Website với Blogger. Bạn cũng có thể xem lại video Hướng dẫn đăng ký Gmail bên dưới này.

Giờ thì mình bắt đầu tạo một website mới với Blogger luôn chứ nhỉ ^^.

Tạo Website với Blogger

Bước 1: Anh em tiếp tục nhấp vào đường link sau để bắt đầu http://blogger.com

Bước 2: Ở trang giao diện của Blogger anh em nhấp vào chữ "Đăng nhập" ở phía bên phải trên cùng để đăng nhập và tạo 1 website mới.

Chọn đăng nhập bằng tài khoản gmail mà chúng ta vừa tạo xong.

Bước 3: Sau khi đăng nhập thành công, chúng ta sẽ được chuyển tiếp đến trang tạo Blog. Tại đây anh em cần đặt cho website của mình 1 cái tên (Ở đây mình sẽ đặt là Lợi Ryan Blog) và nhấn vào "Tiếp theo" để tiếp tục đến bước kế tiếp.

Bước 4: Tiếp tục nhập địa chỉ Website (Lưu ý: anh em chọn tên địa chỉ ngắn, gọn dễ nhớ là tốt nhất, có thể chọn theo brand/ tên từ khóa mà anh em muốn lên TOP tìm kiếm sau này, ví dụ: loiryan0202.blogspot.com/ sachmienphi.blogspot.com/ myphamgiasi.blogspot.com,etc) và nhấn vào "Tiếp theo" để tiếp tục.

Bước 5: Ở bước kế này bạn sẽ cần đặt tên cho Admin của Blogger, tên này sẽ được dùng cho nhiều website khác nhau cùng 1 tài khoản và hiển thị ở phần nhận xét nếu bạn nhận xét trên website/ hiển thị ở mục hồ sơ Admin ngay phần Widget nếu đó là website của bạn.

Sau đó bạn nhấn vào "Hoàn tất" để hoàn thành bước Setup cơ bản cho Website của bạn.

Nếu bạn đã hoàn thành đến bước này cùng mình thì Xin Chúc Mừng bạn, giờ bạn đã có 1 website của riêng mình rồi đấy ^^, và dưới này là giao diện quản lý website của Blogger.

Còn đây là giao diện Website của bạn

Tất nhiên ban đầu nó sẽ rất xấu nhưng bạn yên tâm ở bài kế Ryan tặng cho bạn 1 template rất đẹp và anh em tụi mình sẽ cùng nhau tiến hành cài đặt template lên Blogger, Ok!

Còn giờ để hiểu hơn về những tính năng cơ bản của Blogger bạn nên xem qua bài viết mình đã nói về chủ đề này, hoặc xem video sau:

Tổng kết

Ok! Vậy là với bài viết này Ryan cùng với anh em đã cùng nhau tạo ra được 1 gmail mới cũng như xác minh nó thành công bằng số điện thoại.

Chúng ta cũng đã thành công bước đầu tiên trong việc tạo ra website miễn phí với Blogger. Lần tới, anh em mình sẽ cùng tải và cài đặt theme thật đẹp cho Website của mình nhé!

Nghe thôi anh em cũng phấn khích rồi phải không :)) đừng vội trước hết anh em nên xem qua video Ryan chia sẻ về những tính năng trong Blogger trước, vì trong những bài viết tới mình sẽ không nhắc lại đâu mà chỉ vào và làm thôi đấy. Bái bai hẹn gặp lại anh em ^^!

Tài liệu tham khảo:

How to Creat a New Gmail Account - Tutsplus

Creat a blog - Blogger Help - Google Support