Hướng dẫn cách tạo RSS Feedburner và thêm Feed vào Blogspot

LongAnIT 6/15/2019 Bình luận
Xin chào tất cả các anh em hôm nay cuối tuần chúng ta lại gặp nhau trong chuyên mục bài viết thủ thuật blogspot. Trong chủ đề bài viết này tôi sẽ giới thiệu đến các bạn một thuật ngữ có tên RSS hay Feedburner của google. Trước khi đi vào bài viết này tôi xin giới thiệu sơ qua đôi chút về nó.

RSS hay feed là nguồn cấp dữ liệu miễn phí được Google cung cấp giúp các webmaster có thể quảng bá, quảng cáo, tối ưu hóa cũng như kiếm thêm thu nhập từ quảng cáo. RSS hay Feed là rất cần thiết cho một website. Chúng ta có thể sử dụng RSS hay Feed để làm một nguồn cấp dữ liệu qua mail cho những người dùng đăng ký. Cụ thể là ngay trong blogspot với tính năng tiện ích Widget tạo hộp mail để người dùng theo dõi qua email

Hướng dẫn cách tạo Feedburner

Bước 1:  Truy cập vào đường dẫn sau: https://feedburner.google.com

Bước 2: Bạn đăng nhập với tài khoản Google bình thường thôi nhé. Và chúng ta sẽ có giao diện sau:
Feed của feedburner blogspot
Giao diện Feed của feedburner minh họa qua hình
Bước 3: Tại đây bạn nhập các thông tin như hình minh họa bên dưới để đăng ký cho trang blogspot của bạn nhé.

Sau khi điền đầy đủ thông tin xong bạn click vào NEXT đề sang bước kế tiếp


Bước 4:  Ngay tại trang Source bạn click chọn vào mục thứ 2 như hình trên chính là RSS bạn đăng ký sau đó click Next để sang trang tiếp theo.


Đây chính là tùy chọn cho bạn đặt đường dẫn tùy chỉnh cho RSS của mình, hãy sửa lại cho vừa ý và tiếp tục Next. Chú ý nếu tên báo bị trùng bạn phải tìm tên khác cho nó phú hợp nhé. OK rồi thì Next tiếp, các bước tiếp theo các bạn cứ bấm Next cho đến khi hoàn thành là xong

Như vậy với cách làm như trên thì tôi đã tạo xong RSS cho blogspot của mình với địa chỉ:
http://feeds.feedburner.com/longanitvn
Đến đây chúng ta đã hoàn thành 99% chỉ còn một bước nữa đó chính là khai báo feed cho Blogspot.


Để khai báo Feed cho Blogspot, bạn truy cập vào trang quản trị Blogspot. Sau đó vào Cài đặt (Settings) -> Khác. Sau đó thêm đường dẫn feed vừa tạo vào URL chuyển hướng nguồn cấp dữ liệu bài đăng, sau đó lưu lại là xong.

Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách để tạo RSS Feedburner của google thay thế cho Atom mặc định của blogspot việc này giúp cho site của bạn index nhanh hơn mỗi khi có bài viết mới và giúp bạn cải thiện hơn rất nhiều trong việc SEO và nếu như traffic của bạn tốt bạn sẽ có ngay một backlink chất lượng 92 điểm từ đây.

Khắc phục sự cố khi chuyển sang giao thức https trên blogspot

LongAnIT 5/28/2019 Bình luận
Việc chuyển sang https bây giờ thật sự rất dễ dàng vì bản thân blogger đã hỗ trợ sẵn trong phần cài đặt từ trang quản trị. Tuy nhiên webiste của bạn vẫn gặp một số lỗi cở bản nhất là một số link trong template do bạn chưa chuyển sang https. Trong bài viết này longanit.com sẻ hướng dẫn các bạn fix cái lỗi https này chỉ qua một vài bước kiểm tra cơ bản.

Bước 1: Đăng nhập vào Blogger - Cài đặt
Bước 2: Kéo thanh cuộn xuống giữa trang bạn sẽ nhìn thấy mục thiết lập HTTPS. Mục này phải ở tình trạng là nhé. Nếu bạn để Không thì hãy chuyển trạng thái nó sang Có 



Hướng dẫn thiết lập cơ bản https trong blogspot
Hướng dẫn thiết lập cơ bản https trong blogspot 
Một câu hỏi đặt ra là mặc dù bạn đã thiết lập tất cả đúng nhưng trên thanh trình duyệt vẫn không hiện ra được hình ảnh dấu" chìa khóa"" bảo mật như hình bên dưới


