Hướng dẫn tạo intro post cho blogspot ở trang tĩnh và trang bài viết

LongAnIT 7/12/2019 Bình luận
Hello xin chào các bạn, chúng ta lại gặp nhau trong chuyên mục thủ thuật blogspot. Trong bài viết ngày hôm nay tôi sẽ hướng dẫn các bạn cách để chúng ta tạo một intro post cho blogspot. Nghe có vẻ khá hiểu tuy nhiên hãy nhìn hình bên dưới như mình demo nhé.

Tạo intro  post cho bài viết và trang tĩnh blogspot
Tạo intro  post cho bài viết và trang tĩnh blogspot

Về cách thức hoạt động của code này như sau


  1. khi bạn truy cập vào  một bài viết bất kỳ thì phía trên bài viết sẽ hiển thị một hình nền chứa thông tin tiêu đề bài viết và đường link "permaklink" như hình trên.
  2. Code có thể tùy chỉnh được tất cả bao gồm hình nền màu sắc, hiệu ứng
  3. Code sử dụng thẻ điều kiện </b:if> để tùy biến hiển thị

Các bước tiến hành


Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới và dán nó vào phía bên dưới menu trong template của bạn
<!--Bắt đầu intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

<style>
#longanit_postpage{position:relative;display:table;width:100%;height:46vh;margin:0!important;padding:0!important;z-index:999;background:url(https://1.bp.blogspot.com/-t6PmyG2WqWQ/XR1pXC6amgI/AAAAAAAABlI/1PRU6nCtiBMlfy51VJhDxTfVkht6AwpKwCLcBGAs/s1600/banner_longanit.jpg) no-repeat center center!important;background-size:cover!important}
#longanit_postpage:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#longanit_postpage:after{content:&#39;&#39;;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.longanit_postpage_content{position:relative;z-index:3;margin:auto}
.longanit_postpage_label h2{animation: zoomInUp 6s; font-size: 31px; font-weight: 400; color: rgba(255,255,255,.85); margin: 0; padding: 0;text-transform:uppercase;text-align:center}
.longanit_postpage_label p{animation: zoomInDown 4s; font-size: 21px; font-weight: 300; color: rgba(255,255,255,0.7); margin: .5em 0 0 0; padding: 0}
.longanit_postpage_label{margin:0 auto;text-align:center;padding:0}
.longanit_meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='longanit_postpage'>
<div class='longanit_meta_'>
<div class='longanit_postpage_content'>
<div class='longanit_postpage_label'>
<h2 class='_title' id='post-title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/><data:blog.pageName/><i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p><data:blog.url/></p>
</div>
</div></div>
<div class='longanit_meta_'>
</div>
</div>
</b:if>
</b:if></b:if>

<!--Kết thúc intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->
 Bước 3: Tiến hành save lại và xem kết quả. Bạn có thể chỉnh sửa lại một số thứ mình tô đỏ ở trên

Code sử dụng 3 thẻ điều kiện: Chỉ hiển thị trên trang bài viết, trang tỉnh và không hiển thị trên mobile
Thay thế link hình ảnh bằng link sau:
https://1.bp.blogspot.com/-t6PmyG2WqWQ/XR1pXC6amgI/AAAAAAAABlI/1PRU6nCtiBMlfy51VJhDxTfVkht6AwpKwCLcBGAs/s1600/banner_longanit.jpg
Chỉnh sửa độ rộng và chiều cao của bức ảnh banner bạn chỉnh code này: width:100%;height:46vh

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn một tùy chỉnh chuyên sâu áp dụng thẻ điều kiện vào trong blogspot để hoàn thành code tạo intro cho bài viết ở trang tĩnh và trang bài viết cũng như là trên mobile.

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.

Highlight Author Comments in Blogger in threaded comment System

LongAnIT 7/12/2019 Bình luận
Nếu như blog của bạn có lưu lượng truy cập tương đối tốt thì blog của bạn cũng nhận được nhiều bình luận, điều đó có thể là tích cực hoặc tiêu cực. nhận ý kiến ​​liên quan đến cách bạn tương tác với khách truy cập.
Highlight Author Comments in Blogger in threaded comment System
Highlight Author Comments in Blogger in threaded comment System


