Home Posts filed under Javascript

Cách Sắp Xếp Label Trong Blogspot Theo Từng Loại

Nguyễn Đăng Hậu 12/03/2016 2 Comments

Như các bạn đã biết thì hiện nay có rất nhiều bạn làm site phim từ blogspot mặc dù Blogger không cung cấp nhiều thứ cho dân blogspot chúng ta. Nhưng chúng ta muốn kiếm tiền thì chúng ta phải vươn lên. Song làm site phim từ blogger vẫn rất hạn chế. Một trong những hạn chế đó là khà năng phân loại Nhãn theo từng loại. Ví dụ sau đây là sự khác nhau giữa một trang phim đúng nghĩa với trang phim từ blogspot

hm. Nhìn bài viết giới thiệu các bạn muốn xem phim đó nữa không?...
Chắc bạn cũng để ý việc để nhãn cho blogspot khá là khó, lại khó nữa sao cho nó hiện đúng nhãn mình cần, vậy phải làm sao? Hôm nay mình sẽ hướng dẫn các bạn làm điều đó. Tuy nhiên đây chỉ là mình tự làm và có lẽ sẽ không chuyện nghiệp, tuy nhiên cũng giải quyết một số vấn đề.

Thực Hiện

1 Đầu tiên các bạn tạo thể chứa các nhãn đó như sau:

HTML<li><b>Genre: </b><div class='info'>...</div></li>
<li><b>Country: </b><div class='info'>...</div></li>
 <li><b>Studio: </b><div class='info'>...</div></li>

Vậy là xong cái sườn. Bây giờ để hiện các nhãn trong bài viết đó đã gán cho nó khi viết bài: các bạn dùng vòng lặp trong blogspot để lấy nhãn ra bằng code sau:

HTML<b:loop values='data:post.labels' var='label'>
<a class='genre' expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>

3. Xong bây giờ ghép hai cái trên thành một như sau:

HTML<li><b>Genre: </b><div class='info'>
<b:loop values='data:post.labels' var='label'>
<a class='genre' expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop></div></li>
 <li><b>Country: </b><div class='info'><b:loop values='data:post.labels' var='label'>
<a class='country' expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop></div></li>
 <li><b>Studio: </b><div class='info'><b:loop values='data:post.labels' var='label'>
<a class='studio' expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop></div></li>

4. bây giờ tất cả các nhãn sẽ hiện ra ở cái Loại mà bạn để. Nhưng cái chúng ta cần là những nhãn theo thể loại của nó. Vậy nên ta sẽ dùng JS để ẩn các nhãn ko cần thiết

JSvar genre = document.getElementsByClassName("genre");
var options = ['Label1', 'Label2', 'label3'];
for(var i = 0; i<genre.length; ++i){
   var text = genre[i].innerHTML;
   if(options.indexOf(text) !== -1){
      genre[i].style.display = "none";
   }
}

5.Trên cái vòng lặp các bạn có để ý cái class='..' không ạ! (ko phải cái class='info' đâu nha.)đó chính là thứ quan quian trọng trong thủ thuật hôm nay.
6. Bây giờ mình sẽ ví dụ một cái nha.
Giả sử chúng ta để nhãn cho bài viết là Label1, Label2, Label3, Label4. Nhưng chúng ta muốn hiện thị nhãn Label4 ở Loại tên là Genre: vậy thì ngay cái vòng lặp đặt tên class là genre luôn. Sau đó chúng ta sẽ áp dụng code js trên để mà ẩn cái Label1, Label2 và Label3 đi, chỉ còn lại là Label4.,
Các bạn đề ý trong code JS mà mình cung cấp có dòng "var options =....." trong đó chính là các nhãn sẽ ẩn đi.
7. Chúng ta tiếp tục muốn hiện nhãn ở Country thì sao. Mình cũng làm như trên, đặt tên class="country". Sau đó ở code JS thay nhãn cần ẫn vào trong đó.

Chú ý: trong code js các bạn phải thay tên biến đi bởi. Thay cái genre thành country rồi thay cái "option" thành "list" hay gì đó cho các bạn dễ nhớ là được.

8. Lưu mẫu lại là xong.

Lời Kết

Chúc các bạn thành công.

Tạo Thanh Tiến Trình Khi Đọc Bài Viết Trong Blogspot