Nếu như bạn gặp phải trường hợp này vui lòng thực hiện thêm các bước sau nhé

Bước 3: Đăng nhập vào Blogger - Chù đề - Chỉnh sửa HTML
Bước 4: Trong khung tìm kiếm bạn tìm từ khóa sau http:// và sửa nó thành // khi đó hệ thống sẽ tự động gán link https cho các link trong blog của bạn. Thí dụ tôi có link sau
http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
Sau khi chuyển xong nó sẽ thế này
//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
Bước 5: Sau khi hoàn thành save lại và kiểm tra nhé.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách fix một số lỗi cơ bản khi chuyển blogger sang giao thức https. Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Cách chèn hình ảnh và liên kết vào trang web HTML

LongAnIT 5/27/2019 Bình luận
Chúng ta có thể chèn hình ảnh thuộc các định dạng như: jpg, png, gif (hình động),.... vào trang web của mình. Trong bài viết hôm nay phần chuyên mục HTML và CSS căn bản mình xin giới thiệu với các bạn một số mã cơ bản để chèn hình ảnh, link vào trong website.

1. Cách chèn hình ảnh vào trong website

Để đưa hình ảnh vào trang html ta dùng thẻ <img> với cú pháp cơ bản như sau

<img src="Liên kết đến ảnh " />

Một số thuộc tính đi kèm như sau

  • Width: Chiều rộng của ảnh sẽ hiển thị trên trình duyệt ( tính bằng pixel hoặc % so với chiều rộng toàn trang web )
  • Height: Chiều cao mà ảnh sẽ hiển thị trên trình duyệt.
  • Border (Đường biên hay đường viền) :Thuộc tính này quy định độ dày của đường biên bao quanh ảnh ( tính bằng pixel ). Nếu không có thuộc tính này, ảnh sẽ không có đường biên bao quanh.
  • Alt : Tiêu đề cho ảnh, khi bạn rê chuột vào ảnh, tiêu đề của ảnh sẽ hiện ra. Tuy nhiên "alt" không có tác dụng trong một số trình duyệt, vì vậy để chắc ăn, bạn nên dùng thuộc tính sau.
  • Title : Tương tự như "Alt".

Vậy cú pháp đầy đủ để đưa một bức ảnh vào trang html là

<img src="Dường dẫn đến ảnh" width="Độ rộng" height="chiều dài" border="độ dày" title="Tiêu đề ảnh" >

2. Chèn Link/Liên kết vào webiste


Để chèn một liên kết vào trang web, ta sử dụng thẻ <a> với cú pháp như sau


<a href="https://www.longanit.com" target=" "> LonganIT </a>

Khi bạn sử dụng thẻ này ta có một số chú ý sau


  • Liên kết đến một trang web nào đó phải có http:// đi trước.
  • Thuộc tính target sẽ xác định xem liên kết của bạn sẽ được mở ở đâu khi kích hoạt.
  • Giá trị thường dùng là "_blank" - Mở trong một tab mới
  • Nếu không có thuộc tính này, liên kết sẽ được mở trên trang hiện tại.
  • Trên trình duyệt sẽ chỉ hiển thị đoạn "text", đoạn text này sẽ đại diện cho liên kết, khi bạn click vào "text", liên kết sẽ được mở như ví dụ trên  của tôi text là "LonganIT"

Bạn có thể thay thế đoạn text bằng một bức ảnh theo cú pháp sau

<a href="liên kết" target="new"><img src="link ảnh"></a>

3. Liên kết gửi email

Khi bạn click vào một liên kết, bạn sẽ được đưa đến một trang tài liệu hoặc một trang web. Nhưng giả sử một người đọc bài viết của bạn, và họ muốn liên hệ với bạn để trao đổi thêm. Lúc này, bạn nên để lại một "dấu vết" để giúp họ liên hệ với bạn.

  • Tạo lệnh có tên là mailto: <a href="mailto:Địa chỉ email của bạn"> text </a>
  • Khi người dùng click vào dòng text, họ sẽ được đưa đến trang gửi email, khi họ đăng nhập vào email của họ, thì email của bạn sẽ được đặt sẵn trong phần Email đích.
Cuối cùng là bạn xem đoạn code ví dụ dưới đây mình demo nhé

<a href="https://www.longanit.com/p/contact.html" target="new"><img src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" /></a>

Hướng dẫn cài đặt template mới cho Blogspot

