Bài đăng

Hiển thị các bài đăng có nhãn Blogging tips

Hướng dẫn cách tạo Responsive Youtube Video Cho Blogger

Hình ảnh
Hello chào các bạn hôm nay chúng ta lại băt đầu với bài viết nhúng video youtube vào blogger. Nghe có vẻ chẳng có gì mới cả đúng không nào?


Tuy nhiên trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách nhúng video youtube vào blogspot với tính năng Reponsive trên tất cả các thiết bị smartphone. Vậy cách làm như thế nào chúng ta cùng điểm qua một số cách dưới đây

Cách 1: Viết một đoạn CSS sau đó gọi class HTML vào
Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy đoạn code bên dưới dán vào trước thẻ đóng ]]>

.youtube-video-longanit {position:relative;padding-bottom:56.25%;padding-top:25px;height:0;overflow:hidden;}
.youtube-video iframe, .youtube-video object, .youtube-video embed {position:absolute;top:0;left:0;width:100%;height:100%;}
Bước 3: Gọi class thôi rất đơn giản bạn chỉ cần chèn mã nhúng video youtube vào giữa 2 thẻ
này thế là xong

<div class="youtube-video-longanit">
<iframe width="560" height="315&q…

Tạo navbar với Bootstrap 3 cho blogspot

Hình ảnh
Như các bạn đã biết thư viện Bootstrap 3 rất đa dạng ngoài việc tạo các bố cục Reponsive cho webiste thì compoment của nó còn rất nhiều thứ rất hay. Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách tạo Navbar cho blogspot thông qua thư viện Bootstrap 3 tạm gọi là Bootstrap Menu Generator thông qua một site trung gian giúp chúng ta có thể tùy biến màu sắc cũng như code trước khi đưa code vào website.


Bước 1: Đầu tiên bạn truy cập vào địa chỉ sau:http://bootstrap3-menu.codedorigin.com/#sthash.Vz7KuG1y.dpbs

Bước 2: Tùy chỉnh giao diện rất đơn giản như hình trên bạn có thể thấy

Phần trên của site là menu review giúp bạn có thể xem trước menu của mình như thế nàoPhần ở giữa là màu sắc: Có 3 cột là màu nền, màu viền và màu text bạn có thể thay đổi trực tiếp màu sắc tại đâyPhần cuối cùng: có 2 cột chứa HTML và CSS sau khi hoàn thành chỉnh sửa Bước 3: truy cập vào quản trị Blogger - Chủ đề - Chỉnh sửa HTML ở đây chúng ta có 2 code là CSS và HTML bạn copy và pase và đúng vị …

Hướng dẫn tăng tốc blogspot bằng cách xóa CSS và Javascript mặc định

Hình ảnh
Hello các bạn quay lại với chuyên mục thủ thuật bogspot. Trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách cơ bản để tăng tốc blogspot nhằm đạt được điểm cao trên các công cụ test của google từ đó tăng điểm SEO cho site của bạn.

Như các bạn đã biết templates blogspot có cấu trúc cơ bản các phần như sau:
<html>
<head>
</head>
<body>
</body>
</html>
1. Chỉnh sửa lại cấu trúc template blogspot  <head> thay đổi thành &lt;head&gt;
</head> thay đổi thành  &lt;/head&gt;&lt;!--<head/>--&gt;
<body> thay đổi thành &lt;body&gt;
</body> thay đổi thành &lt;!--<body/>--&gt; hoặc &lt;!--</body>--&gt;&lt;/body&gt;
Sau đó tiến hành lưu mẫu và kiểm tra thì bạn sẽ cảm thấy tốc độ tải trang blogspot tăng điểm lên rất nhiều. Để kiểm tra tốc độ tải trang các bạn có thể kiểm tra tại đây

2. Xóa bỏ 2 file css mặc định mặc định của blogspot:
Bước 1: Các bạn truy cập htm…

Fix lỗi trùng lặp nội dung, tiêu đề mô tả chuẩn trong Blogger

Hình ảnh
Nếu bạn nào đã sử dụng blogspot thì không lạ gì lỗi này "Lỗi trùng lặp nội dung" tức là 2 hay nhiều URL cùng nhận tiêu đề/ mô tả/ nội dung y như nhau và để cho Google Index

Nếu bạn lên google tra từ khóa "sửa lỗi trùng lập tiệu đề miêu tả", "trùng lập nội dung" trên blogspot bạn sẽ có rất nhiều kết quả tìm kiếm fix lỗi này.

