Hướng dẫn thêm widget Label vào menu sử dụng button click

Việc thêm widget Label có nhiều ưu điểm hơn so với thêm link từng chuyên mục trên thanh menu vì nó đã tự động lấy chuyên mục khi chúng ta viết bài thêm nhãn mới, một ưu điểm nữa là chúng ta không cần chỉnh reponsive theo kích thước màn hình và hiệu ứng ẩn hiện widget cũng khá đẹp.

Bài này mình trình bày sơ qua về cách thêm widget Label vào menu sử dụng button click ẩn hiện, các bạn tham khảo nếu thấy phù hợp thì thêm vào Blog mình

Các bài viết trong chuyên mục Thiết kế blogspot thì mình cũng trình bày cách thêm widget, mình nhắc lại sơ qua để thêm được widget bắt buộc chúng ta phải có vùng chứa b:widget hay còn gọi là b:section. Mình lấy ví dụ:

Copy


<header id='backer'> // thanh menu

  <div class='main-container'>

    <b:section id='menu' name='Menu' showaddelement='true'>

      // Vùng chứa widget

    </b:section>

  </div>

</header>

Giả sử khi bạn thêm widget Label thành như sau:

Copy


<header id='backer'> // thanh menu

  <div class='main-container'>

    <b:section id='menu' name='Menu' showaddelement='true'>

      <b:widget id='Label1' locked='true' title='Label' type='Label' version='2' visible='true'>

        <b:widget-settings>...</b:widget-settings>

        <b:includable id='main' var='this'>...</b:includable>

        <b:includable id='cloud'>...</b:includable>

        <b:includable id='content'>...</b:includable>

        <b:includable id='list'>...</b:includable>

      </b:widget>

    </b:section>

  </div>

</header>

Bây giờ bạn sửa nội dung lại trong các thẻ tag <b:includable id='main' var='this'>, <b:includable id='content'> và <b:includable id='list'> của widget lại như sau:

Trong thẻ tag b:includable id='main' var='this'> bạn thay nội dung bên trong thành:

Copy


<button class='open'><svg><use xlink:href='/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg></button>

<button class='close hidden'><svg><use xlink:href='/responsive/sprite_v1_6.css.svg#ic_close_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg></button>

<b:include name='content'/>

Trong thẻ <b:includable id='content'> bạn sửa nội dung bên trong thành:

Copy


<ul class='invisible'>

  <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>

  <b:include cond='data:this.display == &quot;list&quot;' name='list'/>

  <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>

 </ul>

Trong thẻ <b:includable id='list'> bạn sửa nội dung bên trong thành:

Copy


<li>

  <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'>

    <svg viewBox='0 0 48 48'>

      <path d='M20 40V28h8v12h10V24h6L24 6 4 24h6v16z'/>

    </svg>

    <data:messages.home/>

  </a>

</li>

<li>

  <a class='label-name' href='/search' title='Tất cả'>

    <svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>

      <path d='M8 12H4v28c0 2.21 1.79 4 4 4h28v-4H8V12zm32-8H16c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zm-2 18H18v-4h20v4zm-8 8H18v-4h12v4zm8-16H18v-4h20v4z'/>

    </svg>

    Tất cả

    <span class='label-count total_posts'/>

  </a>

</li>

<b:loop values='data:labels' var='label'>

  <li>

    <a class='label-name' expr:href='data:label.url' expr:title='data:label.name'>

      <svg viewBox='0 0 48 48'>

        <path d='M42.82 23.16L24.83 5.17C24.1 4.45 23.1 4 22 4H8C5.79 4 4 5.79 4 8v14c0 1.11.45 2.11 1.18 2.83l18 18C23.9 43.55 24.9 44 26 44c1.1 0 2.11-.45 2.83-1.17l14-14C43.55 28.1 44 27.1 44 26c0-1.11-.45-2.11-1.18-2.84zM11 14c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/>

      </svg>

      <data:label.name/>

      <b:if cond='data:this.showFreqNumbers'>

        <span class='label-count'>

          <data:label.count/>

        </span>

      </b:if>

    </a>

  </li>

</b:loop>

<li>

  <a href='https://plus.google.com/' target='_blank' title='Hồ sơ'>

    <svg viewBox='0 0 24 24'>

      <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/>

    </svg>

    Hồ sơ       

  </a>

</li>

<li>

  <a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Cộng đồng'>

    <svg viewBox='0 0 48 48'>

      <path d='M18 24c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm10-6c0-2.21-1.79-4-4-4s-4 1.79-4 4 1.79 4 4 4 4-1.79 4-4zM24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16zm6-16c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z'/>

    </svg>

    Cộng đồng       

  </a>

</li>

<li>

  <a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Liên hệ'>

    <svg viewBox='0 0 24 24'>

      <path d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z'/>

    </svg>

    Liên hệ       

  </a>

</li>

Khi thay xong bạn lưu template lại tiếp tục thêm css trước ]]></b:skin>

