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

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.

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àovà Lư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!

Nguồn Trứng Vịt - Terocket