Cách thêm widget vào vị trí bất kỳ trong blogspot. Cách thêm widget vào blogspot.Cách thêm một tiện ích vào vị trí bất kỳ trên blogspot.Cách thêm một widget vào vị trí bất kỳ trong blogspot. Cách thêm widget HTML/Javascripts vào blogspot. Code widget blogspot
Các bạn thường download những template blogspot với một form định sẵn, nên đôi khi các bạn muốn thêm một hay nhiều tiện ích ở một vị trí bất kỳ khác với những vị trí đã có sẵn thì làm thế nào?
Bít Tuốt xin chia sẻ một cách làm đơn giản cho những bạn mới biết về blogspot. Chú ý các bài viết copy từ Bít Tuốt Blog xin ghi rõ nguồn là đã copy từ Blog của Bít Tuốt. Xin cảm ơn
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
Để thêm một hay nhiều widget vào vị trí bất kỳ trong blogspot thì bạn làm theo các bước sau :
Đăng nhập blog => Mẫu (cái thứ 2 từ dưới lên) => Chỉnh sửa HTML
Tới đây bạn có thể thêm phần code bên dưới vào phần bạn muốn hiển thị
(Ngoài ra bạn có thể down trực tiếp code về rồi dùng notepad ++ để chỉnh sửa cho dễ)
Cách thêm một widget thông thường vào Blogspot
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='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Bài Viết Hay' 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:
- sidebar1 , HTML99: phần này bạn cần thay đổi nếu bạn thêm > 2 widget vào blogspot (Nếu bạn thêm > 2 cái thì 2 cái bạn thêm phải có phần này đặt tên khác nhau)
Ví dụ: Cái 1 bạn đặt là : id='sidebar1' và id='HTML99' thì cái sau bạn phải đặt khác đi đổi thành id='sidebar2' và id='HTML100' chẳng hạn
Các bạn chú ý thay id='sidebar1' và id='HTML99' cho đỡ trùng với 1 Widget đã có sẵn trên blog. Nếu bạn nào thấy trùng thì thay bằng số khác nhé.
- title='Bài Viết Hay' : Tên Widget của bạn cái này bạn có thể bỏ trống được (bạn có thể để là title='' )
Một số cách hiển thị tùy biến bạn có thể áp dụng với Widget
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='' 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>
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='' 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='' 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>
Bạn hãy thay phần Link của bạn đường link mà bạn muốn widget đó hiển thị
Ví dụ: http://bittuot.blogspot.com/2013/07/crack-win-7-cho-moi-phien-ban.html
hoặc: http://bittuot.blogspot.com/search/label/Download .. tùy ý thích của bạn
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ị
4. Widget chỉ hiển thị trên các trang Label
Trang label là trang có định dạng kiểu: http://bittuot.blogspot.com/search/label/Download
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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
Trang Static pages là trang có định dạng kiểu: http://bittuot.blogspot.com/p/index.html
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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
Trang Static pages là trang có định dạng kiểu: http://bittuot.blogspot.com/search?q=collagen
Là trang hiển thị các kết quả tìm kiếm trên trang của bạn.
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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ữ
Trang lưu trữ là trang có dạng kiểu: http://bittuot.blogspot.com/2013/06
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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>
Chúc bạn thành công!
Các bạn thường download những template blogspot với một form định sẵn, nên đôi khi các bạn muốn thêm một hay nhiều tiện ích ở một vị trí bất kỳ khác với những vị trí đã có sẵn thì làm thế nào?
Bít Tuốt xin chia sẻ một cách làm đơn giản cho những bạn mới biết về blogspot. Chú ý các bài viết copy từ Bít Tuốt Blog xin ghi rõ nguồn là đã copy từ Blog của Bít Tuốt. Xin cảm ơn
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
Để thêm một hay nhiều widget vào vị trí bất kỳ trong blogspot thì bạn làm theo các bước sau :
Đăng nhập blog => Mẫu (cái thứ 2 từ dưới lên) => Chỉnh sửa HTML
Tới đây bạn có thể thêm phần code bên dưới vào phần bạn muốn hiển thị
(Ngoài ra bạn có thể down trực tiếp code về rồi dùng notepad ++ để chỉnh sửa cho dễ)
Cách thêm một widget thông thường vào Blogspot
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='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Bài Viết Hay' 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:
- sidebar1 , HTML99: phần này bạn cần thay đổi nếu bạn thêm > 2 widget vào blogspot (Nếu bạn thêm > 2 cái thì 2 cái bạn thêm phải có phần này đặt tên khác nhau)
Ví dụ: Cái 1 bạn đặt là : id='sidebar1' và id='HTML99' thì cái sau bạn phải đặt khác đi đổi thành id='sidebar2' và id='HTML100' chẳng hạn
Các bạn chú ý thay id='sidebar1' và id='HTML99' cho đỡ trùng với 1 Widget đã có sẵn trên blog. Nếu bạn nào thấy trùng thì thay bằng số khác nhé.
- title='Bài Viết Hay' : Tên Widget của bạn cái này bạn có thể bỏ trống được (bạn có thể để là title='' )
Một số cách hiển thị tùy biến bạn có thể áp dụng với Widget
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='' 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>
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='' 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='' 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>
Bạn hãy thay phần Link của bạn đường link mà bạn muốn widget đó hiển thị
Ví dụ: http://bittuot.blogspot.com/2013/07/crack-win-7-cho-moi-phien-ban.html
hoặc: http://bittuot.blogspot.com/search/label/Download .. tùy ý thích của bạn
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ị
4. Widget chỉ hiển thị trên các trang Label
Trang label là trang có định dạng kiểu: http://bittuot.blogspot.com/search/label/Download
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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
Trang Static pages là trang có định dạng kiểu: http://bittuot.blogspot.com/p/index.html
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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
Trang Static pages là trang có định dạng kiểu: http://bittuot.blogspot.com/search?q=collagen
Là trang hiển thị các kết quả tìm kiếm trên trang của bạn.
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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ữ
Trang lưu trữ là trang có dạng kiểu: http://bittuot.blogspot.com/2013/06
<b:section class='sidebar' id='sidebar1' 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 != ""'>
<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>
Chúc bạn thành công!
