Tùy biến Label Widget cho blogspot v3

Hôm nay mình sẽ giới thiệu thêm cho các bạn một cách tùy biến mới dành cho widget label được phát triển bởi tác giả premium-stuff-guru. VỚi thủ thuật này các label sẽ được đặt trong một khung và số bài đăng của mỗi label sẽ ản đi chỉ hiện thị khi di chuột vào. Điều đặc biệt của tiện ích này là chỉ sử dụng các hiệu ứng từ CSS3 nên không ảnh hưởng đến tốc độ load như các hiệu ứng Jquery.

☼ Bước 1: Thêm tiện ích label của blogger.

Trước khi bắt đầu hãy chắc chắn rằng Blog của bạn có Widget Label và đã thiết lập chọn với Cloud.

1.1- Đăng nhập (login) vào Blog

1.2- Vào Bố cục (Layout)

1.3- Chọn thêm tiện ích (Add widget)=> Thêm tiện ích Nhãn (Label)

- Nếu blog của bạn đã thêm tiện ích này rùi thì có thể bỏ qua bước 3 này.

Tùy biến label cloud với CSS cho blogger

1.4- Bấm vào chỉnh sửa (Edit) Widget Label vừa tạo (hoặc có sẵn) và cài đặt mục hiển thị là Cloud, Bỏ chọn ở mục Hiển thị số bài đăng theo nhãn, còn các mục khác tùy ý bạn:

5- Lưu cài đặt lại và tiếp tục bước 2.

¤ Bước 2: Tuyy biến tiện ích Label widget bằng CSS và XML.

2.1- Vào Mẫu (Template).

2.2- Chọn Chỉnh sử HTML (Edit HTML)
2.3- Bấm mục chuyển đến tiện ích (Mover to widget) => Chọn label mà bạn vừa thêm vào để chuyển đến đoạn code được tìm (trong ví dụ này của mình là tiện ích Label1).

Khi đó bạn sẽ được huyển đến đoạn code màu xanh như hình dưới:

- Nếu mở rộng ra nó xẽ có dạng như bên dưới:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <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>
</b:includable>
  </b:widget>

- Và thay thế nó thành đoạn code như bên dưới:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul class='tags'>
      <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/><span class='label-count' dir='ltr'>(<data:label.count/>)</span></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>
</b:includable>
  </b:widget>

2.3- Chọn một trong các mẫu bên dưới mà bạn thích sau đó dán trước thẻ ]]></b:skin>.
Style 1: Label style rose!

Ảnh minh họa:

