[ Blogger ] Hướng Dẫn Cách Tạo Khung Thông Báo Trong Blog

[ Blogger ] Hướng Dẫn Cách Tạo Khung Thông Báo Trong Blog

Edit


***

Thông báo trên blog :

Bạn muốn tạo một thông báo về một điều gì đó tới những người khi thăm quan vào blog của bạn ..Và một khung thông báo bắt mắt là điều cần thiết ..Với bài viết hôm nay sẽ hướng dẫn tới các bạn , cách tạo khung thông báo đẹp và có thể dễ dàng tắt đi khi người xem đã đọc /

 Xem Demo

Các bước cho bạn thực hiện:
-Bước 1 : Đăng nhập vào Blogspot => Mẫu =>Chỉnh sửa HTML
-Bước 2 :Ctrl + F tìm đến </body> , rồi copy đoạn code sau lên trên từ khóa vừa tìm.

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2VmfkwdIyumu9z65UrRQRvJ27OD5LSfd6tXUIROvhV986CAK7a3_JR9cBGrv2AbT9MbObrx_Uun9gpHlJa83wgBJh4q1rZ6VcQktSzJzhIBIBqMC-GdWwQ_1HfEopjJ93Xa1Dz05lOQ/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXcEfLkELsnI7XQMDiKSAOB1JKD5N8_sakC8226o4DONbdNXT4F7XdRYnEnxwOkYjnJ-hGkCfjgV7IsY4olqhF5VjtLFoLhaBlEDC5ZnERWrHsXe-2WP7XZjphiCYS8st7JClfq_qVVU4/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>Đây là một thông báo. Click vào button ở bên phải để tắt.</p></div></b:if>

 -Những đoạn Code tô màu đỏ bạn có thể thay đổi sao cho phù hợp và khung này mắc đinh chỉ hiển thị ở trang chủ.
-Nếu đang sử dụng một thủ thuật Jquery khác, hãy xóa dòng màu xanh để tránh xung đột.

Share this:

ABOUT THE AUTHOR

Ceyron Louis

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

    Blogger Comment
    Facebook Comment