Bài đăng

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

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…

Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

Hình ảnh
Đây là hiệu ứng tạo chữ chạy trên thanh tiêu đề cho Blog của trang chạy qua lại trông rất bắt mắt, với đoạn code tôi chia sẻ bên dưới sẽ giúp cho các bạn thực hiện được hiệu ứng ấy một cách dễ dàng trên Blogger.

Thật ra thì code kiểu này có từ rất lâu rồi, nhiều bạn chuyên về thiết kế Web hoặc Blog thì nó quá đơn giản rồi đúng không nào. Tuy nhiên đối với những bạn mới bước vào nghề thì hơi bị khó đấy. Qua đây  mình cũng xin giới thiệu lại cho một số bạn mới đến với Blogger cũng như những bạn mới học thiết kế Web như mình đoạn coe này trên nền tản CSS và HTML. Các bạn thực hiện theo các bước sau nhé.


Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTMLTìm đến thẻ </head> và thêm đoạn code  bên dưới vào ngay bên trên nó

<script type="text/javascript">
var txt="Chào mừng bạn đến với Longanit.com. Chúc các bạn có những giây phút vui vẻ";
var espera=150;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0)…

Hướng dẫn tạo thanh cuộn Scrollbar bằng CSS cho Blogger

Hình ảnh
Khi bạn viết bài trên blog, đôi khi nội dung một trang quá dài hoặc các tiêu đề trên widget quá nhiều. Biện pháp tạo thanh cuộn (Scrollbar) là một giải pháp để rút ngắn không gian trình bày giúp cho blog của bạn thêm chuyên nghiệp và đẹp hơn.

Trong bài viết này longanit.com sẻ hướng dẫn cho các bạn cách tạo Scrollbar cho blogger cũng như một số tiện ích (Widget).

1. Tạo thanh cuộn cho WidgetTrường hợp 1: Scrollbar cho tất cả các Widget Blogger

 Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML Chèn đoạn code bên dưới vào trước thẻ ]]></b:skin>  .sidebar .widget{
max-height:300px;
max-width:300px;
overflow:auto;
}
Trường hợp 2: Scrollbar cho một widget cố định

Trong trường hợp này bạn cần xác định ID của Widget mà bạn cần tạo Scrollbar. Cách xác định ID bạn làm như sau:

Đăng nhập vào Blogger - Bố cục như hình bên dưới.

Như hình trên tôi chọn một Widget bất kỳ sau đó click vào chỉnh sửa. Một Popup mở ra trên thanh address bạn rê chuột vào cuối thanh địa chỉ để xem ID của Widget như…

Hướng dẫn tạo comments backlink trên Blogger

Hình ảnh
Hello ! Xin chào các bạn. Nếu bạn nào đã tạo blog bằng blogger thì luôn biết đến comments system của Blog. Có thể nhiều bạn sẽ chê comment system mặc định của blogger vì sao ư? vì nó load chậm. Hãy bỏ qua những nhược điểm của blog comments ở đây mình chỉ nhắc đến ưu điểm của nó

Giúp cho việc tương tác với nhau giữa các blogger khi comment từ đó giúp cho blog của bạn có nhiều người biết đến hơn, chưa cần biết là comment đó là góp ý xây dựng hay spam
Tạo backlink cực tốt nếu như bạn là một SEOer đi backlink trên blogger là cực tốt ...

Có mấy cách comment trong Blogger. Cái này theo tôi là do người quản trị đó set mà thôi. Ví dụ tôi set tất cả ai cũng có thể comment trong blog thì khi bạn vào một bài viết trên blog tôi trong khung comment bạn sẽ nhìn thấy như sau:


Như hình trên thì các bạn có thể thấy chúng ta có 3 tài khoản comment
Tài khoản blogger: khi bạn đăng nhập vào blogger Tài khoản Tên/URLTài khoản ẩn danh Trong phần này tôi sẽ hướng dẫn các bạn cách comment kiểu thứ 2 . Đây là …

Hướng dẫn tạo Blog miễn phí từ Blogger

Hình ảnh
Ngày nay, việc tạo cho mình một blog cá nhân để chia sẻ các bài viết về kiến thức, kinh nghiệm, kiếm tiền online hay bất cứ điều thú vị gì đó mà bạn thích trở nên vô cùng dễ dàng và nhanh chóng.


Trong bài viết này tôi sẽ hướng dẫn cho bạn cách cơ bản để bạn có thể tạo cho mình 1 Blog cá nhân phục vụ cho những mục đích trên. Hiện tại nếu bạn search trên google với từ khóa Tạo blog miễn phí nó sẽ cho ra nhiều kết quả và tôi quan tâm đến kết quả đầu tiên chính là Tạo blog từ Blogger.com

Tại sao tôi chọn blogger mà không chọn Wordpress hay một mã nguồn nào đó thì tôi xin trả lời với các bạn là:

Hoàn toàn miễn phí chỉ cần có tài khoản google ( Gmail )Bạn không cần biết lập trình vẫn có thể tạo đượcBảo mật tối đa vì là server của Blogger chính là googleTên miền đẹp từ google với đuôi tenban.blogspot.comCpanel quản trị rất dễ dàng cho dù bạn không phải là người pro về tin họcSEO rất dễ lên top nếu bạn biết cách tối ưu ( Vì là con cưng của google )Có thể trỏ tên miền của bên thứ 3 về Blogspot…

Tạo Breadcrumb chuẩn HTML5 cho blogger

Hình ảnh
Breadcrumb là một tập hợp các đường link có phân cấp để người dùng biết mình đang ở đâu để từ đó dễ dàng hơn trong việc sử dụng website mà dịch ra tiếng việt như các bạn hay nói là liên kết bánh mì. ví dụ tại trang longanit Trang chủ » Blogging tips » Breadcrumb đơn giản chuẩn HTML5 ngay phía trên tiêu đề bài đăng.

Nếu blog của bạn chưa có Breadcrumb thì bạn nên thêm thành phần này vào ngay vì nó rất có lợi cho SEO và thân thiện với người dùng. Cách làm lại cực kỳ đơn giản.

Bước 1: Vào chỉnh sửa template rồi tìm đến dòng: ]]></b:skin> rồi thêm vào phía trên nó code css sau:
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
 Tiếp tục tìm đến mã này:
<b:includable id='main' var='top'>
 Thay thế nó bằng code bên dưới:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageT…