Hiện nay, hầu hết các website đều đã chuyển sang sử dụng giao thức HTTPS và nền tảng blogger cũng không là ngoại lệ.

Chuyển hướng http sang https cho blogspot

HTTP và HTTPS

⇒ HTTP - HyperText Transfer Protocol (giao thức truyền tải siêu văn bản) là một giao thức cơ bản dùng để truyền tải dữ liệu từ trình duyệt web đến máy chủ và ngược lại.
⇒ HTTPS - HyperText Transfer Protocol Secure là phiên bản "nâng cấp" của HTTP với độ bảo mật tăng lên rất nhiều thông qua các chứng chỉ SSL (Secure Sockets Layer).

Ví dụ
http://www.123itvn.com
https://www.123itvn.com

Chúng ta có thể thấy ngay được sự khác biệt giữa 2 đường link bên trên (ở chữ s), đó chỉ là 1 trong rất nhiều đặc điểm dùng để phân biệt 2 giao thức với nhau. Nếu có thời gian, mình sẽ chia sẻ nhiều hơn về HTTP và HTTPS. Còn bây giờ là lúc quay trở lại nội dung chính :)

Theo thông tin của Google, mặc dù https chưa khả dụng cho các blog có miền tùy chỉnh nhưng trong quá trình chuyển hướng từ http sang https, mình thấy mọi thứ vẫn trong tầm kiểm soát và thực sự là chưa có gì đáng để lo lắng.

Chuyển hướng http sang https cho blogspot

Nghe chuyển hướng thì hoành tráng vậy thôi, chứ thực ra blogspot đã hỗ trợ sẵn rồi, quản trị viên chỉ vào kích cmn hoạt lên là xong :))

- Đăng nhập blogger.
- Bên menu trái, chọn Cài đặt ⇒ Cơ bản.
- Tại mục HTTPS, chọn Có như hình dưới. Done.

Chuyển hướng http sang https cho blogspot

Những thay đổi khi chuyển hướng từ http sang https trên blogspot

Quảng cáo adsense tạm thời không hiển thị

Sẽ mất một thời gian (vài giờ ⇒ vài ngày) để blogger điều chỉnh và hiển thị lại quảng cáo của Google Adsense. Trong thời gian tiếp theo, đôi khi quảng cáo hiển thị cũng không ổn định cho lắm, nhưng từ từ rồi sẽ hết. Chỉ việc đợi thôi, không nên quá lo lắng nhé.

Thông tin web chưa hiện "Bảo mật" trên URL

Nguyên dân : do code của blogspot vẫn đang sử dụng hỗn hợp cả http và https.
Khắc phục :
- Tại menu trái của blogspot, chọn Chủ đề ⇒ Chỉnh sửa HTML.
- Nhấn tổ hợp phím Ctrl + F, tìm kiếm từ khóa "http:" và thay thế tất cả thành "https:"
Làm từ từ, lần lượt cho đến khi nào xong thì thôi.
- Lưu lại template và kiểm tra xem chữ "Bảo mật" đã xuất hiện chưa. Chúc thành công.

Thông tin trang web đã được "bảo mật"

Nếu muốn tìm hiểu kỹ hơn, bạn có thể xem hướng dẫn của Google tại đây.

Thao tác dành cho quản trị viên

Với Search Console (Google Webmasters)

- Truy cập Search Console, thêm trang web mới với URL chứa https.

Thêm trang web mới trên Search Console

- Thêm sơ đồ trang web và chỉnh sửa file robots.txt.

Với Google Analytics

- Truy cập Google Analytics. Bên menu trái, chọn Quản trị (hình bánh răng) ⇒ Cài đặt thuộc tính.
- Ở mục URL mặc định, chọn https:// rồi lưu lại là xong.

Cài đặt lại URL mặc định trên Google Analytics

---

Từ khóa tìm kiếm :

• cai dat https cho blogspot
• https for blogger
• chuyển từ http sang https
• chuyển hướng https blogger

• http ssl trên blogspot
• chuyển hướng http sang https blogspot
• bật chuyển hướng https blogspot
• chuyen huong http sang https

Mẫu bài đăng là một tính năng rất thú vị trên blogspot dành cho những website có nội dung bài viết được lặp lại nhiều lần (bán hàng online hay review ứng dụng chẳng hạn). 

Thiết lập mẫu bài đăng trên blogspot

