[Tips] - Thêm huy hiệu góc trên phải cho Widget Blogspot Blogger
Một nút cực hay dành cho blog của bạn đúng không nào, giúp đánh giấu nội dung rất tốt đó!

Hôm nay Terocket sẽ hướng dẫn các bạn một thủ thuật đơn giản, nhưng vô cùng tinh tế. Đó là thủ thuật blog Thêm huy hiệu góc trên phải cho Widget Blogspot Blogger. Đây là thủ thuật dành cho các bạn muốn đặt tên cho widget hay đánh dấu widget thuộc chuyên mục nào. Đây là một cách làm rất ấn tượng, giúp nội dung trong widget của bạn nổi bật hơn các phần còn lại.

Live Demo trên góc phải nhé

Thủ thuật Thêm huy hiệu DEMO góc trên phải cho Widget Blogspot Blogger này giống như việc bạn thêm một cái khăn quàng xanh cho widget của mình vậy, có thể gọi đó là ruy băng nơ. Rất thú vị đúng không nào! Và giờ thì cùng Terocket chúng tớ hướng dẫn cách làm thủ thuật này nha!

Để thêm huy hiệu cho widget nào đó, hãy chèn đoạn mã code sau vào trong HTML của Widget HTML/Javascript nha.

Trước tiên hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript và copy đoạn mã code sau vào trong HTML và lưu lại.

<div class="ribbon-wrapper-green"><div class="ribbon-green">DEMO</div></div>
<style>
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: 0px;
  z-index: 99999;
}
.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
</style>

Ghi chú: Hãy thay dòng DEMO thành chữ mà bạn muốn xuất hiện trên widget nhé!
Vậy là đã xong thủ thuật [Tips] - Thêm huy hiệu góc trên phải cho Widget Blogspot Blogger này rồi. Một phụ hiện rất đẹp cho blog của bạn đúng không! Chúc thành công nhé!
An Thành - Terocket
DEMO