Thư viện

Trải nghiệm

Thứ Năm, tháng 12 11, 2014

[Tips] - Thanh giới thiệu/Ghi chú trên cùng bằng CSS cho Blogspot Blogger

Hướng dẫn thủ thuật blog Thanh giới thiệu/Ghi chú trên cùng bằng CSS cho Blogspot Blogger tại Terocket. Thủ thuật blog tạo thanh trôi nổi trên cùng blogger

Chia sẻ:
Hôm nay Terocket sẽ giới thiệu đến các bạn thủ thuật blog có tên là [Tips] - Thanh giới thiệu/Ghi chú trên cùng bằng CSS cho Blogspot Blogger. Đây là một thủ thuật cơ bản và rất cần thiết cho nhiều bạn khi thiết kế blogger của mình, giúp website blog trông đẹp và chuyên nghiệp hơn.

[Tips] - Thanh giới thiệu/Ghi chú trên cùng bằng CSS cho Blogspot Blogger
Thủ thuật blog này sẽ tạo nên sức hút và sự nổi bật của thông tin bạn muốn truyền đạt đến người dùng đó!

Thủ thuật blog [Tips] - Thanh giới thiệu/Ghi chú trên cùng bằng CSS cho Blogspot Blogger này phù hợp với các bạn làm ghi chú, làm thông báo, giới thiệu hay quà tặng gì đó trên website mình mà cần mọi người chú ý, vì sự nổi bật của nó sẽ làm tất cả ấn tượng!

Live Demo

Lợi thế của thủ thuật này đó là làm hoàn toàn bằng CSS, rất nhẹ và chuẩn SEO. Tốc độ tải nhanh, không ảnh hưởng gì đến trải nghiệm người dùng khi truy cập vào website blog của chúng ta. Và giờ hãy cùng Terocket thực hiện thủ thuật này cả nhà nha!

Để thực hiện thủ thuật này, các bạn chỉ cần lấy đoạn mã code sau và thay đổi cho phù hợp, sau đó chèn nó vào một widget HTML/Javascript là xong!

Đầu tiên vào Blog Title → Layout → Add Widget → HTML/JavaScript → Chèn đoạn mã code sau vàoLưu lại.

<style type="text/css">
/* Tips For Blogger by Terocket.com */
#abt-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#abt-hots{background-color:#EB593C;border-bottom:2px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
#abt-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
#abt-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#abt-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.abt-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.abt-hotsblock{background-color:#CC5200;height:10px;width:8px}
.abt-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="abt-hotsmain" >
<center id="abt-hotsshow" onmouseup="document.getElementById('abt-hots').style.display='block'"><div class="abt-hotsblock"></div><div class="abt-hotsdownarrow"></div></center>
<div id="abt-hots" >
<center id="abt-hotshide" onmouseup="document.getElementById('abt-hots').style.display='none'"><div class="abt-hotsuparrow"></div><div class="abt-hotsblock"></div></center>
<center id="abt-hotsdata" >
Chào mừng các bạn đến với Terocket
</center>
</div>
</div>

Ghi chú: Các bạn thay Chào mừng các bạn đến với Terocket thành nội dung mà bạn muốn hiển thị trên tiện ích [Tips] - Thanh giới thiệu/Ghi chú trên cùng bằng CSS cho Blogspot Blogger này nhé!

Chúc các bạn thành công với thủ thuật blog cực kỳ thú vị và cần thiết này. Chúc may mắn và có được nhiều thông tin thú vị tại Terocket!
Trứng Vịt - Terocket

10 nhận xét:

  1. Anh Thành ơi khi cho index label thì xảy ra việc thẻ tiêu đề trùng lặp như thế này https://lh5.googleusercontent.com/-CiEowCCJvSI/VIxrFBA_31I/AAAAAAAAQpA/UHJh_vG10Us/w953-h180-no/tieu-de-trung-lap.JPG. Có cách nào khắc phục ko a? Thank a!

    Trả lờiXóa
    Trả lời
    1. Có nhưng cần thay đổi lại thuật toán của Script, bạn nên sử dụng thủ thuật khác nhé!

      Xóa
  2. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  3. bạn xem comments mình bị lỗi gì mà mình trả lời nó lại gửi vào mail của mình mà không gửi vào mail người nhận
    blog:age88.blogspot.com

    Trả lờiXóa
    Trả lời
    1. cái này là do Feed đó bạn!

      Xóa
    2. bạn gửi thư cho mình ,mình cũng có nhận được ở gmail đâu nhỉ.Vào đây mới thấy hồi âm là sao.

      Xóa
  4. cho mình hỏi : ví dụ mình mún đặt 1 code trong bài viết thì mình làm sao cho nó hiện ra khi xem bài viết vậy?(mình viết hướng dẫn có kèm code nhưng khi xem bài viết thì nó hok thấy j hết)

    Trả lờiXóa
  5. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  6. mình tạo cái bài viết liên quan cho bloger mà làm mãi ko được , bại có thể giúp mình được ko

    Trả lờiXóa
  7. http://www.upsieutoc.com/image/YbZl
    add cho mình hỏi cách khắc phục lỗi này với .....thanks add nhìu

    Trả lờiXóa