Hướng dẫn tạo tab thông báo cho blogger

Hôm nay mình xin chia sẽ cho các bạn một tiện ích cực hay ^^. Cái này mình biết lâu rồi nhưng mà không có thời gian chia sẽ, may hôm nay rảnh nên viết bài chia sẽ cho các bạn luôn :D
Chúng ta bắt đầu nhé :D

Bước 1: Đầu tiên các bạn thêm đoạn code CSS này vào đâu trong blog cũng được :D. Hoặc có thể thêm vào trước thẻ </body>

<style type='text/css'>#info-oktri {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#info-oktri{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-oktri:hover{width:400px;opacity:1.0;margin-left:0;}.Oktriinbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.Oktriinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.Oktriinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.oktri15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Oktri2 ul.bom {margin: 0; padding: 0;}.Oktriinbox2 li {margin-left:20px;}.Oktriinbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Oktriinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Oktriinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Oktritouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.Oktritouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>

Bước 2: Các bạn thêm đoạn code HTML này vào đâu cũng được như bước 1. Nhưng theo mình nghĩ các bạn có thể thêm vào như thế này cho đơn giản đó là

BỐ CỤC -> THÊM TIỆN ÍCH -> HTML/Javascript

Làm như thế sẽ nhanh hơn và để các bạn có thể thoải mái edit mục cần edit

<div id='info-oktri'><span class='Oktritouch'>INFO</span>
<div class='Oktriinbox'><div class='Oktriinbox2 oktri15'>
<h2>BomKhung.Info Tab</h2>
<p style='text-align:justify'>- Never frown, even when you are sad <br/>
- Because you never know who is falling in love with your smile. <br/>
- Đừng bao giờ tiết kiệm nụ cười ngay cả khi bạn buồn&#9829; <br/>
- Vì không bao giờ bạn biết được, có thể có ai đó sẽ yêu bạn vì nụ cười đó. <br/>
</p>
<h2>Info</h2>
<img height='120x' src='http://thuvien.kyna.vn/wp-content/uploads/2014/01/lam-chu-cam-xuc.jpg' width='250px'/>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbomkhungblogger&width=272&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false&appId=552394548138821' style='border:none; overflow:hidden; width:272px; height:62px;'></iframe>
<p style='text-align:justify'>Cảm xúc thật. Và Tình Yêu Anh Dành Cho Em Cũng Thật</p>
</div>
</div></div>

Chúc các bạn thành công :)

DEMO Ở PHÍA BÊN TAY TRÁI

INFO

BomKhung.Info Tab

- Never frown, even when you are sad

- Because you never know who is falling in love with your smile.

- Đừng bao giờ tiết kiệm nụ cười ngay cả khi bạn buồn♥

- Vì không bao giờ bạn biết được, có thể có ai đó sẽ yêu bạn vì nụ cười đó.

Info

Cảm xúc thật. Và Tình Yêu Anh Dành Cho Em Cũng Thật