Ẩn hiện Blogger Label với JQuery

Show hide Blogger Label with JQuery

Đây là thủ thuật giúp làm đẹp cho Widget Label với thiết kế Flat UI hiện đại sẽ giúp tiết kiệm khá nhiều không gian trên website của bạn đấy.

Cách thực hiện

1Vào Bố cục >> Thêm Tiện ích >> Nhãn và chọn như hình bên dưới

2Vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

.Label .on{background-color:#48C9B0}
.Label h2{position:relative;padding:10px 39px 10px 15px;font-size:15px;line-height:1.4;border-radius:4px;color:#FFF;background-color:#1ABC9C;display:block;cursor:pointer;margin:10px 0}
.Label h2:after{content:"";border-width:8px;border-color:#fff transparent transparent;border-style:solid;position:absolute;right:15px;top:17px}
h2.on:after{border-color:transparent transparent #fff;top:8px}
.Label .count{display:block;float:right;min-width:25px;text-align:center;border-radius:2px;background-color:#D6DBDF}
.Label li:hover .count,.actived .count{color:#FFF;background-color:#1ABC9C}
.list-label-widget-content{border-radius:4px;background-color:#F3F4F5}
.Label ul,.Label li{padding:0;margin:0;list-style:outside none none}
.Label ul{border-radius:4px;overflow:hidden}
.Label li a{padding:10px;color:rgba(52,73,94,0.85);display:block;font-size:14px;text-decoration:none}
.Label li a:hover,.Label .actived{color:inherit;background-color:#E1E4E7;text-decoration:none}

3Nhấn Ctrl + F tìm kiếm đoạn code title='Label' type='Label', cuộn chuột xuống 1 chút bạn sẽ thấy đoạn code bên dưới.

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>

Thay thế toàn bộ đoạn code bên trên bằng đoạn code

<div expr:class='&quot;widget-content hidden &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <a class='actived' expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'>
              <data:label.name/>
                <b:if cond='data:showFreqNumbers'>
                <span class='count' dir='ltr'><data:label.count/></span>
              </b:if>
            </a>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'>
              <data:label.name/>
                <b:if cond='data:showFreqNumbers'>
                <span class='count' dir='ltr'><data:label.count/></span>
              </b:if>
            </a>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>

4Cuối cùng bạn hãy dán đoạn script dưới đây vào trước thẻ </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $('.Label h2').on("click", function (t) {
        $(this).toggleClass("on").next().slideToggle(200);
        t.stopPropagation()
    });
    $(document.body).on("click", function () {
        $('.Label').find(".on").removeClass("on").next().slideUp(200);
    });
});
//]]>
</script>

Chỉnh sửa: Bạn có thể bỏ thư viện JQuery bên dưới nếu như website bạn đã có rồi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by obesitystrike/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm