+44(0) 1234 567 890 info@domainname.com

Friday, August 16, 2013

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

9:01 PM

Share it Please
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 :

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


Đă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 != &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ú ý 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 != &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>

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 != &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>

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 != &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ạ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 != &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>

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 != &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>

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 != &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>

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 != &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>


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

0 comments:

Post a Comment

Tags

Thủ thuật pc Góc Làm Đẹp Làm Đẹp Da Thủ Thuật Blogspot - Wordpress - Joomla Thủ Thuật Network Giải trí Thủ Thuật Hay thu-thuat-blogspot ASP.NET Danh bạ Lập trình CSDL Thủ Thuật Blog Lập trình Thủ thuật Excel Phần Mềm Góc Phụ Nữ SEO TT Windows Lý Thuyết CCNA Dịch Vụ Hot CCNA Sức Khỏe - Đời Sống Office Thủ Thuật Mobile Thủ Thuật Win 8 Download Xây dựng liên kết Android Thủ thuật Word Website thu-thuat-internet Forum PHP Tư Vấn Làm Đẹp Mẹo Vặt tien-ich-widget Đọc báo ASP.NET MVC Ca nhạc Hỏi Đáp Thơ Vui Thủ Thuật Game vui-nhon Download Phần Mềm - Crack VBA Excel thu-thuat-facebook Cuộc sống Download Game Photoshop Thủ thuật Blogspot VBA trong Excel Widget Blogspot Địa Điểm Hot C# CSS Giới Tính Tài Liệu Đại học Chuyện lạ Clip Hài - Video Hot Góc Kỹ Năng Góc Sinh Viên Liên Minh Huyền Thoại Sao Sức Khỏe Giới Tính Thủ Thuật Tin Học template-blogger Chuyện Của Sao Design Pattern Kiến thức cơ bản PM hệ thống Thủ thuật Facebook Tin nổi bật Đề thi LAB CCNA Love story Học và hỏi Môn toán Spring.NET Tủ Sách Video lam-quen-voi-blogger Ảnh Vui Bảng Giá Con trai Cẩm nang du học Dependency Injection Hình ảnh Kinh nghiệm học Kỹ Năng Xin Việc Luật Pháp ORM Tin nóng Tiện ích Truyện cười Việt Nam hinh-anh-hai-huoc tho-vui-con-coc thu-thuat-phan-mem Blogspot Distributed Technologies Hợp Tác Kinh Doanh Khám phá MVP NHibernate Photoshop Action Thủ Thuật Win 7 Trẻ Tư Vấn Tiêu Dùng VietYeah TV Xã Hội thu-thuat-SEO Blogger Templates Game flash Khối B Nghịch Nhân vật Phong Cách Slider Thư giãn Thủ thuật Youtube WCF facebook hinh-anh-dep thu-thuat-may-tinh Đời Sống 2010 Con gái Download Game Mobile Drivers External Post Học Nấu Ăn Học vui Làm Đẹp Tóc MVC N-Tier PM hệ điều hành Sao Quốc tế Thủ thuật internet Thông Tin Tin Tức Hot Tivi Truyện Hay Tuyển Dụng Xả Stress Youtube anh-bia-facebook san-pham-google ung-dung-website Đáp án Đề thi thử AOP Abstract Factory Cool stuffs Design Principles Khối A Thông tin mạng Tình yêu lập trình viên phan-mem-van-phong thu-thuat-windows-7 thu-thuat-windows-8 Điện Tử Ảnh Nghệ Thuật 2009 2011 2012 Adapter Pattern Công Nghệ Factory Method Game Hình sự Khối D Kiếm Tiền Qua Mạng Kỹ Năng Nơi Công Sở LinQ Menu Miễn phí Photoshop PSD Sexy Singleton Sành điệu Thủ Thuật Di Động Tin nhắn SMS phan-mem-do-hoa phan-mem-tien-ich Đọc xong vọc liền .NET Remoting 10-thing series 2013 Ajax Bridge Pattern Bóng đá Castle Windsor Chơi Game Online Cover Facebook Có Thể Bạn Chưa Biết Download Phim Dịch vụ Fedora Garbage Collection Google Plus Góc Tâm Sự HTML Hibernate Hài hước IoC JSF Javascript Jquery Khối C Kỹ Năng Bán Hàng Kỹ Năng Thuyết Trình Lazy Load Linux Lock Log4Net MWC Memory Management Mock Multi-Thread MySQL Môn sử Mặc Đẹp Mẹ Và Bé Mỹ Tâm NUnit Ngọc Trinh Nhịp sống trẻ PM văn phòng POCO Passive View Photoshop tách ảnh Phạm Băng Băng Phầm Mềm Crack PostSharp Primefaces Shop Bít Tuốt Strategy Pattern Supervising Controller Sự kiện Thể thao Thủ Thuật Office Tin đặc biệt Toán Tình bạn Tình dục Tốt nghiệp Unit Testing VBA Word Virtual Server Văn WMC 2012 Windows Service acc fshare acc mien phi anh-nghe-thuat cntt di dong di động dropbox dung luong dropbox fshare hinh nen hinh nen dep hình nền job mac os mang xa hoi may ao mạng xã hội social tang dung luong dropbox thu-thuat-mobile thu-thuat-windows-xp tháng 2 top truyen-cuoi tăng dung lượng dropbox vmware Ảnh đẹp