Nhiều bình luận có thể trong blog của bạn. Làm thế nào khách truy cập blog xác định hoặc nhận ra nhận xét của bạn từ những bình luận này. Có một trường hợp tình cờ xảy ra trong hầu hết các blog là Nhiều blogger sử dụng tên tài khoản của họ là Quản trị viên. Nếu họ bình luận trong blog của bạn hoặc trả lời các bình luận khác, những khách truy cập khác nghĩ rằng đó là Quản trị viên của blog đó. Bạn có muốn làm nổi bật ý kiến ​​của bạn trong blog của bạn?

Chính vì thế mà trong bài viết hôm nay tôi sẽ hướng dẫn các bạn một thủ thuật nhỏ để làm đẹp phần comments system của blogspot thủ thuật có tên gọi "Highlight Author Comments" tạm dịch làm đẹp CSS admin comment với một script khá đơn giản.

Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Copy toàn bộ đoạn code bên dưới và dán nó vào trước thẻ đóng </body>

<script type="text/javascript">
    $(function() {
      function highlight(){
        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;http://4.bp.blogspot.com/-pLzbR7dRJ_M/UcbQMLJAw1I/AAAAAAAAAh8/16rH5vfHKsM/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
          .css(&#39;padding&#39;, &#39;10px&#39;);
          }
          $(document).bind(&#39;ready scroll click&#39;, highlight);
                       });</script>

Thay đổi địa chỉ ảnh tôi tô đỏ bên trên thành địa chỉ image của bạn nhé.

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.

Hướng dẫn tạo thư viện ảnh cho Blogger

LongAnIT 7/02/2019 4 Bình luận
Như chúng ta đã biết tất cả các Website và Blog hiện nay đa phần đều có chuyên mục thư viện ảnh. Với thư viện ảnh các bạn có thể tùy biến làm đẹp cho website của mình ví dụ như: Ảnh hoạt động công ty, ảnh thiên nhiên, xe, nhà... và nhiều thể loại khác. 

Gallery tạo bởi longanit.com

Trong Blogger khi bạn upload hình ảnh khi đăng bài thì mặc nhiên hình đó sẽ nằm trong server của blogger. Tuy nhiên việc sắp xếp hình ảnh mặc định trong Blogger không được đẹp cho lắm. Vì vậy trong bài viết này LongAnIT sẽ hướng dẫn các bạn tạo một thư viện ảnh ( Gallery ) với các bước thực hiện đơn giản.

Bước 1: Đăng nhập vào Blogger - Trang - Tạo trang mới
Bước 2: Chuyển sang Tab HTML và Copy đoạn code bên dưới dán vào

<style>
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.gallery img:hover {
opacity: 0.8;
}
div.desc {
    padding: 10px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}
.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<div class="image-gallery">
  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 1" alt="SEO-IMAGE-CAPTION">
  </div>
  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 2" alt="SEO-IMAGE-CAPTION">
      <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 3" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>
  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 4" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
</div> 
Code trên chia làm bốn 4 cột mỗi cột 1 hình và Reponsive trên các thiết bị Smartphone. Nếu bạn muốn chia thành 3 cột hoặc 2 cột vui lòng thay đổi code sau trong CSS.

.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}

  • Thay đổi giá trị :  24.99999% thành 33.333% ( chia làm 3 cột )
  • Thay đổi giá trị :  24.99999% thành 49.999% ( chia làm 2 cột )

Chú ý: Bạn tính làm sao để khi cộng giá trị tất cả các cột lại <=100% là ok

Kết luận: Bài viết trên tôi đã hướng dẫn các bạn cơ bản tạo thư viện hình ảnh trên blogger. Mọi thắc mắc vui lòng comment ngay bên dưới.

Hướng dẫn cơ bản cách nhúng bootstrap 3 vào trong blogger

LongAnIT 6/30/2019 Bình luận
Bootstrap 3 Framework

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ (typography), các form, các nút (button), tables, modals, v.v... chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột. Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn.

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera.... Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).

1. Tôi xin trích dẫn cấu trúc cơ bản của trang Blogger

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</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:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Đây là cấu trúc cơ bản của 1 template blogger ( Cấu trúc cơ bản, CSS, HTML...).

