Thứ Ba, 9 tháng 10, 2012

Tạo bảng thông báo cho Blog


Cách thực hiện:
1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Mở rộng mẫu tiện ích
4. Chèn script
Bước 1: Yêu cầu phải có jQuery. (Có rồi thì bỏ qua)
- Tìm thẻ <head>
- Thêm vào dưới nó đoạn code sau:

<script src='http://kenhdaihoc.com/blogger/jquery.min1.4.3.js' type='text/javascript'/>

Bước 2: Tìm thẻ </body>
Chèn đoạn code sau vào trên thẻ đóng:

<!-- Khung thông báo cho blog -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/*Khung thông báo*/
.notification{
    height:70px;
    width:500px;
    display:block;
    position:fixed;
/*Vị trí của khung thông báo trên blog*/
    bottom:10px;
    left:10px;
/*Taọ bóng và bo góc*/
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
/*Hiệu ứng bóng đổ*/
   -moz-box-shadow:2px 2px 2px #cfcfcf;
   -webkit-box-shadow:2px 2px 4px #cfcfcf;
   box-shadow:2px 2px 2px #cfcfcf
}

/*Dấu X đóng khung thông báo*/
.notification span{
   background: url(https://lh4.googleusercontent.com/_tzQFL5LBF9Y/
TbaN53kyLUI/AAAAAAAAAus/2uenCm_n_EU/Close_2.png) no-repeat right top;
   cursor:pointer;
   display:block;
   width:48px;
   height:48px;
   position:absolute;
/*Vị trí dấu X*/
   top:-20px;
   right:-25px
}

/*Màu chữ, font, canh lề trong khung thông báo*/
.notification p{
   width:400px;
   font-family:Arial,Helvetica,sans-serif;
   color:#323232;
   font-weight:bold;
   font-size:14px;
   line-height:21px;
   text-align:left;
   float:right;
   margin:10px 15px 0 0;
   margin-top:15px;
   text-shadow:0 0 1px #f9f9f9 /*for lt IE8*/padding:0;/* TEXT SHADOW */
}

/*Viền khung thông báo*/
.warning{
   border-top:1px solid #fefbcd;
   border-bottom:1px solid #e6e837;
/*Nền khung kiểu Gradients*/
   background:#feffb1;
   background:-moz-linear-gradient(top,#feffb1,#f0f17f);
   background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))
}

/*Hình Waring*/
.warning:before{
   content: url(https://lh6.googleusercontent.com/_tzQFL5LBF9Y/TbaRn8k0uII/
AAAAAAAAAuw/LBXwHvumjcc/Warning.png);
   float:left;
   margin:0px 10px 0 0px
}

/*Chữ Warning*/
.warning strong{
   color:#e5ac00;
   margin-right:15px
}

</style>
<script type='text/javascript'>
$(document).ready(function(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'>
<span/>
<p>
<strong>Lời nhắn từ blog!</strong>CHÀO MỪNG BẠN ĐẾN VỚI BLOG CỦA MÌNH!!! (Click vào dấu X để bỏ thông báo này)</p>
</div>
</b:if>
Bước 3: Save Template (Lưu mẫu)