Quản trị viên chỉ cần thiết kế nội dung cho mẫu bài đăng một lần duy nhất. Từ những lần tạo bài đăng mới tiếp theo, blogspot sẽ tự động hiển thị lại nội dung đó. Với 123itvn, mẫu bài đăng đơn giản chỉ là phần Từ khóa tìm kiếm nằm ở cuối mỗi trang.

Thiết lập mẫu bài đăng

- Đăng nhập vào blogspot.
- Bên menu trái, chon Cài đặt ⇒ Bài đăng, nhận xét và chia sẻ.
- Tại mục Mẫu bài đăng, quản trị viên nhập nội dung vào đó.

Lưu ý : Nội dung được viết bằng ngôn ngữ HTML - CSS, hãy đảm bảo là bạn am hiểu về chúng. Nếu cần trợ giúp, hãy liên hệ với mình để được hỗ trợ nhé ;)

Thiết lập mẫu bài đăng trên blogspot

- Nhấn Lưu cài đặt để hoàn tất.

Kết quả

Nội dung bài đăng mới trên 123itvn.com

---

Từ khóa tìm kiếm :

• mẫu bài đăng trên blogspot
• tạo mẫu bài đăng blogspot như nào

• thiết lập mẫu bài đăng blogger
• tao mau bai dang cho blogspot

Gắn bó với nền tảng blogger cũng gần 5 năm, ngày hôm nay, mình sẽ quyết định bóc phốt để em có 1 tương lai tươi đẹp hơn =)) 

Lời ngỏ : Ngày nào đó nếu đội ngũ quản trị Blogspot có đọc được những dòng này, mình hi vọng các bạn sẽ tiếp tục hoàn thiện sản phẩm tốt hơn nữa để anh em blogger có 1 sân chơi thật sự chất lượng.

Những hạn chế khi sử dụng blogspot

1. Tính năng phân trang chưa ổn

Đường link phân trang không chuyên nghiệp, vừa dài lại chứa quá nhiều ký tự.
Với khách truy cập website, có thể họ sẽ không để ý tới điều này nhưng dưới góc nhìn của một người quản trị viên thì thật khó mà chấp nhận đươc.

Ví dụ : http://www.123itvn.com/search/label/Dịch vụ?updated-max=2014-12-06T19%3A20%3A00%2B07%3A00&max-results=9#PageNo=2
⇒ Nếu đường dẫn trên được cập nhật ngắn gọn thành http://www.123itvn.com/label/Dịch vụ/2 thì đơn giản hơn rất nhiều đúng không ?

2. Chưa thể lấy view bài viết trực tiếp

Với blogspot, bạn chưa thể đưa ra số lượt xem (view) cho mỗi bài viết trong khi một số template kiểu haivl, 9gag hay xem.vn ... thì rất cần thông số lượt xem. Để làm được điều này chúng ta phải nhờ đến bên thứ 3, phức tạp hơn hẳn.
⇒ Blogger nên cung cấp 1 tham số để đưa ra view trực tiếp thì sẽ hay hơn, ví dụ như "data:post-viewcount".

Lượt view của bài viết

3. Tiện ích chưa nhiều và không thiết thực

27 là số tiện ích cơ bản mà blogspot cung cấp cho người dùng tại thời điểm hiện tại. Trong số đó mình chỉ thấy vài cái là ổn, có vẻ đội ngũ quản trị blogger chưa thực sự chú trọng đến vấn đề này.
⇒ Tiện ích nên thiết thực hơn, không cần nhiều nhưng ít nhất nó cũng đem lại sự tiện lợi cho quản trị viên và tăng được sự tương tác giữa khách truy cập với website. Về khoản này, có lẽ blogspot cần học hỏi WordPress nhiều :)

Tiện ích trên nền tảng blogger

Lời kết

Trước mắt chia sẻ thế đã. Blogspot thì nhiều lỗi lắm mà mình chưa có thời gian để bóc phốt :)) anh em nếu có đóng góp cứ comment bên dưới nhé. Mình sẽ tiếp thu để bài viết đầy đủ hơn.

---

Từ khóa tìm kiếm :

• nhược điểm của blogspot
• hạn chế của nền tảng blogger

• hạn chế khi sử dùng blogspot

Với thủ thuật này, việc biến ảnh thu nhỏ (thumbnail) từ video trên youtube thành ảnh thu nhỏ của bài viết với blogger sẽ trở nên dễ dàng hơn bao giờ hết.

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot

Mục tiêu

Bài viết của mình chỉ có duy nhất 1 video từ youtube, ngoài ra không chứa bất cứ hình ảnh nào khác. Trong khi đó, template hiện tại lại không hỗ trợ việc hiển thị ảnh đại diện (thumbnail) với nội dung từ video. Mình sẽ phải tìm cách nào đó để biến từ không thể thành có thể. Okie men :)

