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

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

Written By Unknown on Thursday, May 16, 2013 | May 16, 2013

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)

Post a Comment

Cảm ơn bạn đã ghé thăm Blog của mình!
Để nhận thông báo mới nhất về bài đăng bạn hãy tick vào ô vuông bên phải ("Thông báo cho tôi")
Cảm ơn bạn!

Bài đăng nổi bật

Xuất mô hình trong etabs ra file ảnh, worl để in làm đồ án

Xuất mô hình trong etabs ra file ảnh, worl để in làm đồ án   Khi làm đồ án bt1, bt2 đồ án tốt nghiệp ta cần sử dụng các mô hình trong etabs...

Bài đăng phổ biến

Comment mới nhất