Hiển thị các bài đăng có nhãn Thủ Thuật Blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ Thuật Blog. Hiển thị tất cả bài đăng

Tổng hợp các thẻ điều kiện trong blogspot

Cách sử dụng

Thẻ điều kiện giúp ta có thể linh hoạt điều chỉnh các tiện ích, các đoạn JS hoạt động trên những trang nhất định nhằm đạt hiệu quả cao nhất. Ví dụ, mình có 1 đoạn code mà mình chỉ muốn nó hoạt động khi xem bằng máy tính, còn sẽ không hoạt động khi xem bằng mobile thì mình sẽ dùng thẻ điều kiện như sau:
<b:if cond='data:blog.pageType != "data:blog.isMobile"'>
// Đoạn code chỉ hoạt động trên máy tính
</b:if>

Các thẻ điều kiện của Blogger


Dưới đây là 1 số thẻ điều kiện của Blogger mà mình biết được. Nếu như thiếu cái nào thì các bạn bổ sung giúp mình trong phần Comment nhé!

1. Thẻ điều kiện cho trang chủ, trang search label, trang archive:

<b:if cond='data:blog.pageType == "index"'>

2. Thẻ điều kiện cho bài viết.

<b:if cond='data:blog.pageType == "item"'>

3. Thẻ điều kiện cho trang tĩnh:

<b:if cond='data:blog.pageType == "static_page"'>

4. Thẻ điều kiện cho trang lưu trữ:

<b:if cond='data:blog.pageType == "archive"'>

5. Thẻ điều kiện cho trang chủ:

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

6. Thẻ điều kiện cho URL nhất định:

<b:if cond='data:blog.url == "URL nhất định"'>

7. Thẻ điều kiện cho Page và Post:

<b:if cond='data:blog.url == data:post.url'>

8. Thẻ điều kiện cho tất cả Label:

<b:if cond='data:blog.searchLabel'>

9. Thẻ điều kiện cho Label nhất định

<b:if cond='data:blog.searchLabel == &quot;Tên nhãn&quot;'>

10. Hiển thị nội dung cho bài viết đầu tiên tại trang chủ

<b:if cond='data:post.isFirstPost'>

11. Thẻ điều kiện cho mobile:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

12. Thẻ điều kiện cho trang báo lỗi 404

<b:if cond='data:blog.pageType == "error_page"'>

Các loại điều kiện

Bên trên là các thẻ điều kiện đúng, tức là nếu là A thì sẽ xảy ra B. Nhưng chúng ta cũng còn 1 loại điều kiện khác là điều kiện phủ định. Tức là nếu không phải là A thì sẽ xảy ra B.
Vậy, câu lệnh của hai loại điều kiện này khác nhau như thế nào, hay là cách sử dụng hai loại này có gì khác nhau. Câu trả lời rất đơn giản. Các bạn hãy để ý ở đoạn == trong các loại điều kiện mình đã nêu và != trong ví dụ đầu bài bạn sẽ nhận ra ngay sự khác nhau.

Ví dụ:

Điều kiện đúng:
<b:if cond='data:blog.pageType == "index"'>
Điều phủ định:
<b:if cond='data:blog.pageType != "index"'>

Lời kết:

Trên đây mình đã hướng dẫn cách dùng cũng như các thẻ điều kiện mà mình biết. Hi vọng, nó sẽ giúp ích cho các bạn trong việc tối ưu blog của mình.

Hướng dẫn đăng kí Google Adsense cho blogspot của bạn đơn giản nhất

Như các bạn đã biết nguồn thu chính của Google là quảng cáo. Và Google AdSensei, Bài viết này mình chỉ đề cập đến những người có website mà chưa biết cách đặt quảng cáo trên trang web của họ. Hiện nay Google AdSense rất được cồng đồng blogger Việt ưa chuộng, nếu chịu khó quan sát bạn sẽ thấy có rất nhiều các trang web lớn tại Việt Nam đang đặt quảng cáo của Google AdSense.

Chúng ta cùng bước vào quá trình đăng kí Google Adsense nhé

Bước 1 Chúng ta thiết lập ngôn ngữ nhé
lưu ý những blogspot nào tiếng anh thì  không cần thực hiện bước này nhé

Để thực hiện bước đăng kí chúng ta cần đăng nhập vào blog => Chọn Cài Đặt => tiếp tục chọn Ngôn ngữ và định dạng
Tại phần ngôn ngữ bạn đổi từ Tiếng Viết sang Tiếng Anh ( Hoa Kì ) - English (Uniter Stastes)
Tiếp theo ấn F5 tải lại trang để xuất hiện mục DOANH THU nhé
Bấm chọn vào thẻ  Doanh Thu AdSense (Earnnings AdSense) => Tiếp tục bấm vào nút Đăng ký AdSense (Sign up for Adsense).  

Khi đó bạn sẽ được chuyển hướng đến trang đăng ký của Google AdSense. Ở đây có 2 lựa chọn cho bạn là Tạo một tài khoản Google mới cho tài khoản AdSense  của bạn. Tuy nhiên theo ý kiến cá nhân của mình là hãy sử dụng chính tài khoản Gmail hiện tại của bạn bằng cách bầm vào nút Có, Tiến hành đăng nhập tài khoản Google (Yes, proceed to Google Account sign in) để đăng nhập vào trang đăng ký (Lưu ý đây là tài khoản gmail đừng hiểu nhầm là tài khoản AdSense nhé, Tài khoản AdSense là tài khoản bạn có được sau khi google chấp thuận đơn đăng ký Google AdSense  của bạn).
Ảnh minh họa ( Nguồn TEROCKET )