Yêu cầu
- Sao lưu template blogspot trước khi thao tác.
- Code template đã có dòng lệnh hỗ trợ javascript.

Xem demo

Code tự động lấy ảnh

<script type='text/javascript'>
var lk = '<data:post.thumbnailUrl/>';
var td = '<data:post.title/>';
//<![CDATA[
document.write('<img class="anhyoutube" src="'+lienket+'" title="'+tieude+'" alt="'+tieude+'"/>');
//]]>
</script>

Với đoạn mã này, ảnh thumbnail của video trên youtube sẽ được blogspot tự động lấy làm thumbnail cho bài viết. Bạn chỉ việc copy - paste nó vào vị trí cần thiết trong template là okie. Nói đơn giản vậy thôi còn trên thực tế cũng khoai đấy :))

Mỗi template được viết code rất khác nhau, nếu quản trị viên không nắm vững về các thẻ HTML, mã CSS, JavaScript ... thì việc hiển thị thumbnail sẽ trở nên khó khăn bởi đoạn code do mình cung cấp chỉ là phần cơ bản. Để ảnh thumbnail hiển thị đẹp, phù hợp với giao diện thì anh em cần tùy chỉnh thêm về CSS. Class của hình ảnh này là anhyoutube nhé.

Và đây là cách chèn code của mình - dưới góc nhìn của 1 người không chuyên. Hi vọng anh em có thể hiểu rõ hơn và áp dụng phần nào vào teamplate. Chúc thành công !

Sử dụng code trong blogspot

Lúc đầu, trang hiển thị bài viết theo Nhãn (Label) chưa hề có ảnh đại diện. Để thumbnail xuất hiện,  mình cần làm 3 việc sau đây :
1. Tìm class áp dụng cho label trong template.
2. Chèn code tự động lấy ảnh vào đó.
3. Tùy chỉnh CSS.

Ban đầu, chưa có ảnh

Bước 1 :  Tìm class (lớp) hoặc id 

Rõ ràng là mình không thể lần mò để tìm code label trong template bởi việc này sẽ tốn khá nhiều thời gian. Một cách làm khác đơn giản hơn là tìm kiếm gián tiếp thông qua trình duyệt.
- Chuột phải vào bài viết đầu tiên, chọn Kiểm tra (với Cốc Cốc, Chrome) hoặc Kiểm tra phần tử HTML (với Firefox) ...

Kiểm tra mã nguồn

- Bằng cách này, trình duyệt sẽ hiển thị đoạn mã HTML + CSS của đối tượng. Mình chỉ việc tìm class  đang được áp dụng cho bài viết ở trang Label mà thôi.
Sau khi xem xét, có thể kết luận thẻ <div> với class="post" chính lớp mình cần tìm (3 khung khoảnh đỏ). Okie, xong bước 1.

Đã tìm được class tương ứng

Bước 2 : Xác định vị trí của class hoặc id trong template

- Đăng nhập vào blogger. Bên menu trái, chọn Chủ đề ⇒ Chỉnh sửa HTML.

Mở phần chỉnh sửa HLMT trên blogger

- Đưa con trỏ chuột vào phần chứa nội dung template.
- Nhấn tổ hợp phím Ctrl + S để mở hộp tìm kiếm, sau đó nhập chính xác tên của đối tượng tìm được ở bước 1 mà cụ thể là class 'post'.

Lưu ý
- Bạn có thể nhập từ khóa là 'post' (ngoặc đơn) hoặc "post" (ngoặc kép) để hệ thống tìm được kết quả phù hợp (điều này phụ thuộc code trong template).
- Nếu template có nhiều class tên 'post' thì bạn phải tìm đúng class dùng cho việc hiển thị ở bước 1. Mình còn test lại bằng cách thêm thử 1 số ký tự vào dòng tiêu đề (H2). Lưu template lại, F5 xem tiêu đề trên web có thay đổi không cơ :))

Tìm đến class trong template

- Tìm đến thẻ <data:post.body/> bởi trong blogspot thì thẻ này luôn dùng để hiển thị nội dung bài viết. Sau đó paste đoạn mã tự động lấy ảnh vào ngay phía sau.

Chèn đoạn mã vào sau <data:post.body/>

Bước 3 : Chỉnh sửa CSS

