Hướng Dẫn Tạo Tiện Ích Widget Bất Kỳ Trong Blogspot

i Khám Phá  10 months ago  1 No comments  

Khi bạn download template blogspot trên mạng, bạn sẽ được một form định sẵn các tiện ích. Tuy nhiên, trong quá trình tạo dựng website bằng blog, bạn muốn thêm và bớt một hay nhiều tiện ích ở vị trí bất kỳ thì đôi khi gặp những khó khăn nhất định.  IKP xin chia sẻ một cách làm đơn giản giúp cho các bạn mới tìm hiểu blogspot có thể tùy chỉnh widget theo ý muốn.

 Hướng Dẫn Tạo Widget Bài Viết Mới Nhất Cho Blogspot

Cách Tạo Email Google Chuyên Nghiệp Bằng Tên Miền

Widget quảng cáo hiển thị ở Trang Chủ

Thường thì trong bố cục blogspot sẽ phân ra các bộ cục (thường gọi là layout) như: header,footer , main, sidebar...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 vào bố cục trang web sao cho phù hợp. Các bước thực hiện như sau:

* Bước 1:  Đăng nhập Blogspot --> Mẫu (Templates)  --> Chỉnh sửa HTML (Edit HTML)

(Lới khuyên: Các bạn nên down toàn bộ code về rồi sửa bằng phần mềm Notepad ++ . Và lưu lại 1 bản gốc để khôi phục khi quá trình thực hiện gặp lỗi không sửa chữa được.)

* Bước 2 :  Bạn lựa chọn 1 trong các hình thức hiển thị của widget như bên dưới

Lựa chọn 1: Code này thì widget này sẽ hiển thị trên tất cả các trang trong blog như: trang chủ,trang bài viết,trang label....

<b:section class='sidebar' id='sidebar10' preferred='yes'>
<b:widget id='HTML100' locked='false' title='Khám Phá Hay' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<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ú ý: Chữ tô đậm màu đỏ là phần bạn cần thay đổi

+ sidebar10, HTML100: phần này bạn cần thay đổi cho khác. Nếu bạn thêm nhiều hơn 2 widget vào thì 2 widget cộng thêm phải đặt tên khác với 2 widget sidebar10, HTML100.

 Ví dụ: Cái 1 bạn đặt là : id='sidebar10' và id='HTML100' thì cái sau bạn phải đặt khác đi đổi thành id='sidebar11' và id='HTML101' chẳng hạn

Và bạn nên thay id='sidebar10' và id='HTML100'  cho đỡ trùng với Widget đã có sẵn trên blog. Khi widget trùng nhau thì thay bằng số khác nhé.

+ title='Khám Phá Hay' : Tên Widget này bạn có thể bỏ trống (bạn có thể để là title='' )
Lựa chọn 2: Chỉ hiển thị widget ở trang chủ

<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' 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 != &quot;&quot;'>
<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>

Lựa chọn 3: Chỉ hiển thị widget ở từng bài viết:

<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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:if>
</b:includable>
</b:widget>
</b:section>

Lựa chọn 4: Chỉ hiển thị widget ở những trang nhất định:

<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' 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 != &quot;&quot;'>
<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>

Thay phần Link của bạn thành link mà bạn muốn widget đó hiển thị

Ví dụ: 

- http://khamphamedia.blogspot.com/2014/05/kham-pha-host-luu-tru-css-js-tren-google-drive.html

hoặc: 

- http://khamphamedia.blogspot.com/search/label/thu-thuat-blogspot...

Hay 1 đường link bất kỳ khác. Khi bạn chọn đường link như vậy thì khi bạn click đến link đó widget mới hiển thị, còn những đường dẫn khác widget đó sẽ không hiển thị.

Lựa chọn 5:. Chỉ hiển thị widget ở các trang Label

Trang Label là trang có định dạng: http://khamphamedia.blogspot.com/search/label/thu-thuat-blogspot 

.<b:section class='sidebar' id='sidebar11' preferred='yes'>

<b:widget id='HTML4' locked='false' title='test 1' 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 != &quot;&quot;'>
<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>

Lựa chọn 6: Chỉ hiển thị widget ở các trang Static pages 

Trang static pages là trang có định dạng: http://khamphamedia.blogspot.com/p/index.html

<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML4' locked='false' title='test 1' 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 != &quot;&quot;'>
<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>

Lựa chọn 7: Chỉ hiển thị widget ở trang tìm kiếm

<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML4' locked='false' title='test 1' 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 != &quot;&quot;'>
<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>

Lựa chọn 8:. Chỉ hiển thị widget tại trang lưu trữ

Trang static pages là trang có định dạng: http://khamphamedia.blogspot.com/2014/06

<b:section class='sidebar' id='sidebar11' preferred='yes'>
<b:widget id='HTML4' locked='false' title='test 1' 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 != &quot;&quot;'>
<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>

* Bước 3 :  Chọn vị trí phù hợp

Tới đây, bạn tìm vị trí muốn widget hiển thị: header,footer , main, sidebar hay vị trí bất kỳ của bố cục blogspot. Rồi dán (paste) đoạn code bạn chọn vào vị trí đó. Tiếp đến lưu mẫu và vào phần bố cục trang web để kiểm tra được chưa.

Chúc bạn thành công!

Nguồn: www.ikhampha.com