• Home
  • Contact

Kênh tư vấn

  • Beranda
  • Profil
  • Jurnal
    • 2000
    • 2001
    • 2002
      • 21 April
      • 22 April
      • 23 April
        • Senin
        • Selasa
        • Rabu
        • Kamis
      • 24 April
      • 25 April
    • 2003
    • 2004
  • Komentar
  • Kontak
Beranda » Thủ thuật Blog » Hướng dẩn Tạo khung thông báo cho blog

Hướng dẩn Tạo khung thông báo cho blog

Untitled


Giới thiệu: Khi truy nhập vào blog, một hộp thoại thông báo sẽ xuất hiện. Có thể là thông báo về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...) 

Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn. 

Bạn có thể đặt khung ở vị trí bất kỳ trong blog sao cho dễ bắt mắt nhất. 


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 ô: Expand Widget Templates (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ẻ đóng </body>


- Thêm vào trước nó đoạn code sau:

<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPviB4wNixCzYu1h6edkxjcpPUr-t_fu5tYWA8FKXMD6NAu_C1Kwt6aEgPvCbsHBY9Rl6kLTR3fYy5uhCUBZ7w9D3cT3T47-E2sgRe22D2coGMKq76g8l-RaZ3t_ixF9Xu7b-PAZHXEX4/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcdRqiSUwUfopqJL1_BvyQVLiSxZcB8XaKM_gqali_mmxyvtYqatgcJhXEI4eVBBcewng70N4VHBbCco3fQDmztbsi1Uw7rAOOywzkgYaiygp38zpeSr76HMeFgH4fNG3Hujmy2G9r4qs/);
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)

Theo: http://kenhdaihoc.com/forum/showthread.php?t=2086
Unknown
1 Comment
Thủ thuật Blog
Thứ Năm, 8 tháng 12, 2011
Tweet
Hướng dẩn Tạo khung thông báo cho blog Kênh tư vấn
Published: 2011-12-08T19:54:00-08:00
Title:Hướng dẩn Tạo khung thông báo cho blog
Rating: 5 On 22 reviews

Related Articles

1 nhận xét :

  1. Anonymouslúc 21:29 8 tháng 12, 2011

    Thank for share

    Trả lờiXóa
    Trả lời
      Trả lời
Thêm nhận xét
Tải thêm...

Newer Older Home

Entri Populer

  • Popular Posts
    Thêm,sửa,xóa,chấp nhận,hủy,thoát trong C# có CSDL
    ĐỀ BÀI Người ta muốn ứng dụng tin học để quản lý nhân sự của 1 doanh nghiệp. Là một lập trình viên, anh (chị) hãy thực hiện các yêu cầu sau ...
  • Popular Posts
    Bản quyền miễn phí Full Uninstall 2.10 trị giá $29,95
    Một vấn đề phổ biến chúng ta thường gặp phải khi gỡ bỏ phần mềm đó là sự tồn tại không cần thiết của các tập tin rác, các mục Registry,… Thậ...
  • Popular Posts
    Tạo dáng cho trỏ chuột với hình ảnh bất kỳcho blogspot
    Giới thiệu: Hiệu ứng JavaScript này cho phép bạn tạo dáng cho con trỏ chuột trên trang web. Điểm đặc biệt của là nó cho phép bạn sử dụng hìn...
  • Sửa file hosts để vào Facebook
    Sửa file hosts để vào Facebook Tìm kiếm mới nhất: cách vào facebook 2013 cachvaofacebook com vào facebook 2013 10 cach vao facebook 2013 cac...
  • Popular Posts
    Hot girl xinh đẹp nhất Sài thành
    Hotgirl Tâm Tít, hotgirl Midu, hotgirl Khả Ngân, hotgirl Sam, hotgirl Kelly là những hot girl xinh đẹp và tài năng trong làng showbiz wWw....
  • Phân tích đoạn thơ “Nhớ khi giặc đánh giặc lùng.....Lạng nhớ sang Nhị Hà” trong bài thơ Việt Bắc của Tố Hữu
    Bài viết hay về Nhà thơ Tố Hữu +++++++++++++++++++++ Tìm hiểu về tác giả Tố Hữu Tìm hiểu bài " Việt Bắc" của Tố Hữu Bức tranh Tứ B...
  • Popular Posts
    Đáp án đề thi Cao đẳng môn Địa khối C năm 2012
    Đáp án đề thi Đại Học - Cao Đẳng năm 2012 đã được cập nhật nhanh nhất tại đây  Đáp án đề thi Cao đẳng môn Văn khối C năm 2012 Đáp án đề thi ...
  • Bộ GD-ĐT công bố toàn cảnh đổi mới tuyển sinh năm 2012
    Chiều nay 24/2, Bộ GD-ĐT chính thức công bố những sửa đổi, bổ sung quy chế tuyển sinh hệ chính quy năm 2012. Theo đó, hàng loạt đổi mới đều ...
  • Những vấn đề cơ bản trong bài thơ "Việt Bắc" ( Tố Hữu)
    Những vấn đề cơ bản trong bài thơ "Việt Bắc" ( Tố Hữu) Bài viết hay về Nhà thơ Tố Hữu +++++++++++++++++++++ Tìm hiểu về tác giả Tố...
  • Popular Posts
    Đáp án đề thi đại học môn Toán khối A1 năm 2012
    Đáp án đề thi Đại Học - Cao Đẳng năm 2012 đã được cập nhật nhanh nhất tại đây  Đáp án đề thi đại học môn Toán khối A1 năm 2012  Đáp án đề th...
Copyright Mas Bintang | SJUTA IT