.tags{zoom:1}
.tags:before,.tags:after{content:"";display:table}
.tags:after{clear:both}
.tags li{position:relative;float:left;margin:0 12px 8px 0}
.tags li:active{margin-top:1px;margin-bottom:7px}
.tags a,.tags span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tags a{height:26px;font-size:13px;color:#fff;background:#555;border:1px solid #000;border-right:0;padding:3px 8px}
.tags a:hover span{max-width:40px;padding:0 7px 0 6px}
.tags span{position:absolute;top:0;left:100%;z-index:2;overflow:hidden;max-width:0;height:26px;line-height:23px;opacity:.9;color:#fff;border-right:1px solid #bc1dd3;background:#bc1dd3;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;padding:0 0 0 2px}

Style 2: Label style Orange!
Ảnh minh họa:

.tags {
  zoom: 1;
}
.tags:before, .tags:after {
  content: "";
  display: table;
}
.tags:after {
  clear: both;
}
.tags li {
  position: relative;
  float: left;
  margin: 0 0 8px 12px;
}
.tags li:active {
  margin-top: 1px;
  margin-bottom: 7px;
}
.tags li:after {
  content: '';
  z-index: 3;
  position: absolute;
  top: 10px;
  right: -2px;
  width: 5px;
  height: 6px;
  opacity: .95;
  background: #eb6b22;
  border-radius: 3px 0 0 3px;
  -webkit-box-shadow: inset 1px 0 #99400e;
  box-shadow: inset 1px 0 #99400e;
}
.tags a, .tags span {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tags a {
  height: 26px;
  line-height: 23px;
  padding: 0 9px 0 8px;
  font-size: 12px;
  color: #555;
  text-shadow: 0 1px #fff;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #dadada #d2d2d2 #c5c5c5;
  border-radius: 3px 0 0 3px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f0f0f0));
  background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -ms-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: linear-gradient(top, #fcfcfc, #f0f0f0);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tags a:hover {
  text-decoration: none;
}
.tags a:hover span {
  padding: 0 7px 0 6px;
  max-width: 40px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.tags span {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  opacity: .95;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 1px solid;
  border-color: #d15813 #c85412 #bf5011;
  border-radius: 0 2px 2px 0;
  background-color: #eb6b22;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed7b39), color-stop(100%, #df5e14));
  background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -ms-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
  background-image: linear-gradient(top, #ed7b39, #df5e14);
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -ms-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
 
.green li:after {
  background: #65bb34;
  -webkit-box-shadow: inset 1px 0 #3a6b1e;
  box-shadow: inset 1px 0 #3a6b1e;
}
.green span {
  border-color: #549b2b #4f9329 #4b8b27;
  background-color: #65bb34;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #71ca3f), color-stop(100%, #5aa72e));
  background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -ms-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: linear-gradient(top, #71ca3f, #5aa72e);
}
 
.blue li:after {
  background: #56a3d5;
  -webkit-box-shadow: inset 1px 0 #276f9e;
  box-shadow: inset 1px 0 #276f9e;
}
.blue span {
  border-color: #3591cd #318cc7 #2f86be;
  background-color: #56a3d5;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6aaeda), color-stop(100%, #4298d0));
  background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -ms-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -o-linear-gradient(top, #6aaeda, #4298d0);
  background-image: linear-gradient(top, #6aaeda, #4298d0);
}

- Vẫn với đoạn CSS trên bạn có thể đổi màu xanh lá như bên dưới:

bằng cách tìm đoạn code:

<ul class='tags'>

và sửa thành:

<ul class='tags green'>

Style 3: Label style Orange 2!
Ảnh minh họa:

.tags{zoom:1}
.tags:before,.tags:after{content:"";display:table}
.tags:after{clear:both}
.tags li{position:relative;float:left;margin:0 12px 8px 0}
.tags li:active{margin-top:1px;margin-bottom:7px}
.tags li:after{content:'';z-index:3;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#da9c9c;border-radius:3px 0 0 3px}
.tags a,.tags span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tags a{height:26px;font-size:13px;color:#000;border-radius:5px 0 0 5px;background:#efece9;border:1px solid #fafafa;-webkit-box-shadow:0 0 3px rgba(0,0,0,.4);-moz-box-shadow:0 0 3px rgba(0,0,0,.4);box-shadow:0 0 3px rgba(0,0,0,.4);padding:3px 8px}
.tags a:hover span{max-width:40px;padding:0 7px 0 6px}
.tags span{position:absolute;top:0;left:100%;z-index:2;overflow:hidden;max-width:0;height:26px;line-height:23px;opacity:.95;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3);border:1px solid;border-radius:0 4px 4px 0;background:#da9c9c;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;border-color:#da9c9c;padding:0 0 0 2px}

Style 4: Label style Blue sky!
Ảnh minh họa:

.tags{zoom:1}
.tags:before,.tags:after{content:"";display:table}
.tags:after{clear:both}
.tags li{position:relative;float:left;margin:0 12px 8px 0}
.tags li:active{margin-top:1px;margin-bottom:7px}
.tags li:after{content:'';z-index:3;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#56a3d5;border-radius:3px 0 0 3px}
.tags a,.tags span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tags a{height:26px;padding:3px 8px;font-size:13px;color:#000;border-radius:5px 0 0 5px;background:#fafafa}
.tags a:hover span{padding:0 7px 0 6px;max-width:40px}
.tags span{position:absolute;top:0;left:100%;z-index:2;overflow:hidden;max-width:0;height:26px;line-height:23px;padding:0 0 0 2px;opacity:.95;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3);border:1px solid;border-radius:0 4px 4px 0;border-color:#3591cd #318cc7 #2f86be;background:#56a3d5;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out}

Chúc thành công!

Nhận xét

ADMINlúc 21:48:00 GMT+7 Thứ Bảy, 11 tháng 5, 2013
Nam ơi bạn có thể hướng dẫn mình tạo 1 cái popup giống như trang bạn đang ấy cho bên http://webdiemthi.vn/ đó. Khi ấn popup thì view vào trực tiếp trang đó ko pải trang namkna giống y như trang cậu đang làm ý. TKs
Trả lờiXóa
Trả lời
ADMINlúc 22:44:00 GMT+7 Thứ Bảy, 11 tháng 5, 2013
Tks nam nhé
Trả lờiXóa
Trả lời
Unknownlúc 07:30:00 GMT+7 Thứ Ba, 14 tháng 5, 2013
Namkna ơi cho mình hỏi.
Vd Mình lên google, tìm từ khoá "windows 8", kết quả hiện ra có tiêu đề bài viết và link của blog mình. Tuy nhiên khi mở link lên thì nó dẫn đến trang chủ chứ không mở ra trang bài viết.
Nhờ bạn chỉ giúp mình!
Trả lờiXóa
Trả lời
Unknownlúc 22:15:00 GMT+7 Thứ Tư, 15 tháng 5, 2013
Đoạn code này :

<script>
function popup() {
var url = "http://namkna.blogspot.com/";
window.open(url);
popWin = window.open(page,'popWin');
popWin.blur();
window.focus();
}
popup();
</script>

sẽ tạo một popup hiện sau trình duyệt. popup này sẽ tự động mở popup ngay khi độc giả truy cập trang mà chưa hề clik chuột. Và với các trình duyệt chưa phần mềm hoặc addon chặn popup nha.
Trả lờiXóa
Trả lời
Kelvin Dươnglúc 10:07:00 GMT+7 Thứ Năm, 16 tháng 5, 2013
À anh Namkna cho em hỏi ngu tí xíu ^^!

Cái cách anh làm đóng khung ▼

............................................
☼ Bước 1: Thêm tiện ích label của blogger.
............................................

Làm sao vậy anh? Thấy nhiều Blog trang trí vậy rất đẹp + dễ nhìn. Thanks anh. Chúc Blog anh phát triển :)
Trả lờiXóa
Trả lời
Hai Huynhlúc 09:17:00 GMT+7 Thứ Sáu, 7 tháng 6, 2013
964 Traffic Rank in VN. Blog của bạn rất khá!
Cảm ơn bạn đã chia sẽ nhiều cho cộng đồng blogger VN.
Cho toi chia sẻ các bạn Free tool này nhé!
Free RSS to Blogger
Trả lờiXóa
Trả lời
Lê Hạnhlúc 21:21:00 GMT+7 Thứ Ba, 11 tháng 6, 2013
Demo: Style 1 Style 2 Style 3 Style 4
Trả lờiXóa
Trả lời
Hai Huynhlúc 15:27:00 GMT+7 Thứ Ba, 18 tháng 6, 2013
Top post by label Widget

http://bloggertipsall.blogspot.com/2013/06/top-new-posts-by-category-by-label.html
Trả lờiXóa
Trả lời
Lê Tiến Nguyênlúc 09:36:00 GMT+7 Thứ Năm, 11 tháng 7, 2013
Style 2 B điều chỉnh lại các thông số top để hover đẹp:

.tags li:after {
content: '';
z-index: 3;
position: absolute;
top: 15px;
right: -2px;
width: 5px;
height: 6px;
opacity: .95;
background: #eb6b22;
border-radius: 3px 0 0 3px;
-webkit-box-shadow: inset 1px 0 #99400e;
box-shadow: inset 1px 0 #99400e;
}

.tags span {
position: absolute;
top: 8px;
left: 100%;
z-index: 2;
overflow: hidden;
max-width: 0;
height: 24px;
line-height: 21px;
padding: 0 0 0 2px;
opacity: .95;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border: 1px solid;
border-color: #d15813 #c85412 #bf5011;
border-radius: 0 2px 2px 0;
background-color: #eb6b22;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed7b39), color-stop(100%, #df5e14));
background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
background-image: -ms-linear-gradient(top, #ed7b39, #df5e14);
background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
background-image: linear-gradient(top, #ed7b39, #df5e14);
-webkit-transition-property: padding, max-width;
-moz-transition-property: padding, max-width;
-ms-transition-property: padding, max-width;
-o-transition-property: padding, max-width;
transition-property: padding, max-width;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}

Trả lờiXóa
Trả lời
DesignForMelúc 21:25:00 GMT+7 Thứ Tư, 15 tháng 1, 2014
Cho mình hỏi, mình làm được nhưng chữ màu trắng, làm sao để đổi màu nó ? :) http://i.upanh.com/vwzufy
Trả lờiXóa
Trả lời
Tâm Tâmlúc 16:57:00 GMT+7 Thứ Tư, 10 tháng 12, 2014
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóa
Trả lời
Tâm Tâmlúc 16:57:00 GMT+7 Thứ Tư, 10 tháng 12, 2014
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóa
Trả lời