Bản tóm tắt này không có sẵn. Vui lòng nhấp vào đây để xem bài đăng.

Một công cụ hỗ trợ tạo một report về trang web của bạn miễn phí
xem thêm tại đây

Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot là một vấn đề khá khó khăn với những người làm web bằng blogspot mà không am hiểu về html hoặc là mất nhiều thời gian để tìm hiều. Để đáp ứng nhu cầu của người dung hôm nay chiase69 sẽ hưỡng dẫn bạn cách dể dàng để thêm các tiện ích vào bất kỳ vị trí nào cho blogspot
Thường thì trong bố cục blogspot sẽ phân ra một số vị trí như header, footer, sidebar, main,...và các bạn có thể thêm widget vào vị trí bất kỳ bằng cách copy đoạn code bên dưới và đặt cho phù hợp
Đầu tiên chúng ta đăng nhập blogspot ==> Mẫu ==> Sau lưu (bước này nhằm mục đích lưu lại mẫu theme của bạn để tránh trường hợp làm sai không sửa được thì bạn có thể lấy lại theme này) ==> Chĩnh Sữa HTML

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='Bài Viết Xem Nhiều' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<div class='title-left'><data:title/></div>
</b:if>
<div class='box-left'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Chú ý phần chữ màu đỏ là phần bạn cận thay đổi
Bài Viết Xem Nhiều là tiêu đề bạn đặt cho tiện ích
sidebar1, HTML99 Nếu bạn thêm số tiện ích lớn hơn 2 thì bạn phãi đặt tên cho những phần này là khác nhau
VD: tiện ích 1 là sidebar1, HTML99 thì tiện ích 2 là sidebar2, HTML100
HTML là tên của tiện ích
VD HTML là HTML/Javascript, nếu bạn muốn thêm nhãn thì thay Bằng Label. phần này hơi phức tạp nếu bạn mà làm không được thì cứ commen vào bên giới mình sẽ chỉ rỏ cho

Cách thêm tiện ích widget vào một vị trí bất kỳ trong blogspot

Ở những cách sau đây là những cách chỉ thêm tiện ích vào một vị trí bất kỳ ví dụ như trang chủ hoặc là label, bài viết, trang...
1. Chỉ cho phép widget hiển thị ở trang chủ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang chủ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Để thêm bạn đầu tiên là phải xác định vị trí muốn thêm, như head, footer....(nếu không xác địch được thì sau khi thêm vào một vị trí cùng với các tiện ích có sẵn trên web (thêm vào đầu hoặc cuối các tiện ích có sẵn sau này cho dể chĩnh sữa) rồi bạn vào bố cụng để di chuyển đến nơi thích hợp)
sau khi xác định vị trí muốn thêm thì bạn hãy copy cã đoạn mã trên rồi dán vào
2. Chỉ cho phép widget hiển thị ở từng bài viết 

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở từng bài viết' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

3. Chỉ cho phép widget hiển thị ở những trang nhất định:

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang nhất định' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Link của bạn"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Đây là code thêm tiện ích vào một trang nhất định, bạn có thể xem demo tại link Danh Mục ở phần này chiase69 áp dụng vào tạo một danh mục các label trên một trang thay vì các label xuất hiện trên toàn ộ trang gây ra tốn nhiều khoảng trống của web.

4. Widget chỉ hiển thị trên các trang Label

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trên các label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

5. Widget chỉ hiển thị trên các trang Static pages 

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở static pages' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

6. Widget hiển thị trên trang tìm kiếm

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang tìm kiếm' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchQuery>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

7. Widget chỉ hiển thị tại trang lưu trữ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang lưu trữ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Thủ thuật này giúp tạo ra sự khác biệt cho blog của bạn. Theo đó tiện ích được chọn hiển thị sẽ mặc định được ẩn đi, và widget đó chỉ hiện thị khi nào vào xem các bài viết thuộc nhãn đã được bạn chỉ định. Tiện ích này tương tự như thủ thuật: Hiện thị widget ở những trang nhất định trong blogspot

» Bước 1: Xác định ID của Wdget tiện ích cần tùy biến theo thủ thuật này.

1.1- Vào Bố cục (Layout) -> Nhấp vào Chỉnh sửa (Edit) trên Widget cần xử lý

1.2 - Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML17 (trong trường hợp này là widget HTML17, đối với widget khác sẽ có ID khác)

» Bước 2: Cài đặt hiện thị widget khi xem bài viết thuộc một nhãn nhất định.

- Bài viết này mình sẽ hướng dẫn cho các bạn 2 cách thực hiện khác nhau bạn có thể tùy ý thực hiện và chọn lấy một cách.

