• 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
    Lazyload Jquery làm mượt ảnh và ảnh sẽ load nhanh hơn
    Giới thiệu:  Kéo tới đâu ảnh mới bắt đầu load tới đó, giảm thời gian tải ảnh. Mặc định blog khi load, sẽ load tất cả các ảnh và thành phần c...
  • Popular Posts
    Tổng hợp Thủ thuật blogspot
    Để Blog của bạn đẹp hơn và chuyên nghiệp hơn mình xin giới thiệu các bạn 1 kho theme  cũng như thủ thuật mà mình sưu tầm từ khắp nơi... các ...
  • 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...
  • Code chèn nền Flash (hoa rơi, tuyết rơi,…) cho blogspot
    Giới thiệu:  Với đoạn code này, blog bạn sẽ có thêm một lớp nền Flash phủ lên bề mặt blog, hoặc nằm ẩn dưới nền blog chính. Chức năng chủ yế...
  • Tổng hợp Thủ thuật máy tính
    Tất cã thủ thuật được tổng hợp và đăng tại đây Thủ thuật Win XP Thủ thuật Win 7 , 8 Thủ thuật Laptop
  • 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...
  • Hướng dẩn Tạo khung thông báo cho blog
    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 domai...
  • 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....
Copyright Mas Bintang | SJUTA IT