LongAnIT 5/27/2019 Bình luận
Hello các anh em. Hôm nay chúng ta sẽ quay lại với một chủ đề nó rất cũ rồi nhưng mà thật sự rất mới đối với những bạn lần đầu tiên mới làm quen với blogspot. Hãy cùng với longanit.com tìm hiểu cách thế nào để chúng ta có thể cài đặt template mới cho blogspot cũng như là "Sao lưu / Khôi phục" template trên blogspot.

Sao lưu và khôi phục template blogspot
Hướng dẫn cài đặt template mới cho Blogspot

Thường thi sau khi tiến hành xong thủ tục đăng ký blog thì bước tiếp theo là bạn sẽ cài Template hay còn gọi theme (giao diện) cho nó bởi những giao diện mặc định của Blogger bản thân nó không được đẹp cho lắm và không hỗ trợ tính năng tùy biến cao đối với nhu cầu sử dụng.

Hiện nay trên mạng có rất nhiều trang chia sẻ các Template blogspot miễn phí bạn có thể thoải mái tải về và cài đặt. Tôi nói thí dụ bạn muốn làm một trang blog bán hàng điện thoại thì bạn tìm những template nào có chức năng giống như thế để cài vào. Bạn có thể thao khảo template blogspot bán hàng shop điện thoại mà tôi chia sẻ tại longanit nhé.

Mẫu template mình nói ở trên là một mẫu giao diện mình thấy là khá hoàn hảo về chức năng bán hàng cũng như là tốc độ load trang khá nhanh và có thể tùy biến rất dễ, bạn có thể xem demo ngay tại đây: https://www.hi4kids.com.

Bước 1: Download template bán hàng tại đây
Bước 2: Tiến hành giải nén ra một thư mục. Chú ý password unpack là: longanit.com
Bước 3: Đăng nhập vào trang Blogger - Chủ đề
sao lưu và khôi phục template blogspot
Giao diện sao lưu và khôi phục template blogspot by longanit.com
Bước 4: Click vào mục Sao lưu / Khôi phục để vào giao diện bên trong
Hướng dẫn cách sao lưu và thay đổi template blogspot
Giao diện chính của blogspot với 2 tính năng sao lưu và thay đổi template như hình
Sau khi thay đổi xong phần giao diện bạn truy cập lại website của bạn để thấy thay đổi , tuy nhiên bạn sẽ có thắc mắc là sao nhìn nó không giống ở template gốc mà trông cũng xấu vậy? Đó chính là lí do tại sao chúng ta phải cần cài đặt sao cho nó giống bản template gốc. Và đây chính là công đoạn làm lâu nhất và khó nhất đấy. Bạn có thể để lại comment bên dưới để chúng tôi hỗ trợ cho bạn việc hoàn thành.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách cơ bản nhất để sao lưu cũng như thay đổi một template mới trên nền tảng blogspot. Chúc các bạn thành công và SEO nhanh lên top nhé.

Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

LongAnIT 5/24/2019 Bình luận
Xin chào các bạn hôm nay chúng ta lại gặp nhau trong chuyên mục tăng tốc blogspot toàn tập. Trong bài viết trước tôi có hướng dẫn các bạn cách Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên và sau khi thực hiện thì việc tải trang đã được cải thiện đáng kế. Trong bài viết ngày hôm nay longanit.com sẽ tiếp tục hướng dẫn các bạn cách tối ưu tốc độ load file css  với function loadCSS dạng font icon hay dẫn link.
Tối ưu tốc độ load file CSS với function loadCSS cho blogspot
Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

Khi sử dụng blogspot tôi chắc rằng bạn nào cũng có sử dụng font load từ google có thể kể đến font Roboto và thêm một font nữa khá nặng là Font awesome icon. Tuy nhiên việc nhúng 2 font này theo cách thuần túy làm cho blogspot load khá là nặng. Để giảm thiểu tối đa tốc độ load cho nó bạn có thể sử dụng đoạn Script bên dưới mà tôi cung cấp.
 <script type='text/javascript'>
//<![CDATA[
function 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("link file CSS 1");loadCSS("link file CSS 2");
//]]>
</script>
 Bạn thay thế 2 link màu đỏ thành link file CSS cần load nhé. Tôi lấy thí dụ như hình bên dưới

<script type='text/javascript'>
//<![CDATA[
function 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("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700")
//]]>
</script>