Một khi bạn đăn ký AdSense qua Blogger thì mặc định Google sẽ hiểu là bạn đăng ký AdSense  cho blog đó. Do vậy bạn không thể chỉnh sửa được URL của trang bạn muốn đăng ký quảng cáo. Bạn chỉ có thể chọn được Ngôn ngữ nội dung (Content Language). Đây chính là nội dung của blog bạn (đồng thời cũng là nội quảng cáo sẽ hiển thị, nên chọn Tiếng việt  nếu độc giả của bạn hướng đến là người Việt Nam).

Làm như hình nhé

Ảnh minh họa ( Nguồn TEROCKET )

Rồi bạn cứ làm theo bên Google là xong nhé
Đợi Google trả mail về để biết bạn đăng kí thành công hay thất bại 






Hướng dẫn tạo khung quảng cáo cho blogger

Hôm nay mình sẽ hướng dẫn cho ae cách tạo Phần Quảng Cáo cho blogger nhé

B1 : Ae up tấm ảnh quảng cáo lên như mình nhé

Đặt liên kết cho tấm ảnh tức là khi người dùng click vào tấm ảnh sẽ chuyển sang link web cần quảng cáo chẳng hạn
Sau khi đã đặt liên kết
Các bạn chuyển sang Html
B2 Copy toàn bộ

B3 : Vào Bố Cục . thêm tiện ích Html/Javascript
dán toàn bộ đoạn code trên vào phần nôi dung 
Lưu lại và xem thành quả thôi






Cách tạo khung liên kết website cho blog của bạn cực đẹp

He lô !! ae và hôm nay mình vừa tìm hiểu được cách tạo khung liên kết web cho blog cá nhân và còn chờ gì nữa bắt đầu hướng dẫn ae thôi !!
   Sau đây là ảnh demo

B1 : Ae đăng nhập vào blogger Vào Bố Cục + thêm tiện ích html/javaScrip

B2 : copy đoạn code sau dán vào phần nội dung

<div class="widget-content">
<style>
#lkbb-widget::-webkit-scrollbar{width:5px}
#lkbb-widget::-webkit-scrollbar-thumb{background:#000000;border-radius:100px}
#lkbb-widget::-webkit-scrollbar-thumb:active{background:#000000}
#lkbb-widget{padding:0;margin:0;list-style:none;max-height:310px;overflow:auto}
.lkbb-widget{margin:0;padding:0}
.lkbb-widget li{margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center;width:50%}
.lkbb-widget a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; margin: 0 5px 5px 0; padding: 7px 15px; font: 400 17px Roboto!important; -webkit-transition: .3s; letter-spacing: -.35px; border-radius: 0; -moz-transition: .3s; -o-transition: .3s; color: #000000!important; border: 1px solid #000000;border-radius: 40px}
.lkbb-widget a:hover{color:#006d68!important;border:1px solid;border-radius: 12px;}
</style>
<div id="lkbb-widget">
<div class="lkbb-widget">
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
<li><a href='http://anhstarit.blogspot.com///' target='_blank' title='Anh Star IT'>Anh Star IT</a></li>
</div></div></div>

B3 : chỉnh sửa
thay đoạn http://anhstarit.blogspot.com/ thành link web muốn liên kết
thay đoạn Anh Star IT thành Tên demo của web muốn liên kết
Nếu bạn muốn thay màu nền khác thì kéo lên đầu đoạn code nhé

Lưu lại và xem thành quả thôi

Xem thêm 

Hướng dẫn tạo nút download cho bài viết trong blogger

Đầu tiên để có nút download ta cần hình ảnh của  NÚT DOWNLOAD

Vào đây để tham khảo các mẫu NÚT DOWNLOAD  nhé :Tại đây

Tiếp theo khi đã có mẫu NÚT DOWNLOAD

Bạn vào Bài Đăng -> HTML, copy và thêm đoạn code này vào

<a href="http://dunghennessy.blogspot.com/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img onmouseout="this.src='http://1.bp.blogspot.com/--NjRjAGVfhs/T1KUfwmRMFI/AAAAAAAAPFU/RWHdawYYhjw/s1600/cooltext655930958.png';" onmouseover="this.src='http://4.bp.blogspot.com/-TEbfmwg8i9c/T1KUgbBVl8I/AAAAAAAAPFY/b6ceY6SYWbo/s1600/cooltext655930958MouseOver.png';" src="http://1.bp.blogspot.com/--NjRjAGVfhs/T1KUfwmRMFI/AAAAAAAAPFU/RWHdawYYhjw/s1600/cooltext655930958.png" /></a>

Ô màu đỏ : là link liên kết khi click chuột vào 
Ô màu xanh : là link ảnh ban đầu                      
Ô màu vàng : là link ảnh khi rê chuột vào        

Vậy là xong lưu lại và xem thành quả thôi

    Xem Demo  : Tại đây


Bài viết mới