Lưu template. F5 xem website đã hiển thị đúng ảnh thumbnail cho bài viết chưa ?
Kết quả là ảnh đại diện đã có, nhưng nó xuất hiện cùng clip nữa. Việc tiếp theo là phải ẩn clip đi. Cũng làm tương tự như bước 1, tìm đến class của video sau đó thêm thuộc tính CSS {display:none} là xong.

Giao diện hiển thị sau khi thêm đoạn code

Lời kết

Thật sự không dễ dàng gì để anh em có thể tối ưu ảnh thumbnail cho bài viết được lấy từ ảnh thumbnail của video youtube. Chia sẻ của mình cũng chỉ là áp dụng cho template mà mình đang sử dụng. Rất mong nhận được thêm nhiều sự đóng góp của các bạn để bài viết hoàn thiện hơn.
Cảm ơn :)

---

Từ khóa tìm kiếm :

• lấy ảnh đại diện youtube làm thumbnail blogspot
• biến thumbnail video youtube thành thumbnail blogspot

• lấy ảnh đại diện cho bài viết từ thumbnail youtube
• tự động tạo thumbnail cho blogger từ video youtube

Chỉ với vài thao tác đơn giản, subdomain sẽ khiến trang blogspot của bạn đơn giản và chuyên nghiệp hơn nhiều.

Tạo và trỏ subdomain cho blogspot

Mục tiêu đề ra

- Tên miền chính (domain) : www.123itvn.com, đã được đăng ký tại namecheap.
- Tạo thêm tên miền phụ (subdomain) : ncp.123itvn.com từ URL ban đầu : ncp1207.blogspot.com.
Cả 2 website trên đều được xây dựng từ blogspot (blogger) và chúng là độc lập.

Sơ đồ cho anh em xem :))

Bước 1 : Tạo subdomain cho blogspot

- Đăng nhập blogger. Bên menu trái, chọn Cài đặt ⇒ Cơ bản.
- Nhấp vào "Thiết lập URL của bên thứ 3 cho blog của bạn".

Bắt đầu thiết lập subdomain cho blogspot

- Nhập URL của subdomain, nhớ là không click vào ô chuyển hướng bên dưới nhé. Sau đó Lưu lại.

Nhập URL của subdomain

- Lúc này địa chỉ blog sẽ được hiển thị như hình dưới. Nhấn Chỉnh sửa rồi tắt đi khoảng 2 đến 3 lần để blogger xuất hiện bảng thông số chi tiết.

Địa chỉ blogspot và subdomain

Lưu ý 2 dòng khoanh đỏ, vì chúng sẽ được sử dụng ở bước 2.

Bảng thông số chi tiết để cấu hình DNS trên namecheap

Bước 2 : Trỏ subdomain về host của blogspot tại namecheap.com

Thực ra việc trỏ subdomain hoặc gán tên miền riêng đăng ký ở namecheap cho blogspot cũng chính là 1, khác nhau duy nhất có lẽ là các URL.

gioitreonline69.blogspot.com ⇒ www.123itvn.com
ncp1207.blogspot.com ⇒ ncp.123itvn.com

Thao tác

- Đăng nhập namecheap.com, vào phần quản lý tên miền Domain list (bên menu trái).
- Chọn tiếp tab Advanced DNS ⇒ Add new record để tạo 1 dòng cấu hình DNS mới.
- Điền thông số của 2 dòng lần lượt như hình dưới, cuối cùng Save lại.
- Đợi khoảng 30' để namecheap cập nhật cấu hình mới và bạn có thể truy cập subdomain.
Chi tiết hơn, mời anh em xem qua bài viết tạo subdomain cho tên miền trên namecheap.com.

Thông số các dòng DNS

Xem clip

Một số lưu ý

Subdomain của mình có URL : ncp.123itvn.com, tuy nhiên khi thêm www vào trước thì không được. Để khắc phục điều này, quay trở lại namecheap ...

---

Từ khóa tìm kiếm :

• tạo và trỏ subdomain cho blogspot
• trỏ subdomain về host blogspot

• hướng dẫn tạo dubdomain cho blogspot
• cách trỏ subdomain namecheaep về blogspot

Thông qua Google Drive, chúng ta có thể dễ dàng chèn hoặc nhúng các file office như word (doc,docx) - excel (xls, xlsx), powerpoint (ppt, pptx) hay pdf vào nền tảng blogger.

Chèn file office word, excel, powerpoint và pdf vào blogspot

Hiện tại, blogspot chưa hỗ trợ việc chèn trực tiếp file office trong bài viết nên chúng ta sẽ phải nhờ đến 1 đối tác thứ 3, cụ thể hơn là các website cung cấp dịch vụ lưu trữ đám mây (cloud storage).