Lời khuyên từ kinh nghiệm


  1. Để tốt nhất cho việc tải trang nhanh chóng bạn chỉ nên sử dụng hình ảnh định dạng jpg và hạn chế sử dụng các hình ảnh như png,..
  2. Hình ảnh không cần thiết phải quá nét, quá chi tiết do đó bạn cần giảm dung lượng của ảnh bớt đi. Theo kinh nghiệm bạn nên để kích thước dưới 150kb dưới 100kb càng tốt cho hình ảnh
  3. Về sử dụng font bạn có thể dùng font Helvetica co sẵn thay cho font Roboto về bản chất font này có sẵn load nhanh không qua server google lại khá là đẹp. 
Ngoài ra để nén hình ảnh bạn có thể truy cập vào 2 link bên dưới nếu bạn nào không rành về Photoshop hoặc các công cụ chỉnh sửa ảnh để giảm kích thước của ảnh.


Kết luận: Như vậy qua bài này tôi đã hướng dẫn các bạn thêm một cách tối ưu tốc độ tải trang cho blogspot nữa hi vọng sẽ giúp được các bạn phần nào trong việc làm chủ blogspot. Kính mời các bạn theo dõi trong phần tiếp theo vào ký tới nhé. Chúc các bạn thành công và SEO nhanh lên top nhé.


Hướng dẫn sử dụng thẻ Label (nhãn) trong blogspot

LongAnIT 5/22/2019 Bình luận
Trong blogspot có một thuật ngữ mang tên "Label" tạm dịch là "nhãn". Khi bạn đăng một bài viết bất kỳ thì trong thanh menu tùy chọn nằm phái bên phải bạn sẽ thấy có một tùy chọn tên là ""cài đặt bài đăng" bao gồm: Nhãn, Lịch Biểu, Liên kết,...như hình bên dưới.
Hướng dẫn cài đặt nhãn trong blogspot
Tùy chỉnh cài đặt bài đăng Label cho blogspot

Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cách sử dụng thẻ Label (nhãn) trong blogspot như thế nào cho đúng cách cũng như là chuẩn SEO

Bước 1: Tạo mới một bài đăng bất kỳ sau khi chỉnh chu tất cả các thứ nhìn phái bên phải mục cài đặt bài đăng bạn click vào mục Label (nhãn) hiển thị khung hộp thoại để tạo nhãn bạn hãy nhập vào nhãn mà bạn mong muốn thí dụ tôi đặt tên nhãn là SEO thì nó sẽ như sau
Quá trình tạo nhãn hoàn thành cho bài viết
Quá trình tạo nhãn hoàn thành cho bài viết
Bước 2: Sau khi tạo xong nhãn click vào hoàn thành như bước 2 trong hình trên. Ok  bây giờ  một "Label" (Nhãn) đã hiển thị với dòng chữ màu xanh, bên dưới khung vừa đặt tên "Label" (Nhãn). Các bạn chỉ cần bấm "Xuất bản" là xong.

Chú ý các tùy chỉnh nhãn trong blogspot như sau


  1. Nếu muốn tạo một "Label" (Nhãn) khác, thì viết một bài nữa và tiếp tục gắn (đặt tên) cho "Label" (Nhãn) mới - lặp lại thao tác như trên.
  2. Nếu viết một bài nữa và muốn đặt vào nhãn cũ thì chỉ việc bấm vào nhãn cũ đã tạo (hiển thị với chữ màu xanh ngay bên dưới khung đặt tên "Label" (Nhãn) rồi bấm "Hoàn thành" là bài viết sẽ được hệ thống tự động chuyển vào "Label" (Nhãn) đó. 
  3. Bạn có thể gán nhiều nhãn cho một bài viết bằng các nhãn có sẵn cũng như là tạo mới các nhãn cách nhau bằng dấu , (dấu phẩy)
  4. Bạn có thể đổi sang sang nhãn khác bằng cách chỉnh sữả bài viết và tạo nhãn mới cho bài viết

Vấn đề nhãn chuẩn SEO

Thật ra phần này liên quan đến "Permark link" mà trong các bài viết trước tôi đã có giới thiệu qua trong mục 10 bước để tạo một bài viết chuẩn SEO trên blogspot bạn có thể tham khảo trong longanit nhé.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách tạo nhãn cho bài viết trong blogspot cũng như là một số tùy chình về nhãn. Hi vọng qua bài viết này có thế giúp được phần nào các bạn trong việc tùy chỉnh nhãn trong blogspot. Trong quá trình thực hiện bài viết sẽ không thể tránh khỏi một số vấn đề thiếu xót vui lòng để lại bình luận bên dưới để trao đổi thảo luận cũng như chia sẻ. Chúc các bạn thành công và SEO nhanh lên top nhé.