CÁCH 1: KẾT HỢP CSS VÀ XML

1.1. Đăng nhập Blogger.

1.2. vào mẫu (Template) => Chỉnh sửa HTML (Edit HTML) => Đặt đoạn code sau đây vào trước thẻ </head>:

<style type='text/css'>
/*Hiển thị widget khi xem các bài viết của một label (nhãn) nhất định */
#ID_widget {display:none;}
</style>

- Trong đó: ID_widget // Thay ID widget muốn hiển thị vào đây. (Ở ví dụ trên thì ID_widget là HTML17). Khi đó thay vào sẽ được như sau:

<style type='text/css'>
#HTML17 {display:none;}
</style>

Bước 3: tìm đoạn code tương tự đoạn code sau đây:

<data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

- Thêm vào sau nó đoạn code sau:

<!-- Hiển thị widget khi xem các bài viết của một nhãn nhất định http://namkna.blogspot.com/-->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:label.name == "Nhãn"'>
<style type='text/css'>
#HTML17 {display:block;}
</style>
</b:if>
</b:if>

Nhãn: Thay nhãn của bài viết muốn hiển thị widget.
ID_widget: Thay ID widget muốn hiển thị vào đây.

Bước 4: Save template. (Lưu mẫu)
Cách khác: theo thuthuatblogger, thì  ở bước 3 bạn tìm đoạn code tương tự như sau:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Rồi đổi nó thành thế này:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<script>var getLabel=&#39;<data:label.name/>&#39;;</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Kế đến dùng từ khóa HTML17 tìm đến cấu trúc XML của tiện ích này rồi thêm vào thành như sau (phần được đánh dấu màu đỏ là phần thêm vào):

<b:widget id='HTML1' locked='false' title='Tên tiện ích' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
// Code to display widgets on posts from a label by www.thuthuatblogger.info
if(getLabel=="Tên nhãn") {
document.getElementById("HTML17").style.display = "block";
}
//]]>
</script>
</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:includable>
</b:widget>

Thay Tên nhãn thành tên của nhãn mà bạn muốn áp dụng thủ thuật. Lưu Template là hoàn thành.

Mở rộng: nếu bài viết có nhiều nhãn thì có thể thêm điều kiện để tiện ích chỉ hiển thị đối với nhãn cuối cùng hay không. Câu trả lời của mình là chỉ cần sử dụng Bước 1 với code nhãn như sau:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<style type='text/css'>
#HTML17 {display:block}
</style>
</b:if>
</b:if>
</b:loop>
</b:if>
</span>

Chúc thành công!

Nguồn bài viết từ terocket.com

Vấn đề của mình ở đây là Cài đặt miền của bên thứ ba mình có tích chọn
Chuyển hướng vienduongtech.com đến www.vienduongtech.com rồi nhưng khi truy cập vienduongtech.com vẫn không được
Giải quyết: trỏ thêm DNS cái này nữa :
@ URL redireact -> www.vienduongtech.com

hình minh họa về cách làm này của mình

1. Cài đặt password cho tất cả bài viết trong blog.
- vào bố cục
- vào chỉnh sửa code HTML
- thêm đoạn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
var password;
var pass1="blogspotvn";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://www.blogspotvn.blogspot.com";
}
</script>
</b:if>

- Có thể thay đổi code màu xanh theo ý thích của bạn.
- var pass1="blogspotvn"; : thiết lập password (đổi code màu đỏ lại)
- window.location="http://www.blogspotvn.blogspot.com"; : đây là code thiết lập trang web sẽ tự động trả lại trở về khi bạn đánh sai password.(đổi code màu đỏ lại)

2. Thiết lập cho 1 bài viết cụ thể nào đó:
- Chỉ cần đổi lại code trên thành code bên dưới là được

<b:if cond='data:blog.url == "Địa chỉ URL của bài viết"'>
<script language='JavaScript'>
var password;
var pass1="blogspotvn";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://www.blogspotvn.blogspot.com";
}
</script>
</b:if>


☼ Mở rộng của thủ thuật :
- Với thủ thuật này ta có thể thiết lập nhiều password khác nhau, chỉ cần điền đúng 1 trong những password đó là có thể xem được bài viết đó.
- Và đây là code :


<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
var password;
var pass1="password1";
var pass2="password2";
var pass3="password3";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1 || password==pass2 || password==pass3)
alert('Password Correct! Click OK to enter!');
else
{
window.location="http://www.blogspotvn.blogspot.com";
}
</script>
</b:if>