Ngoài Google Drive mà mình giới thiệu trong bài viết, các bạn cũng có thể sử dụng One Drive của Microsoft hoặc Dropbox, ... Còn nhiều lắm nhưng mình chỉ chọn 1 thằng thôi. Đăng ký tài khoản Google nếu chưa có nhé.

Demo

Hướng dẫn chèn file office vào blogspot

Bước 1 : Đăng nhập trang chủ Google Drive.
Bước 2 : Upload 1 file bấy kỳ, ở bài viết này mình sử dụng excel nhé (vidu-ncp.xlsx)

Chọn New / File upload để tải file lên Google Drive

Bước 3 : Sau khi upload thành công, mở file excel gốc bằng công cụ Google Sheets (có sẵn).
Chuột phải chọn Open with / Google Sheets.

Mở file excel trên Google Drive bằng công cụ Google Sheets

Lúc này, Google Drive sẽ tự động tạo thêm 1 bản sao khác của file excel gốc. Đây chính là đối tượng mà mình hướng tới, từ giờ trở đi thì tất cả các thao tác như chỉnh sửa nội dung, chèn file vào blogspot ... sẽ được tiến hành với bản sao này.

Chú ý icon của file excel gốc và bản sao nhé !

Bước 4
- Mở bản sao lên (kích chuột 2 lần), tại thanh công cụ chọn File / Publish to the web.
- Click vào tab Embed (nhúng) rồi nhấn Publish. Khi Google Drive đưa ra thông báo hỏi bạn có muốn công khai file này không, chọn OK.

Công khai bản sao và tiến hành lấy mã nhúng

- Copy mã nhúng do Google Drive cung cấp, ví dụ :

<iframe src="https://docs.google.com/spreadsheets/d/1VH-ShbCrCHOL1euzLaH1x1yxpQiAiSWr13VqjObjpMM/pubhtml?widget=true&amp;headers=false"></iframe>

Bước 5 : Quay lại blogspot, chuyển nội dung soạn thảo của bài đăng hoặc trang từ Viết sang HTML. Sau đó paste đoạn mã trên vào vị trí mong muốn. Như vậy là bạn đã chèn file excel vào blogspot thành công.

Lời kết

Để cập nhật nội dung cho file nhúng, bạn chỉ việc vào Google Drive và tiến hành chỉnh sửa trên bản sao, hệ thống sẽ tự động lưu lại nội dung mới. Trong khi đó, dữ liệu thì được update liên tục 5 phút 1 lần :))
Để chèn file word, powerpoint hay pdf vào blogspot bạn cũng làm tương tự như hướng dẫn ở trên nhé.

---

Từ khóa tìm kiếm :

• cách upload file lên blogger
• chèn file pdf vào blogspot bằng google drive

• hướng dẫn chèn file office vào blogspot
• chèn file doc, xls, ppt, pdf vào blogspot

Hướng dẫn các cách để chèn thành công 1 video youtube vào blogspot, wordpress và một số nền tảng khác.

Chèn và nhúng video youtube vào trong blogspot

Chèn trực tiếp bằng thanh công cụ soạn thảo trong blogspot

- Tạo bài đăng mới.
- Trên thanh công cụ, nhấn vào nút .
- Cửa sổ Thêm video xuất hiện, tại đây bạn có thể sử dụng tab Từ Youtube và Video trên Youtube của tôi để chèn video vào blogspot.

Chèn trực tiếp video youtube

Chèn gián tiếp bằng mã nhúng HTML

Ngoài blogspot, cách làm này cũng có thể áp dụng với  hầu hết các ngôn ngữ và nền tảng khác như wordpress, ...

Lấy mã nhúng của video youtube

- Dưới trình xem video, chọn Chia sẻ / Nhúng.
- Copy đoạn mã nhúng do Youtube cung cấp.

Mã nhúng HTML của video trên youtube

Chèn mã nhúng vào blogspot

- Trên thanh menu, chọn chế để soạn thảo ở dạng HTML.

HTML blogspot

- Paste mã nhúng vào vị trí bạn muốn chèn video youtube.

Chèn mã nhúng video youtube vào blogspot ở dạng HTML

Demo

Tùy chỉnh kích thước video youtube trong website responsive (đáp ứng)

Với website responsive, giao diện sẽ tự động thay đổi để hiển thị tốt nhất trên nhiều màn hình khác nhau (smart phone, máy tính bảng, desktop, ...) Trong khi đó, video youtube được chèn lại luôn có kích thước cố định (thường là 560 x 315) . Nếu không tiến hành tùy chỉnh kích thước video cho phù hợp với từng màn hình thì giao diện website sẽ đi xuống đấy :))