Copy


.Label {

  display:inline-block;

  float:left;

  height:50px;

  margin-right:20px;

}

.Label button {

  background:transparent;

  border:none;

  cursor:pointer;

  padding:8px;

  margin:5px 0 5px -8px;

  outline:none;

}

.Label button:hover {

  background:rgb(230,230,230);

  border-radius:100%;

}

.Label .list-label-widget-content {

  position:fixed;

  top:50px;

  bottom:0;

  left:0;

  right:auto;

  min-height:100%;

  overflow-y:auto;

  background:#fafafa;

  z-index:9;

  line-height:20px;

  padding:0;

  width:100%;

  max-width:284px;

  box-shadow:0 1px 3px rgba(0,0,0,0.1);

  -webkit-transition-property:-webkit-transform;

  transition-property:-webkit-transform;

  transition-property:transform;

  transition-property:transform,-webkit-transform;

  -webkit-transition-duration:.3s;

  transition-duration:.3s;

  -webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);

  transition-timing-function:cubic-bezier(0,0,0.2,1);

}

.Label .list-label-widget-content.invisible {

  -webkit-transition-timing-function:cubic-bezier(0.4,0,0.6,1);

  transition-timing-function:cubic-bezier(0.4,0,0.6,1);

  -webkit-transform:translateX(-284px);

  -ms-transform:translateX(-284px);

  transform:translateX(-284px);

}

.Label .list-label-widget-content li {

  padding:0;

  display:block;

  position:relative;

  list-style:none;

  font-size:15px;

  font-weight:500;

}

.Label .list-label-widget-content li:first-child {

  background:rgb(230,230,230);

}

.Label .list-label-widget-content li a {

  display:block;

  padding:10px 15px;

  white-space:nowrap;

  overflow:hidden;

  color:#333333;

}

.Label .list-label-widget-content li:hover {

  background:rgb(230,230,230);

  display:block;

  light-height:20px;

}

.Label .list-label-widget-content li.search:hover {

  background:none;

}

.Label .list-label-widget-content::-webkit-scrollbar-track {

  border-radius:10px;

  background-color:#f0f1f5;

}

.Label .list-label-widget-content::-webkit-scrollbar {

  width:8px;

  background-color:#F5F5F5;

}

.Label .list-label-widget-content::-webkit-scrollbar-thumb {

  border-radius:10px;

  background-color:hsla(0,0%,53.3%,.4);

}

.Label span.label-count {

  float: right;

  line-height:20px;

}

#backer .label-count:before {

  content:'(';

}

.Label .label-count:after {

  content:')';

}

.Label .list-label-widget-content svg {

  height:21px;

  width:21px;

  margin-right:20px;

}

.overlay {

    background-color: #000;

    opacity: 0.6;

    height: 100vh;

    left: 0;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 8;

}

hidden {

    display: none;

}

Bước tiếp theo thêm js tạo button click ẩn hiện chèn trước </body>

Copy


<script>//<![CDATA[

$(window).on('load', function() {

  $('.Label button.open').click(function(e) {

    e.stopPropagation()

    $('.overlay').removeClass('hidden')

    $('.Label .list-label-widget-content').removeClass('invisible')

    $('.Label button.open').addClass('hidden')

    $('.Label button.close').removeClass('hidden')

  })

  $('.Label .list-label-widget-content').click(function(e) {

    e.stopPropagation()

  })

  $('html').click(function() {

    $('.Label .list-label-widget-content').addClass('invisible')

    $('.Label button.open').removeClass('hidden')

    $('.Label button.close,.overlay').addClass('hidden')

  })

  $.ajax({

    url: '/feeds/posts/default?alt=json-in-script',

    type: 'get',

    dataType: 'jsonp',

    success: function(data) {

      var totalItems = data.feed.openSearch$totalResults.$t

      $('.total_posts').html(totalItems);

    }

  })

})

//]]></script>

Bạn cũng thêm đoạn html sau ngay sau đoạn script vừa thêm hay trước </body>

Copy


<div class='overlay hidden'></div>

Bước cuối cùng kiểm tra xem trong template đã có link thư viện jquery.js chưa, nếu chưa có thêm link sau ngay trước thẻ </head>

Copy


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Chấm hết bài!!!

Nội dung chính

Chuyên mục

Hướng dẫn thêm widget Label vào menu sử dụng button click

Tác giả

Bài đăng phổ biến

Những phương pháp hay nhất giúp tối ưu Windows 10

Hướng dẫn thiết kế Bố cục các tiện ích (widget) trong Blogspot

Các bài đăng gần đây

Chuyên mục

Hướng dẫn thêm widget Label vào menu sử dụng button click

Bài cùng chuyên mục

Tác giả

Bài đăng phổ biến

Những phương pháp hay nhất giúp tối ưu Windows 10

Hướng dẫn thiết kế Bố cục các tiện ích (widget) trong Blogspot

Các bài đăng gần đây