Thư viện

Trải nghiệm

Thứ Tư, tháng 11 19, 2014

[Tips] - Thêm huy hiệu góc trên phải cho Widget Blogspot Blogger

Hướng dẫn thủ thuật blog Thêm huy hiệu góc trên phải cho Widget Blogspot Blogger cực kỳ thú vị cho BLogger blogspot nè cả nhà!

Chia sẻ:
[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

9 nhận xét:

  1. bạn An cho mình hỏi, khi thêm cái huy hiệu này vào thì blog xuất hiện cái thanh điều hướng ngang bên dưới. có cách nào vừa thêm vào mà cái thanh ngang dưới không xuất hiện không? (cái thanh ở hình dưới)
    http://1.bp.blogspot.com/-FBvuln7F32k/VGwdHX6-JlI/AAAAAAAAAHA/pDk2unKDw3M/s1600/ask.png

    ps: cái thanh đó cũng không ảnh hưởng đến blog, nhưng thấy hơi "vướng". :D
    Thanks,

    Trả lờiXóa
    Trả lời
    1. Ok, cái này là do nó rộng hơn màn hình nên trình duyệt nó cho cái thành trượt đó xuất hiện đó. Để mình chỉnh lại!

      Xóa
    2. Ok, đã xử lý vấn đề nha :D

      Xóa
  2. Mình add vào Widget bản đồ - nhưng lại không xuất hiện ở Widget bản đồ, lại xuất hiện ở Widget box hỗ trợ . Bạn vào xem hình ở link: http://3.bp.blogspot.com/-gog00MW06x0/VH6BX_eSVaI/AAAAAAAAFSg/hLcP0IaQ0ME/s1600/untitled.PNG
    Cảm ơn bạn

    Trả lờiXóa
  3. admin oi cho minh hoi cai minh dang lam 1 blogger ve phim minh lam the nao de cho huy hieu vao hinh cua moi bai dang
    http://ngocuongphimhd.blogspot.com/ giup minh ha

    Trả lờiXóa
  4. Very nice, thank
    http://xempfaucet.blogspot.com

    Trả lờiXóa
  5. Blog của mình thiết kế có được không? Các bạn cho ý kiến nhé: http://vietnamesebillionaire.blogspot.com/. Cảm ơn các bạn nhiều nhé!

    Trả lờiXóa