Trùng lập nội dung hiểu nôm na như sau:
Nội dung đi copy 100% của trang khác dẫn đến trùng nội dung, không Unique 100%. Xuất bản 2 bài có cùng nội dung trên trang web của bạn Trong bài viết hôm nay tôi sẽ hướng dẫn các bạn cách sử lỗi trùng lập trong blogspot bằng 2 cách

Cách 1: Cấu trúc code Web bằng thẻ Meta (Title và Description). Tuy nhiên nó khá là phứt tạp đối với trang nhiều nội dung thì công việc này khá mất thời gian.

Cách 2: Đơn giản nhất là chặn index các Url trùng lặp với link Gốc sinh ra ở các nền tảng website khác nhau.

Bạn có thể xem cách Google định nghĩa tại đây: https://support.google.com/webmasters/answer/66359
Google c…

Tạo bảng Table reponsive với tool cho blogspot

Hình ảnh
Như các bạn đã biết một điểm yếu của blogspot đó là việc tạo bảng Table. Do bản thân blogspot không có hỗ trợ công cụ tạo bảng mà đa phần sử dụng code CSS và HTML để tạo. Vì thế trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách tạo một bảng Table responsive với blogspot.


Bước 1: Bạn truy cập vào https://www.tablesgenerator.com/html_tables

Giao diện ban đầu của nó bạn có thể thấy như hình bên dưới và một điều tôi vô cùng ngạc nhiên là nó không hề thua kém bất cứ một công cụ tạo bàng nào. Mọi thao tác bạn có thể tiến hành trên đồ họa như tạo bảng số dòng, số cột, thêm dòng, thêm cột, xóa cột y như trong Word hay Excel


Bước 2: Bạn tiến hành các thao tác tạo bảng trên này sau khi làm xong bạn chỉ cần copy toàn bộ đoạn code bên dưới dán vào nơi mà bạn muốn hiển thị trên blogspot. Nhớ chuyển qua HTML khi viết bài bạn nhé. Ngoài ra mình thấy trong này có rất nhiều mẫu template có sẵn cực kỳ  hay các bạn có thể tham khảo thêm nhé và bên dưới là kết quả sau mấy phút ngồi tạo thử bảng nh…

Tạo khung chứa code Blockquote và Auto select by Single/Double

Hình ảnh
Hello xin chào các bạn hôm nay chúng ta lại gặp nhau trong phần thủ thuật blogger. Như các bạn đã biết thẻ blockquote trong blogger là gì rồi đúng không? nếu bạn là một blogger thì không hề xa lạ với nó thẻ này dịch theo tiếng việt là khung chứa code.

Khi bạn viết một bài viết chia sẻ các code liên quan đến CSS hay Javascript,... chúng ta sẽ đưa các code vào trong thẻ blockquote của bài viết. Chắc các bạn sẻ nói là bài viết của tôi chán quá chẳng có gì mới cả xin thưa rằng đúng là nó không mới nhưng bạn hãy chịu khó theo dõi những gì tôi chia sẻ dưới đây đề hiểu chi tiết hơn về nó mà cái gì cơ bản cũng tốt cả.

Đầu tiên tôi nói về cú pháp của thẻ này:

<blockquote class="tr_bq"> Code bên trong </blockquote>
Tôi bắt đầu viết CSS cho thẻ blockquote để làm đẹp cho nó tôi lấy ngay code mà longanit.com đang sử dụng để minh họa bên dưới.
.post blockquote {
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0!important;
    overflow: auto !important;
    text-a…

Mặc định kích thước hình ảnh khi đăng bài trên blogger

Hình ảnh
Thông thường khi post bài lên blogger, bạn sẽ up kèm một vài hình ảnh lên bài đăng. Trong blogger có một tính năng rất hay đó là sau khi upload tấm hình lên bài đăng bạn chỉ cần click vào bức ảnh khi đó bạn sẽ có các tùy chỉnh ảnh: Ảnh nhỏ, ảnh trung bình, ảnh lớn, ảnh rất lớn và cả kích thước ảnh ban đầu. Tuy nhiên tính năng này có những hạn chế nhất định của nó đó chính là tùy chỉnh kích thước theo ý muốn về chiều rộng và chiều cao của bức ảnh.

Trong trường hợp ảnh có kích thước quá lớn có thể dẫn đến tràn bề ngang của trang blog, gây mất thẩm mỹ. Trong bài viết này tôi sẽ hướng dẫn các bạn cách tùy chỉnh mặc định kích thước hình ảnh khi đăng bài trên blogger một cách đơn giản nhất bằng cách tùy chỉnh CSS. Thực hiện các bước sau đây để tiến hành

Bướ 1: Đăng nhập vào quản trị Blogger --> Chủ đề --> Chỉnh sửa HTML
Bước 2: Copy đoạn code CSS bên dưới vào trước thẻ  ]]></b:skin>