2. Để sử dụng bootstrap vào trong blogger chúng ta sẽ thực hiện cách sau:

Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML bạn thêm đoạn code bên dưới vào ngay phía dưới thẻ <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 Làm tương tự bạn thêm 2 link bên dưới vào trước trên thẻ </body>
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
<script async='async' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>
 Thêm thẻ Reponsive cho blogger
<meta name="viewport" content="width=device-width, initial-scale=1">
Kết luận: Trên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào website. Sau khi thực hiện việc nhúng xong Boostrap vào website, bạn có thể làm việc với các thành phần của bootstrap.

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

LongAnIT 6/29/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é.


Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot

LongAnIT 6/28/2019 Bình luận
Khi viết bài về thủ thuật blogspot chắc rằng chúng ta sẽ sử dụng nhiều nhất khung trích dẫn code cho bài viết. Có một số trường hợp xảy ra thường là nội dung bài viết, phần trích dẫn code, đoạn văn bản  hoặc đường link quá dài làm cho bài viết bị tràn ra ngoài khung. Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn các bạn cách sửa lỗi nội dung trích dẫn code bài viết bị tràn ra ngoài.

Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot
Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot

Trường hợp này thường là do copy bài viết tự một website khác dán vào bài viết, để khắc phục lỗi Text bị tràn ra khỏi khung bạn làm như sau:

Bước 1:  Đăng nhập vào phần quản trị => Chủ đề - Chỉnh sửa HTML
Bước 2:  Thêm đoạn code bên dưới vào trước thẻ đóng  ]]>
.post{word-wrap:break-word;}
 Chú ý: Nếu gặp phải trường hợp code khung trích dẫn quá dài ta thay thế bằng code sau:
blockquote{word-wrap:break-word}
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.

Phím tắt hữu ích cho khung soạn thảo Blogspot

LongAnIT 6/26/2019 Bình luận
Blogspot là nền tảng miễn phí và dễ sử dụng nhất tính tới thời điểm hiện tại. Bạn có thể sử dụng Blogger của Google để phục vụ cho công việc của mình, đơn giản là viết blog chia sẻ kinh nghiệm, hoặc tạo 1 Website bán hàng, Landing Page…
19 phím tắt hữu ích cho khung soạn thảo Blogspot
19 phím tắt hữu ích cho khung soạn thảo Blogspot

Nếu bạn là một blogger thì công việc viết bài nó trở thành quá quen thuộc rồi có phải không nào. Cũng giống tất cả các ngôn ngữ khác thì khung soạn thảo văn bản của Blogspot cũng có những công cụ phục vụ cho việc hỉnh sửa văn bản, hình ảnh, video... Tuy nhiên đối với những bạn thường xuyên làm việc với khung soạn thảo này thì những phím tắt sẽ vô cùng hữu dụng nó giúp bạn rút ngắn được thời gian trong việc soạn thảo cũng như chỉnh sửa bài viết. Trong  bài viết hôm nay longanit.com xin được giới thiệu với các bạn một số phím tắt thông dụng trong trình soạn thảo bài viết blogspot

PHÍM TẮT HỮU ÍCH CHO KHUNG SOẠN THẢO BLOGGER


1. Ctrl + C: Sao chép văn bản đã được chọn

2. Ctrl + V: Dán đoạn văn bản vừa mới sao chép

3. Ctrl + Z: Trả lại tác vụ trước đó

4. Ctrl + Y: Trả lại tác vụ sau khi nhấn Ctrl+Z

5. Ctrl + X: Cắt đoạn văn bản được chọn (bôi đen)

6. Ctrl + B: In đậm đoạn văn bản được chọn

7. Ctrl + A: Chọn toàn bộ văn bản trong trang

8. Ctrl + S: Tự động lưu bài viết của bạn

9. Ctrl + U: Định dạng gạch chân văn bản cho đoạn văn bản được chọn

10. Ctrl + I: In nghiêng đoạn văn bản được chọn

11. Ctrl + K: Chèn liên kết cho đoạn văn bản được chọn

12. Tab: Chuyển danh sách dạng list xuống list cấp 2

13. Tab + Shift: Xóa định dạng danh sách

14. Ctrl + F: Tìm kiếm từ hoặc đoạn văn bản trong trang

15. Ctrl + Shift + M: Chuyển trình soạn thảo bài viết sang chế độ xem trên Mobile

16. Ctrl ++ (Press + Twice): Phóng lớn trình soạn thảo