Ví dụ : video có kích thước 560 x 315 trong khi màn hình là 320 x 600

Ví dụ về việc hiện thị không đồng bộ
video youtube bì thừa nội dung ra bên ngoài

Tùy chỉnh bằng CSS

Lưu ý
- Hãy chắc chắn là bạn am hiểu về CSS.
- Sao lưu blogspot trước khi thao tác.

Bước 1 : Tìm cặp thẻ <head></head> và chèn vào trong đó đoạn mã, đây là điều kiện để sử dụng tính năng responsive.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Bước 2 : Tìm đến khu vực CSS của website, sau đó copy - paste đoạn mã dưới đây vào phần cuối cùng trong CSS.
- Tỷ lệ video youtube mà mình sử dụng là 16:9, các bạn có thể thay đổi cho phù hợp.
- Nếu website của bạn đã sử dụng tính năng responsive thì chỉ cần copy dòng iframe, embed ... thôi nhé.

@media all and (min-width: 320px)
{
iframe, embed : {width:300px; height:168px;}
}
@media all and (min-width: 480px)
{
iframe, embed : {width:460px; height:258px;}
}
@media all and (min-width: 600px)
{
iframe, embed : {width:580px; height:326px;}
}
@media all and (min-width: 768px)
{
iframe, embed : {width:...px; height:...px;}
}
@media all and (min-width: 1024px)
{
iframe, embed : {width:...px; height:...px;}
}
@media all and (min-width: 1280px)
{
iframe, embed : {width:...px; height:...px;}
}

- Lưu template lại và kiểm tra nhé :)

---

Từ khóa tìm kiếm :

• chèn video youtube vào blogspot
• chèn video youtube vào website
• chèn video youtube vào html

• nhúng video youtube vào web
• code chèn video vào html
• mã nhúng youtube

Với feedburner, bạn có thể dễ dàng tăng thêm truy cập cho website thông qua tính năng tự động gửi bài viết tới người dùng bằng email.

Tạo form đăng ký nhận bài viết mới qua email cho blogspot bằng Feedburner

Feedburner là gì ?

Feedburner là một dịch vụ miễn phí của Google cho phép quản trị viên có thể tạo nguồn cấp RSS trên website (tổng hợp nội dung theo trình tự thời gian - ví dụ). Feedburner hiện đang cung cấp khá nhiều tính năng hữu ích nhưng để tạo ra được 1 form theo dõi hoàn chỉnh như trên thì chúng ta sẽ cần sử dụng tới tính năng gửi bài viết qua email.

Mình thích sử dụng feedburner vì nó mang đến ít nhất 3 lợi ích cho website
- Tăng tính chuyên nghiệp, từ khi bổ sung thêm thằng này vào footer mình có cảm giác website giá trị hơn hẳn. Bạn có thể kéo xuống dưới và ngó qua nhé :))
- Thể hiện sự quan tâm tới người dùng bằng việc gửi email thông báo đều đặn mỗi khi có bài viết mới.
- Tăng thêm nguồn truy cập thụ động, vừa nhàn vừa tốt cho SEO.
Okie, giờ thì đi vào vấn đề chính :D

Lấy url feedburner cho blogspot

URL feedburner là điều kiện quan trọng để form đăng ký nhận bài viết mới hoạt động ổn định. Có lẽ vì cùng chung cha đẻ Google mà mỗi blogspot khi vừa sinh ra đã có sẵn URL feedburner.

- Đăng nhập blogger, bên menu trái chọn Bố cục.
- Kéo nội dung xuống phần Sidebar và nhấn Thêm tiện ích.

Thêm tiện ích trong blogspot

- Tại tab Cơ bản (có 27 tiện ích), chọn Theo dõi qua email (Subcribe via email). Đây chính là phiên bản thu nhỏ của feedburner.

Tiện ích Theo dõi qua Email 

- Cửa sổ mới xuất hiện, copy đoạn text khoanh đỏ như hình dưới đây (123itvn/feJm). Sau đó nhấn Hủy để kết thúc, chỉ cần lấy được đoạn text này là okie rồi.

Copy đoạn text trong url feedburner  blogspot

Bước 2 : Tạo form đăng ký nhận bài viết mới trên blogspot (form theo dõi)

Xem Demo

- Chọn Mẫu / Chỉnh sửa HTML.
- Copy - paste đoạn mã sau vào vị trí bạn muốn đặt form theo dõi.

