Bài đăng

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

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ỉ…

Tạo liên kết 3 cột cho blogger

Hình ảnh
Việc trao đổi liên kết trong Website cũng như các Blogger với nhau là vô cùng cần thiết nó giúp cho các blogger liên kết với nhau, tạo tương tác và nhất là tạo backlink tốt. Trong bài viết này sẽ hướng dẫn các bạn tạo code liên kết bạn bè cho blogger với 3 cột bạn có thể đặt code  ngay bên dưới footer của mình
<style>
#lien-ket-ban-be::-webkit-scrollbar{width:5px}
#lien-ket-ban-be::-webkit-scrollbar-thumb{background:#484848;border-radius:3px}
#lien-ket-ban-be::-webkit-scrollbar-thumb:active{background:#777}
#lien-ket-ban-be{padding:0;margin:0;list-style:none}
.lien-ket-ban-be{margin:0;padding:0}
.lien-ket-ban-be ul{padding:6px 0.8px 6px 6px}
.lien-ket-ban-be li{width:33.3%;margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center}
.lien-ket-ban-be a{padding-left:25px;transition: all 0.5s ease 0s;width:auto;text-overflow:ellipsis;overflow:hidden;display:block;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;margin:0 5px 5px 0;padding:5px…

Hướng dẫn cách tạo một trang web trắng trên Blogspot

Hình ảnh
Mỗi một ngôn ngữ đều có cấu trúc khác nhau. Blogger cũng vậy. Như chúng ta đã biết cấu trúc template của Blogger luôn phải có ít nhất 1 thẻ <b:section> thì mới có thể lưu Template lại được. Vì vậy, nếu muốn tạo 1 trang web trắng tinh để bước đầu Build 1 Template thì bạn có thể thử đoạn code dưới đây nhé!

Đoạn code dưới đây chỉ mang tính chất tham khảo thôi nhé. Vì thực chất nó chưa hề có chút nội dung nào ngoài câu: “Thêm nội dung trang web của bạn vào đây

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Welcome to longanit.com - Sharing for all
</title>
<!-- Bắt đầu viết Css cho web --><b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web --><body>
Thêm nội dung trang web của bạn vào đây<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:sect…

Hướng dẫn tạo sơ đồ web tĩnh cho blogger

Hình ảnh
Ngoài việc đăng ký sơ đồ web trên google master tools cho blog của bạn thì việc tạo sitemap cho blogger cũng là cách mang lại 1 cái nhìn tổng thế cho blog của bạn và cần thiết.

Với sitemap được hướng dẫn ở bài này lại có giao diện sắp xếp rất khoa học. Nói chung là đơn giản và đẹp.

Thực hiện các bước sau đây để tạo sitemap cho blog của bạn.

Bước1: Truy cập vào trang quản trị: https://www.blogger.com
Bước 2: Vào Trang (Page), tiếp tục tạo trang mới đặt tên là sitemap (New page). Tên bạn có thể đặt là tên khác tùy vào bạn tuy nhiên mình khuyên các bạn nên để tên sitemap cho nó đẹp link
Bước 3: Chuyển chế độ soạn thảo sang HTML và copy đoạn code bên dưới dán vào
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:normal;margin:0 -5px;padding:1px 0 2px 11px;background:-m…

Button chia sẻ mạng xã hội cho Blogger trượt ngang

Hình ảnh
Công dụng của các button chia sẻ mạng xã hội này thì khỏi phải nói rồi nhé nó giúp người dùng có thể chia sẻ bài viết của blog lên các mạng xã hội nhanh chóng và tiện lợi hơn, đồng nghĩa với việc chúng ta sẽ có thêm nhiều lượt truy cập….
Mẫu button này mình sưu tầm từ internet và sửa lại chút xíu cho nó phù hợp với blogger điển hình là  link liên kết sẽ khác.

Cách thực hiện bao gồm 3 bước, bạn làm theo từng bước như tôi hướng dẫn nhé
Bước 1: Bạn cần sử dụng Font Awesome, chèn đoạn mã sau vào trước </head> trong template
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> Bước 2 : Thêm CSS cho nó
 .socials-share {
    text-align: center;
    margin-bottom: 30px;
}
.socials-share a {
    padding: 4px 30px;
    color: #fff;
    line-height: 2em;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 4px;
}
.socials-share span.fa {
    …

Button chia sẻ mạng xã hội cho blogger

Hình ảnh
Có thể nói button chia sẻ mạng xã hội trong bất kỳ website nào cũng đều vô cùng có ích nó rất tốt để seo web của bạn. Ngoài việc giúp chia sẻ bài đăng lên đó tạo tương tác tốt đồng thời tăng lượt truy cập vào website của bạn.

Trong bài viết này tôi sẽ hướng dẫn cho các bạn thêm button chia sẻ mạng xã hội nằm phía sau mỗi bài viết trên blooger . Vui lòng làm theo các bước như hướng dẫn bên dưới nhé

Bước 1:  Blogger - Chủ đề - Chỉnh sửa HTML. Copy và dán đoạn code bên dưới vào CSS

 /* CSS Share Button by longanit.com*/
.icon-button{background-color:#fff;border-radius:40px;cursor:pointer;display:inline-block;font-size:26px;height:40px;line-height:40px;margin:0 5px;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:40px}
.icon-button span{border-radius:0;display:block;height:0;left:50%;margin:0;position:absolute;top:50%;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s…

Hệ thống lưới trong Bootstrap 3

Hình ảnh
Như các bạn đã biết, độ rộng màn hình 1 trang web dùng Bootstrap là tương đối, tức là độ rộng này tùy thuộc theo kích thước màn hình.

Hệ thống lưới của Bootstrap 3 chia thành 12 cột theo chiều rộng của trang. Chúng ta có thể gom các cột lại với nhau để tạo thành vùng lớn hơn, chẳng hạn 4 cột có độ rộng 1 được gom thành 1 cột có độ rộng 4.


Khi thiết kế giao diện, người thiết kế phải đảm bảo độ rộng của các cột tạo thành luôn là 12 để giao diện không bị bể (hiển thị sai). Các trường hợp thiết kế:

span 3 – span 9: OK
span 4 – span 8: OK
span 5 – span 7: OK
span 3 – span 4 – span 5: OK
span 4 – span 6 – span 2: OK
span 8 – span 6: không OK, vì tổng số cột là 14, lớn hơn số cột tối đa là 12

Các lớp lưới
Trong Bootstrap, có 4 lớp lưới chính như sau:

xs (dùng cho di động): có chiều rộng màn hình nhỏ hơn 768pxsm (dùng cho tablet): có chiều rộng màn hình từ 768px trở lênmd (dùng cho desktop): có chiều rộng màn hình từ 992px trở lênlg (dùng cho desktop có kích thước lớn): có chiều rộng màn hình t…

Plugin lazy load tối ưu load ảnh nhanh cho blogger

Hình ảnh
Hình ảnh trong Web/Blog là yếu tố gây ảnh hưởng rất nhiều tới tốc độ tải trang, nếu đã dùng nền tảng blogger, bạn nên upload ảnh khi viết bài, bạn không nên sử dụng ảnh từ nguồn khác để lấy link

Khi bạn upload ảnh qua blogger, ảnh có thể chỉnh sửa được kích thước cũng như không bị lỗi thumbnail lại load nhanh do sử dụng server của google đây là điều cực kỳ quan trọng.

Để tối ưu load ảnh cho blogger, tăng tốc độ tải trang bạn có thể sử dụng plugin lazy load image bằng cách chèn code sau trước thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("…

Thu gọn chuyên mục nhãn Blogger

Hình ảnh
Việc Customize nhãn Blogger có nhiều cách thường thì làm đẹp bằng CSS sắp sếp kiểu hiển thị... Tuy nhiên nếu như Blog của bạn có ít nhãn thì không vấn đề gì nhưng nếu nhiều nhãn và chuyên mục thì lại có vấn đề ở đây nó làm chậm tốc độ load trang cho Blog của bạn.

Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn tùy biến Widget nhãn cho Blogger bằng cách thu gọn lại kiểu Select Option. Bạn làm theo các bước như tôi hướng dẫn bên dưới nhé.

Bước 1: Blogger - Bố cục - Thêm tiện ích trong danh sách bạn chọn chuyên mục "Nhãn" như hình bên dưới để thêm widget Label vào blog của bạn.


Bước 2: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML. Chuyển đến tiện ích nhãn mà lúc ban đầu bạn đã tạo như hình bên dưới.


Bước 3: Click vào dấu ... mục " Label" để mở rộng code ra bạn để ý dòng code này code trích dẫn ngay bên dưới.


<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
  …

Hướng dẫn tích hợp Live chat Facebook vào Blogger

Hình ảnh
Tính năng hỗ trợ gửi tin nhắn qua Facebook hiện nay không còn xa lạ trên các phương tiện thông tin. Các website hiện nay tận dụng rất tốt tính năng này và áp dụng rất thành công trong việc bán hàng online.

Trong bài viết này tôi sẽ hướng dẫn các bạn cách tích hợp công cụ này vào trong blogger các bước thực hiện như sau.

Bước 1: Bạn truy cập Blogger.com và chọn Blog cần thay đổi.

Bước 2: Chọn Bố cục

Bước 3: Chọn Thêm tiện ích


Bước 4: Hộp thoại bật lên, Chọn tiếp  HTML/JavaScript 



Bước 5: Copy  đoạn code bên dưới dán vào sau đó nhấn Lưu và thoát ra ngoài xem kết quả.
<style>.fb-livechat, .fb-widget{display: none}.ctrlq.fb-button, .ctrlq.fb-close{position: fixed; right: 24px; cursor: pointer}.ctrlq.fb-button{z-index: 999; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD…

Tìm hiểu về Thuộc tính thẻ trong blogger

Hình ảnh
Mỗi phần trong bố cục của blogger widget đều có 1 thẻ  đóng và 1 thẻ  mở đó là thẻ <section> như code tôi trích dẫn bên dưới:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section> Trong bài viết này tôi sẽ hướng dẫn cho các bạn tìm hiểu về cấu trúc của loại thẻ này

Thuộc tính thẻ <b:section>

id – (Bắt buộc) Tên duy nhất, chỉ gồm chữ và số.class – (Tùy chọn) Các tên lớp thông thường là “navbar”, “header”, “main”, “sidebar” và “footer.” Nếu bạn thay đổi thành tên khác, thì sau này khi viết CSS bạn sẻ phải truy vấn đến nó maxwidgets –- (Tùy chọn) Số tiện ích tối đa được cho phép trong phần này. Nếu bạn không chỉ định giới hạn, sẽ không có giới hạn. ( bạn có thể set nó = 2,3,4...)showaddelement – (Tùy chọn) Có thể là “yes” hoặc “no” với giá trị mặc định là “yes có nghĩa là bạn có thể thêm tiện ích trong bố cục này chọn "no" thì bạn không thể thêm tiện ích.growth – (Tùy chọn) Có thể là …