17. Ctrl — (Press – Twice): Thu nhỏ trình soạn thảo

18. Ctrl + 0 (Số không): Trả lại trình soạn thảo về kích thước mặc định

19. Ctrl+Shift+V: Loại bỏ định dạng đoạn văn bản mới copy và chỉ dán text vào khung soạn thảo.

Kết luận:
Trên đây là một số những phím tắt hữu ích cho khung soạn thảo văn bản Blogspot bạn nên áp dụng bởi vì nó có thể giúp bạn giảm thời gian định dạng và soạn thảo bài viết. Nếu bạn thấy hay thì hãy chia sẻ ngay để cho mọi người cùng biết nhé.


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.

Hướng dẫn tùy biến Widget ở những trang nhất định trong Blogspot

LongAnIT 6/22/2019 Bình luận
Hello các bạn. Hôm nay chúng ta lại gặp nhau trong topic thủ thuật blogspot. Như các bạn đã biết blogspot quản lý giao diện chính từ Template chứa tất cả các code người dùng sử dụng. Một phần nữa là Bố cục (Widget) - Giao diện đồ họa dành cho người dùng dễ thao tác có thể thêm/xóa các tiện ích

Đối với các blog có nhiều bốc cục thì việc sử dụng nhiều Widget (Tiện ích) là điều không tránh khỏi. Do vậy làm thế nào để các Wiget tiện ích đó hiển thị đúng nơi, đúng chỗ là điều mà các Blogger phải tính toán và cân nhắc rất kỹ.

Việc bố trí các Widget trên Template một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.Hiển thị Widget ở những trang nhất định trong Blogspot - ẩn hiện Wiget ở những trang nhất định trên desktop và moblie sẽ giúp tối ưu hóa tốc độ tải trang cho blog của bạn rất nhiều

Chính vì thế mà trong bài viết này longanit xin được giới thiệu đến các bạn thủ thuật ẩn hiện Widget ở những trang nhất định trong Blogspot”

 Xác định ID của Widget tiện ích cần tùy biến ta làm như sau:

Bước 1: Đăng nhập vào Blogger - Bốc cục như hình

Cách xác định ID của tiện ích Widget
Cách xác định ID của tiện ích Widget

Tại giao diện tiện ích chọn một Widget bất kỳ cần tùy biến click vào chỉnh sửa như hình

ID nằm phía bên phải cuối cùng của thanh Address
ID nằm phía bên phải cuối cùng của thanh Address
Nhìn lên phía trên thanh địa chỉ màu xanh bạn kéo con trỏ chỏ cho đền cuối cùng sẽ hiện thị ID của Widget như trong hình trên ID=HTML7.

Các bước tùy biến Widget

Sau khi hoàn thành xác định ID của Widget cần tùy biến bạn quay lại trang quản trị Blogger

  1. Chủ đề - Chình sửa HTML. 
  2. Phần phía trên thanh menu của template bạn sẽ thấy tab "chuyển đến tiện ích". 
  3. Tìm ID có tên là HTML7
Chỉnh sửa tùy biến trong template blogspot
Chỉnh sửa tùy biến trong template blogspot

Click vào dấu tam giác màu đen bên trái để mở rộng code ra như trong hình tôi có code này


<b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
Bây giờ để ẩn Widget này ngoài trang chủ tôi sẽ thêm code bên dưới vào phía dưới dòng  <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>
Sau khi hoàn thành tôi có code hoàn chỉnh như sau
 <b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
Tiến hành lưu lại và xem kết quả. Cũng tương tự như thế dùng cho các thè điều kiện bên dưới để tùy biến

Hide from home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

Hide from index pages

(home, label, search page or all posts page (include home and its older posts pages).
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:remove/>
</b:if>

Hide from static pages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:remove/>
</b:if>

Hide from item pages (articles, posts)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:remove/>
</b:if>

Hide from archive pages (showing posts by months / years)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <b:remove/>
</b:if>

Hide from 404 pages

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
 <b:remove/>
</b:if>

Hide from mobile

<b:if cond='data:blog.isMobileRequest'>
 <b:remove/>
</b:if>
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 để chúng ta tùy biến một widget bất kỳ trong blogspot bằng cách sử dụng một số thẻ điều kiện cơ bản. Chúc các bạn thành công

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.