Bài đăng

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

Cách thêm Widget (thêm tiện ích) vào Blogspot

Hình ảnh
Trong Blogger có một định nghĩa Widgets đơn giản chúng ta hiểu là tiện ích. Các widget được tạo ra từ code HTML trong blogger theo cú pháp của nó.

Việc tạo ra các widget rất tiện lợi cho việc quản lý blog của bạn ngoài ra nó còn có rất nhiều tiện ích khác nữa tôi sẽ đề cập đến các bạn trong những bài viết sau. Tùy theo templae mà người tạo ra sẽ hiển thị nó ở các vị trí khác nhau... Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách cơ bản để thêm  Widget trong blogger.

1. Cách thêm một tiện ích widget thông thường Ở cách thêm tiện ích widget thông thường này thì khi thêm tiện ích sẽ xuất hiện toàn bộ web, từ trang chủ, bài viết, label ...

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Xem nhiều trên Longanit.com' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<div class='title-left'><da…

Code tạo nút Demo, Download, Xem mẫu, Tải về, Mua ngay đẹp cho Blogger

Hình ảnh
Với các blogger lĩnh vực về  game, phần mềm, chia sẻ tài liệu... thì thường chia sẻ những đường link để người dùng download hay xem demo.

Việc làm nổi bật các đường link này chúng ta nên kết hợp với các Button để người dùng dễ dàng nhìn thấy và làm đẹp blog của bạn. Bộ code này dùng để làm button bằng CSS3 đẹp tuyệt.

Khi bạn đưa trỏ chuột vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với thư viện Bootstrap, Fontawesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích. Trong bài này tôi sẽ hướng dẫn cho các bạn cách tạo bộ icon này với các bước thực hiện như bên dưới.

Bước 1: Đăng nhập vào Blogger > Chủ đề > Chỉnh sửa HTML

Bước 2: Thêm thư viện FontAwesome vào bằng cách thêm đoạn code này vào sau thẻ <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Nếu blog của bạn có đoạn tương tự thì có thể bỏ qua hoặc thay bằng đoạn code trên

Bước 3: Thêm đoạn CSS này tr…

Tạo phân trang (Page Navigation) cho Blogger

Hình ảnh
Nếu như blog của bạn có nhiều bài viết thì sẽ rất mất công cho người dùng khi muốn xem các bài viết cũ hơn trên blog của bạn. Tính năng Page Navigation cho Blogger là vô cùng cần thiết để giải quyết vấn đề này.

Tính năng bài đăng cũ hơn hay mới mơi không thể giải quyết hết vấn đề mà người đọc cần. Bài viết này mình sẽ hướng dẫn các bạn cách tạo phân trang cho blog của bạn rất đơn giản chỉ vài bước sau đây.

 Bước 1: Thêm Script

Copy đoạn code sau đây và dán vào trước thẻ đóng </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 var perPage=10;
 var numPages=2;
 var firstText ='First';
 var lastText ='Last';
 var prevText ='« Previous';
 var nextText ='Next »';
 var urlactivepage=location.href;
 var home_page="/";
if(typeof firstText=="undefined")firstText=…

Code liên hệ trượt dưới chân trang đẹp cho blogger

Hình ảnh
Đoạn code này lấy bên aecland.vn rất thích hợp dùng cho các website bán hàng hoặc làm dịch vụ nên sử dụng để giúp cho khách hàng của mình liên hệ dễ dàng hơn.

Có thể giúp gia tăng tỉ lệ gọi điện đặt hàng, thích hợp với các web đang triển khai các chiến dịch chạy bán hàng, kinh doanh online, bất động sản...

Tiện ích liên hệ trượt dưới chân trang web chia làm 3 phần gồm:
Thông tin hotline
Thông tin thanh toán
Chát, Tư vấn online
Bước 1:  Chèn đoạn code HTML trên thẻ đóng </body>
 <div class='site-support'>
<div class='site-content'>
<a href='#'><div class='item toogle-support-item'>
<i aria-hidden='true' class='fa fa-map-marker'/>
<span> AEC Land Bình Châu</span>
</div></a>
<a href='tel:0967 11 33 66'><div class='item toogle-support-item'>
<i aria-hidden='true' class='fa fa-phone'/>
<span>Hotline: <strong>0967 11 33 66&l…

Fix The reference to entity delimiter Blogger

Hình ảnh
Phân trang theo nhãn cho blogger giúp blog của bạn tải nhanh và trông gọn gàng hơn. Tuy nhiên khi click vào tên nhãn label thì số bài đăng hiển thị trên 1 trang theo mặc định là 20.

Việc Chỉnh sửa HTML tạo menu đưa vào blog, khi lưu mẫu sẽ hiện thấy báo lỗi : đại loại như sau
The reference to entity "max-results" must end with the ';' delimiter.Tạm dịch: Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.

Để khắc phục, ta chỉ cần thêm amp; vào sau dấu ?:

VD trên web longanit của tôi Link của trang nhãn lúc đầu:
https://www.longanit.com/search/label/Windows%20-%20Antivirus?&max-results=5 Bạn đổi thành link như bên dưới sẽ không báo lỗi nữa
https://www.longanit.com/search/label/Windows%20-%20Antivirus?&amp;max-results=5 Tiến hành save lại là sẽ không báo lỗi nữa. Bạn áp dụng tương tư cho các nhãn khác trong blog của mình nhé. Chúc thành công!

Hướng dẫn tạo Breaking News cho Blogger