<div class="nam">
<style>
.nam {width:300px; height:250px; background:#3e433e; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }
.nam b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }
.nam form {width:250px; margin:0 auto;}
</style>
<b>THEO DÕI QUA EMAIL</b><br />
Đăng ký để cập nhật những bài viết mới nhất về kiếm tiền online và thủ thuật máy tính từ 123itvn.com!<br />
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Email của bạn..." style="border: 1px solid #fff; box-sizing: border-box; padding: 9px 5px; width: inherit;" type="text" />
<input name="uri" type="hidden" value="URL" />
<input name="loc" type="hidden" value="vi_VI" />
<input class="button" style="background: #ff7400; border: none; color: white; font-size: 18px; font-weight: bold; margin: 10px auto; padding: 9px 5px; width: inherit;" type="submit" value="ĐĂNG KÝ NGAY" />
</form>
</div>

- Thay thế URL bằng đoạn text copy ở bước 1.
- Chỉnh sửa lại chiều rộng width và chiều cao height cho phù hợp với yêu cầu của bạn.
- Lưu template lại.
Good luck :)

---

Từ khóa tìm kiếm :

• feedburner là gì
• tạo form theo dõi trên blogspot bằng feedburner
• tạo form theo dõi bằng feedburner 

• form nhận bài viết mới qua email cho blogspot
• theo dõi bài viết mới qua email trong blogspot
• subcribes via email feedburner blogspot

Không riêng gì blogspot mà với bất cứ website nào, giao diện mobile cũng đều quan trọng. Nó thể hiện tính chuyên nghiệp và sự thiết kế sáng tạo của người quản trị viên.

Hướng dẫn xây dựng và tùy chỉnh giao diện mobile trên blogspot

Những chia sẻ dưới đây được mình "đóng gói" sau 2 năm gắn bó với nền tảng blogger. Từ một thằng chân ướt chân ráo cho tới khi đã có thể tự chỉnh sửa giao diện blogspot. Dựa trên template có sẵn, bạn có thể làm gì với giao diện mobile ??? Tùy chỉnh đôi chút, thay đổi bố cục hay tạo mới nội dung ... - đó là những thứ mà chúng ta hoàn toàn có thể làm được :)

Lưu ý
- Hãy sao lưu blogspot trước khi thao tác.
- Phạm vi ảnh hưởng là toàn bộ template.
- Nội dung bài viết được xây dựng theo trải nghiệm thời gian, hi vọng các bạn sẽ thấy thích thú :))

Cách 1 : Sử dụng giao diện mobile mặc định của blogger (Cơ bản)

- Ưu điểm : giao diện đơn giản, tốc độ tải nhanh.
- Nhược điểm : khó tùy chỉnh, tính thẩm mỹ không cao.

Tiến hành tùy chỉnh

- Đăng nhập blogger, bên menu trái chọn Mẫu. Click vào hình bánh răng ở cột Điện thoại di động.

Tùy chỉnh giao diện mobile

- Tại mục mẫu dành cho điện thoại di động, chọn Mặc định sau đó lưu lại để test thử.

Giao diện mobile mặc định của blogger

Lần đầu tiên chọn template, nhờ thằng em thì nó gửi mình đúng cái không có giao diện mobile tùy chỉnh :)) Lúc đấy cũng chả để ý, setup chạy lên giao diện là sướng lắm rồi. Nhìn cái web sơ khai : tên miền đuôi .blogspot chứ không phải 123itvn.com như bây giờ, nội dung chưa có, toàn tiêu đề label mà vẫn thấy tự hào :))

Về sau, khi blog bắt đầu có lượng truy cập, mình đã nghĩ tới việc nâng cấp giao diện mobile để đặt được quảng cáo adsense (mình đang kiếm tiền online bằng thằng này) mà với giao diện mặc định của blogspot thì điều này là không thể, đó cũng là lúc mà cách 2 ra đời.

Cách 2 : Sử dụng giao diện mobile tùy chỉnh (Nâng cao)

- Ưu điểm : thay đổi giao diện theo ý thích.
- Nhược điểm : chỉ hiển thị duy nhất 1 giao diện trên nhiều thiết bị khác nhau, tức là với smartphone, máy tính bảng hay note book thì bạn vẫn thấy nó như vậy (khác hoàn toàn giao diện đáp ứng responsive nhé).
Cách 2 chủ yếu để tham khảo, mình không khuyến khích anh em làm theo :D

Tiến hành tùy chỉnh