.post img {
max-width:800px;
min-width:600px;
 }
Điều chỉnh lại max-with và min-with cho phù hợp…

Thuộc tính con trỏ chuột trong CSS

Hình ảnh
Thuộc tính trỏ chuột có chức năng quyết định cách hiển thị của con trỏ khi di qua một thành phần nào đó, trong bài viết này tôi sẽ hướng dẫn các bạn cách hiển thị các kiểu con trỏ trong CSS Blogger.


Bước 1: Bạn truy cập vào blog hay trang web của bạn
Bước 2: Click chuột phải vào vùng trống trên trang web sau đó chọn "kiểm tra" hoặc bạn có thề truy cập nhanh bằng việc nhấn phím nóng F12 thần chưởng quá dễ đúng không. Sau khi vào màn hình dành cho nhà phát triển bạn chọn như hình

Ở đây tại thẻ Body CSS mình thêm vào đoạn "cursor:" khi đó trình duyệt sẽ hiện ra các kiểu con trỏ như bên dưới.
auto
alias
crosshair
col-resize
default
e-resize
help
move
n-resize
ne-resize
nw-resize
not-allowed
no-drop
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
w-resize
wait Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ các thuộc tính liên quan đến con trỏ. Bạn có thể thay đổi các thông số con trỏ chuột như tôi liệt kê bên dưới để xem…

CSS căn bản cách đổi màu link liên kết trên website

Hình ảnh
Khi bạn online trên internet hoặc bản thân là quản trị một trang web khi truy cập vào các đường link trong trạng thái tĩnh hay động bạn sẽ thấy có hiệu ứng màu link
Hiệu ứng màu link nó được tạo ra ừ CSS áp dụng cho tất cả link liên kết của website, blog của bạn. Tạo hiệu ứng thay đổi màu sắc phân biệt rõ ràng cho khách truy cập.

Phân biệt link đã truy câp, link chưa truy cập và di chuột vào sẽ thay đổi thành màu sắc khác nhau. Trong bài viết này tôi sẽ hướng dẫn các bạn tìm hiểu về cách thay đổi các màu link này theo ý mình

Ví dụ: Tôi có đoạn code CSS như sau:

/* màu Link khi chưa truy cập*/
a:link {
color:#3366ff;
text-decoration:none;
}
/*Màu Link khi đã truy cập*/
a:visited {
color:#cccccc;
text-decoration:none;
}
/*Màu link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}
Như đoạn code trên tôi chia làm 3 trường hợp

Trường hợp 1: màu link chi chưa truy cập Trường hợp 2: màu link khi đã truy cậpTrường hợp 3: màu link khi rê chuột vào Nói thì có vẻ mông lung…

Reponsive hiển thị bài viết theo nhãn Blogger dạng tab

Hình ảnh
Với thời điểm hiện nay các trang blogger ngày càng đẹp và  hoàn thiện  hơn, nhiều trang nhìn đẹp và chuyên nghiệp không khác gì các trang web được code chuẩn từ các mã nguồn Wordpress, Joomla..., 
Hôm nay quay trở lại trong mục bài viết Widget Blogger tôi sẽ hướng dẫn các bạn cách tạo Widget hiển thị bài viết theo nhãn với nhiều tab và mỗi tab chứa một nhãn như hình bên dưới


Không nói vòng vo nữa, chúng ta bắt đầu ngay thôi nhé

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML copy toàn bộ đoạn code bên dưới vào trước thẻ đóng  ]]></b:skin>
/* Recent Post Label */
.recent-labpost{margin:20px;}
.rctab-button > span{padding:15px 20px;cursor:pointer;position:relative;color:#222;display:inline-block;font-size:120%;font-weight:700;}
.rctab-button > span.active{color:#222;background:rgba(0,0,0,0.05)}
.rctab-button > span.active:before{content:'';top:0;opacity:1}
.rctab-content{padding:15px;background:rgba(0,0,0,0.05);position:relative;min-height:100px;overflo…

Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap

Hình ảnh
Trong bài viết trước mình đã hướng dẫn các bạn cách nhúng Bootstrap vào Blogger và một bài giới thiệu hệ thống lưới trong bootstrap. trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách chia cột tương tác tỷ lệ màn hình một cách nhanh chóng, tương tác tốt với các thiết bị khác nhau như: desktop (máy bàn), laptop (máy tính xách tay), tablet (máy tính bảng), smart phone (điện thoại thông minh).

Chúng ta cần nhớ các lệnh cơ bản như sau trong hệ thống lưới: Lớp .col-xs-* sử dụng tương thích với màn hình smart phone (< 768px)Lớp .col-sm-* sử dụng tương thích với màn hình tablet (>= 768px)Lớp .col-md-* sử dụng tương thích với màn hình laptop, desktop (>= 992px)Lớp .col-lg-* sử dụng tương thích với màn hình desktop (>= 1200px)
Ví dụ 1: Sử dụng bootstrap, chia 2 cột với tỉ lệ bằng nhau: <div class="container">
 <div class="row">
             <div class="col-sm-6">
                    <div class="mauxanh">Cột thứ 1…

Hướng dẫn tích hợp Customer Chat Facebook vào website

Hình ảnh
Trong bài viết hôm trước tôi đã có giới thiệu với các bạn cách tích hợp live chat facebook vào trong blogspot đây là code mà mình lấy nguồn từ bạn Nguyễn Cao Tú chia sẻ trên site.

Trong bài viết hôm nay mình sẽ tiếp tục hướng dẫn các bạn thêm một cách tích hợp "Live chat Facebook" version 2 vào trong web của mình. Trước tiên mình xin giới thiệu đôi chút về plugin này

Customer Chat Facebook là plugin do chính Facebook phát hành, giúp các webmaster có thể tạo khung live chat nhanh chóng, hỗ trợ khách hàng đối với doanh nghiệp cũng như là các site cá nhân. Tuy vẫn còn một số hạn chế về Customize nhưng tất cả những thứ mà mà plugin này mang lại còn hơn cả mong đợi.

Ưu điểm:

Hoàn toàn miễn phí (Không cần phải trả phí như một số Live chat khác)Dễ cài đặt và vận hành.Hỗ trợ người dùng nhanh chóng thông qua Facebook messenger.Customer Chat Facebook hiển thị, hoạt đông tốt trên mọi loại trình duyệt trên PC, Mobile và Tablet.
Nhược điểm:

Người dùng cần có một tài khoản Facebook để đăng nhậ…

Đoạn code Javascript chống Ctrl + U và F12

Hình ảnh
Xin chào các bạn. Như chúng ta đã biết Mã nguồn Blogger thiết kế dựa trên CSS , HTML và Javascript vì vậy việc Viewsourse ( Ctrl + U) cũng như là sử dụng phím F12 để kiểm tra hoặc xem mã nguồn trên web là rất dễ dàng.


Thật ra đối với Site longanit.com của mình thì không dùng cách chống này các bạn có thể tự do xem mã nguồn cũng như Script vì thật ra bản thân mình cũng không phải là dân lập trình ra code mà cũng đi lượm lặt code của các bạn trên cộng đồng Blogger cũng như các site khác chia sẻ.

Tuy nhiên nếu bạn không muốn cho người khác Viewsourse khi nhấn F12 và Ctrl+U của Blogsot thì dưới đây mình xin chia sẻ một code đơn giản để chống lại các thao tác trên.

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Chèn đoạn Code bên dưới vào trên thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(va…

Hướng dẫn gửi sơ đồ web mới nhất lên google

Hình ảnh
Xin chào các bạn trong bài viết trước tôi có hướng dẫn các bạn cách để chúng ta submit một trang web lên google.


Trong bài viết này tôi sẽ hướng dẫn các bạn một số cách để chúng ta gửi một sơ đồ web lên google master tools đồng thời kiểm tra kết quả của quá trình gửi sitemaps – cấu trúc site cho Google thông qua công cụ Google Search Console.

Do mình sử dụng Blogger nên mình sẽ hướng dẫn trên nền tảng này. Chúng ta cần chú ý 3 vấn đề

Sitemap.xmlSitemap AtomRobots.txt 1. KHAI BÁO SITEMAP TRONG ROBOTS.TXT Việc khai báo file robots.txt trên trang web các bạn có thể tham khảo bài viết cũ của mình tại đây 

Các thành phần khai báo về Sitemap như sau:
Sitemap: https://www.longanit.com/sitemap.xml
Sitemap:https://www.longanit.com/p/sitemap.html
Sitemap:https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500
 Như trích dẫn ở trên thì chúng ta có đến 4 link sitemap như…

Hướng dẫn Cấu trúc lại dữ liệu theo chuẩn trên nền tảng Blogger

Hình ảnh
Hello! Các bạn .Trong 2 bài viết trước tôi đã có bài giới thiệu về dữ liệu có cấu trúc trên nền tản Blogger. Trong bài này tôi sẽ hướng dẫn bạn cách xóa cấu trúc cũ và tạo lại cấu trúc mới cũng từ template các bạn đang sử dụng theo đúng chuẩn.


Trước tiên bạn hãy backup lại template để tránh trường hợp làm xong bị lỗi thì chúng ta có thể Restore lại nhanh chóng vì như mình nói mỗi template thì cấu trúc khác nhau nó tùy thuộc vào người tạo ra nó. Ok chúng ta bắt đầu tiến hành

Như chúng ta đã biết Template blogger đa phần sử dụng dữ liệu cấu trúc dạng Microdata, qua việc sử dụng các thuộc tính itemprop, itemscope, itemtype nên việc xóa đi rất đơn giản để cấu trúc  lại một template blogger cho đúng chuẩn cấu trúc như gợi ý từ google master tools

- Đầu tiên chúng ta lần lượt tìm các với 3 từ khóa itemprop, itemscope, itemtype

+ Nếu là tag HTML

Ví dụ <div id='xxx' itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'> thì xóa hết t…

Tìm hiểu về dữ liệu có cấu trúc trong blogger

Hình ảnh
Hello các bạn! chúng ta lại gặp nhau trong bài viết thảo luận về triển khai dữ liệu có cấu trúc trong website.

Đầu tiên mình nói sơ qua về Cấu trúc schema là gì? nó có tác dụng gì trong SEO? Chắc nhiều bạn cũng đặt câu hỏi tương tự như thế này, bài viết này tôi sẻ giới thiệu cho bạn sơ qua về cấu trúc blogger chuẩn SEO Schema.org.


Schema được hiểu đơn giản là cấu trúc dữ liệu trên website mà bạn muốn khai báo với các công cụ tìm kiếm. Mỗi thành phần trên website sẻ có một đoạn mã, đoạn mã đó được khai báo để cho các bot của google biết rằng đây là phần nào trên website, và nó quan trọng hay không, phần chính hay phụ...

Như vậy bạn có thể hiểu nếu bạn khai báo càng chi tiết thì bot càng hiểu về website của bạn và nó thu thập được các dữ liệu xác đáng nên sẻ hiện thị chuẩn xác hơn nó giống như việc bạn đi xin việc thì cần phải khai báo sơ yếu lý lịch vậy đơn giản thế thôi.

Làm thế nào để kiểm tra website đã chuẩn SEO dữ liệu cấu trúc hay chưa? Tôi cung cấp cho bạn một công cụ chuẩn đoán…

Hướng dẫn chuyển hướng Redirect 301 trong Blogger

Hình ảnh
Chuyển hướng Redirect 301 nói chung là thuật ngữ để chỉ việc chuyển hướng từ một liên kết cũ sang liên kết mới, giúp chuyển hướng người dùng và cũng giúp cho bọ  tìm kiếm từ đường dẫn cũ sang đường dẫn mới. Nó rất đơn giản như bạn chuyển nhà đi nơi khác, hay thay đổi số điện thoại rồi sau đó bạn phải thông báo cho bạn bè biết vậy.

Bạn sẽ nghĩ thế nào nếu như khi người dùng tìm kiếm một bài viết liên quan đến site của bạn nhưng khi họ truy cập vào thì không thấy bài viết đó đâu cả việc này dẫn đến nguyên nhân trải nghiệm người dùng xấu và google cũng đánh giá site của bạn tệ. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách chuyển hướng Redirect 301 trong Blogger từ liên kết cũ sang liên kết mới.

Như bạn đã biết là Blogger là web vệ tinh 2.0 mạnh nhất hiện tại bởi vì sau. Bởi vì những tùy chỉnh của nó trong thiết lập là vô cùng tuyệt vời cho SEO.

Chuyển hướng Redirect 301 trong Blogger cũng tương tự như các chuyển hướng 301 ở nền tảng khác, kết quả tìm kiếm được giữ nguyên. Bạn…