Hình ảnh
Breaking News là gì ? Gọi chung là những tin nóng mới cập nhật, bài viết mới cập nhật. Các bạn hay theo dõi tin tức thời sự trên Tivi sẽ thấy một thanh dòng chữ chạy ngang từ trái sang ghi những thông tin cập nhật. Việc tạo  Breaking News sẽ giúp cho người đọc dễ dàng cập nhật những bài viết gần đây trên blog của bạn. Đó cũng là cơ hội để họ ghé lại blog của bạn lâu hơn.

Hôm nay tôi sẽ chia sẻ cho các bạn cách tạo Breaking News rất đơn giản và đặc biệt là nó có thể Reponsive trên các thiết bị. Vui lòng thực hiện theo các bước hướng dẫn dưới đây

Bước 1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML ,  Tìm thẻ ]]></b:skin> hoặc </style> đây là thẻ chứa CSS của blog. Copy và dán đoạn code dưới vào trên nó.
 #bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #8ED557;color:#fff;display:block;float…

Responsive Recent Post Slider to Blogger

Hình ảnh
Quay trở lại với thủ thuật blogger. Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách tạo bài viết mới nhất dạng Slide tự trượt cho Blogger. Với thủ thuật này bạn sẽ thấy một tiện ích xuất hiện trên blog của mình cực kỳ hiện đại, dạng mờ mờ metro phẳng rất chuyên nghiệp, đặc biệt nó còn tự động trượt  để thay đổi bài viết. Để thực hiện widget này, các bạn cần thực hiện các bước như tôi hướng dẫn bên dưới

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML tìm trong CSS của bạn và copy đoạn code bên dưới vào
#featuredpost {margin:15px auto; width: 970px;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0…

Thiết kế trang báo lỗi 404 theo phong cách Mi Sốp Blogger

Hình ảnh
Tình cờ lạc vào trang 404 của Microsoft thấy thiết kế và trình bày rất hay. Ngoài việc thông báo lỗi 404 tới người dùng họ còn thêm vào một số kết quả tìm kiếm dạng gợi ý giúp người dùng có thể nhanh chóng chuyển hướng tới các liên kết tồn tại. Và giờ ta sẽ mang nó vào blogspot

Cụ thể list bài viết gợi ý ta có thể dùng thủ thuật random post/recent post/label post,... tùy theo mong muốn của webmaster. Trong bài viết này tôi sẽ sử dụng random post với layout giữ lại header và footer

Bước 1: xác định layout để đặt thẻ điều kiện Tôi ví dụ layout trang của bạn như sau
<body>
    <div class="header">
        <!-- Nội dung header -->
    </div>
    <div class="main">
        <!-- Nội dung chính -->
    </div>
    <div class="footer">
        <!-- Nội dung footer -->
    </div>
</body>
Ta sẽ đặt thẻ điều kiện như sau để giữ lại header và footer trong trang 404 cũng như tối ưu code 
<body>
  …

Tổng hợp các thẻ điều kiện Blogger 2018

Hình ảnh
Để áp dụng thẻ (tag) điều kiện bạn phải có kiến thức chút về HTML, bạn chú ý là cơ bản nó bắt đầu bằng tag với thuộc tính “ cond “ và kết thúc là một tag đóng. Trong giữa những tag này, các nội dung (html ,style, script, widgets…) sẽ chỉ xuất hiện hoặc thực hiện theo những điều kiện xác định.

Ví dụ như trong đoạn code sau:
<b:if cond='your condition'>
 <style>...css code...</style>
 <script>...javascript code...</script>
</b:if> Phần 1. Các thẻ điều kiện
1. Trang chủ (Homepage)
<b:if cond='data:view.isHomepage'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if>  Theo version trước:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if>  2. Trang bài viết (item)
<b:if cond='data:view.isPost'>
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if>  Theo version trước:
<b:if cond='data:blog.pageT…

Hướng dẫn tạo khung comment đẹp cho blogger (có phân cấp)

Hình ảnh
Đây là khung comment phân cấp. Nguyên nhân là do "threaded comment" mặc định của Blogger chỉ được tối đa là 1 cấp mà thôi. Bài viết hướng dẫn các bạn tạo khung comments system đẹp cho blogger. Vui lòng làm theo các bước sau đây

Bước 1: Vào chủ đề - Chỉnh sửa HTML tìm code sau:
<b:include data='post' name='comments'/>
Sau đó thay thế bằng code bên dưới
 <b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>Bước 2: Tìm trong CSS và copy đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;p…

Hướng dẫn tạo sitemap cho Blogger

Hình ảnh
Tệp sitemap XML giống như thư mục của tất cả các trang tồn tại trên trang web hoặc blog của bạn. Các công cụ tìm kiếm như Google và Bing cũng như một số trang tìm kiếm khác có thể sử dụng các tệp sơ đồ trang web này để khám phá các trang trên trang web của bạn mà các chương trình tìm kiếm có thể đã bỏ lỡ trong thời gian thu thập dữ liệu thông thường.

Sitemap Blogger

Sitemap XML mặc định của bất kỳ blog Blogger nào sẽ chỉ có 26 bài đăng trên blogspot gần đây nhất. Đó là một giới hạn và một số trang cũ trên blog của bạn bị thiếu trong sitemap XML mặc định có thể không bao giờ được lập chỉ mục trong các công cụ tìm kiếm. Tuy nhiên có một giải pháp đơn giản để khắc phục sự cố này. Dưới đây tôi sẽ hướng dẫn cho các bạn cách để tạo sơ dồ web (sitemap) trên Blogger

Dưới đây là những gì bạn cần làm để tạo sơ đồ cấu trúc trang web sitemap XML hoàn chỉnh, chuẩn SEO với các công cụ tìm kiếm cho trang web blogspot:

Bước 1: Tạo sơ đồ trang web blogspot:

Các bạn truy cập vào địa chỉ…