- Giống như cách 1, nhưng tại mục mẫu dành cho điện thoại di động thì chọn Tùy chỉnh.

Hướng dẫn xây dựng và tùy chỉnh giao diện mobile trên blogspot

- Quay trở lại menu, chọn Mẫu / Chỉnh sửa HTML.
- Tìm đến thẻ mở <body> và chèn vào trước đó đoạn mã

<b:if cond='data:blog.isMobile == &quot;false&quot;'>

- Tiếp tục tìm thẻ đóng </body> rồi chèn vào sau đó đoạn mã

<b:else/>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Code_thay-thế</body>
</b:if>

- Copy toàn bộ code CSS + HTML + Javascript trong cặp thẻ <body></body> hiện tại, paste đè lên chữ Code_thay_thế được mình bôi đen.
- Lưu lại template.

Tổng quát lại thì cả đoạn mã là một câu điều kiện với vế 1 là giao diện desktop còn vế 2 là giao diện mobile. Đây là cách mà mình đã từng sử dụng để sở hữu 1 giao diện mobile không giống ai :D Để tùy chỉnh, bạn chỉ cần thay đổi lại CSS ở phần mobile thôi nhé.

Giao diện mobile và desktop trong câu điều kiện If

Okie, cách thứ 2 cơ bản đến đây là hoàn tất. Tuy nhiên trong quá trình sử dụng mình mới bắt đầu phát hiện thấy nhiều lỗi không ổn.

- Mỗi lần cập nhật, sửa code trên giao diện desktop là cũng phải sửa code trên giao diện mobile (làm 2 lần).
- Số lượng code nhiều gấp 2 lần nên thao tác rất hay nhầm hoặc sót.
- Giao diện hiển thị xấu dần trên thiết bị có màn hình to.
Chốt : các bạn không nên tùy chỉnh giao diện bằng cách này, mình chỉ chia sẻ để anh em biết thêm thôi. Cách tiếp theo mới là quan trọng này :))

Cách 3 : Sử dụng code responsive (Tối Ưu)

Đây là cách mình đang áp dụng với 123itvn và có lẽ cũng là cách phổ biến nhất hiện nay khi tùy chỉnh giao diện trên blogspot.
- Ưu điểm : với code responsive, giao diện sẽ hiển thị tốt trên hầu hết các thiết bị.
- Nhược điểm : cập nhât sau =))
Hầu hết tamplate blogspot hiện nay đều có tính năng responsive nhưng nếu bạn nắm rõ hơn về cách code CSS, bạn vẫn có thể tùy chỉnh giao diện theo ý muốn.

Tiến hành tùy chỉnh

- Vào Mẫu / Chỉnh sửa HTML.
- Để khai báo tính năng responsiove, hãy đưa thẻ meta dưới đây vào trong cặp thẻ <head></head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

- Tiếp đến, copy-paste đoạn mã responsive sau vào phần dưới cùng của CSS.
Ở đây, mình xây dựng giao diện với chiều ngang tối thiểu là 320px ⇒ tối đa 1280px. Bạn có thể bổ sung thêm kích cỡ chiều ngang nếu muốn.
Code CSS tương ứng với việc hiển thị trên từng thiết bị sẽ do bạn tự thiết lập. Sau khi lưu template, check lại bằng công cụ Viewport Resizer nhé :)

/* Dành cho điện thoại */
@media all and (min-width: 320px)
{Code CSS}
/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 480px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 600px */
@media all and (min-width: 600px)
{Code CSS}
/*  Dành cho màn hình chiều rộng tối thiểu 800px (máy tính bảng để ngang, smart phone, ...) */
@media all and (min-width: 768px)
{Code CSS}
/*  Dành cho màn hình chiều rộng tối thiểu 800px (máy tính bảng để ngang, smart phone, ...) */
@media all and (min-width: 768px)
{Code CSS}
/* Dành cho màn hình chiều rộng tối thiểu 1280px (desktop) */
@media all and (min-width: 1280px)
{Code CSS}

Lời kết

Việc xây dựng và tùy chỉnh giao diện mobile trên blogspot không hề khó, chỉ cần nắm vững CSS là chúng ta đã có thể thay đổi giao diện theo ý mình thích. Nếu template mà bạn đang sử dụng chưa có tính năng responsive, hãy cập nhật luôn nhé :)

---

Từ khóa tìm kiếm :

• tùy chỉnh giao diện mobile trên blogspot
• tùy biến giao diện mobile cho blogger 

• xây dựng và tạo mới giao diện mobile blogspot
• giao diện mobile blogspot hiển thị responsive