Hello box cho blog

Hôm nay mình sẽ giúp các bạn tạo một lời chào với người truy cập vào blog, ngoài ra cũng có thể dùng nó để thông báo về một sự kiện nào đó trên blog.

Hello box

Welcom to Khanh Blog

Chào mừng bạn đến với Khanh Blog! Hi vọng những thông tin của chúng tôi là hữu ích với bạn.

Close

#Thêm hello box

1. Đăng nhập Blogger

2. Bố cục > Thêm tiện ích > HTML/Javascript

3. Dán code dưới vào

<style>
/* khanh98.blogspot.com/2015/08/hello-box-cho-blog.html */
#hello-box{
  width:40%; 
  background:#ecf0f1;
  border:4px solid #e74c3c;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  padding:5px;
  font-family:arial;
  position: fixed;
  Left: 30%;
  top:30%;
  display:block;
  text-align:center;
  z-index:9999;
  color:#e67e22;
  text-shadow: 2px 1px 1px #fff;
}
#hello-box div {margin:7px}
#hello-box .welcom{font-weight:bold;font-size:20px}
#hello-box .welcom span{color:#2ecc71; text-decoration:overline}
.close-hello-box{background:#2980b9;
  padding:6px;
  box-shadow: 03px 03px 03px;
  -moz-box-shadow: 03px 03px 03px;
  -webkit-box-shadow: 03px 03px 03px;
  -o-box-shadow: 03px 03px 03px;
  -ms-box-shadow: 03px 03px 03px;
  text-shadow:none;
}
.close-hello-box:hover{background:#fff;border: 1px solid #3498db }

</style>
<script>
function closeTopAds() {
document.getElementById("hello-box").style.visibility = "hidden";
}
</script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' media='all' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

<!-- khanh98.blogspot.com/2015/08/hello-box-cho-blog.html -->

<div id="hello-box">
  <div class="welcom">Welcom to <span>Khanh Blog</span></div>
  <span>
    Chào mừng bạn đến với Khanh Blog! Hi vọng những thông tin của chúng tôi là hữu ích với bạn.
  </span>
  <div><a class="close-hello-box" onclick="closeTopAds();return false;">Close<i class="fa fa-close"></i></a></div>
</div>

Thay các phần giới thiệu màu cam cho phù hợp.
Lưu ý: Nếu trong template của bạn đã có font Awesome thì xóa đoạn màu xanh đi, và tương tự nếu có Jquery rồi thì xóa đoạn màu tím đi.
4. Lưu tiện ích lại.

#Chỉ hiện thị hello box ở một số trang nhất định

Nếu các bạn không muốn hiện thị hello box ở tất cả các trang mà chỉ muốn hiển thị ở một số loại trang như: trang chủ, trang label... thì có thể sử dụng thẻ b:if để làm điều này.

Dưới đây là một vài cặp thẻ b:if, bạn chỉ việc lấy code ở trên dán vào giữa cặp thẻ b:if là được

Thẻ b:if trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'></b:if>

Trang index

<b:if cond='data:blog.pageType == "index"'></b:if>

Trang Archive

<b:if cond='data:blog.pageType == "archive"'></b:if>

Trang nhãn

<b:if cond='data:blog.searchLabel'></b:if>

Trang bài viết

<b:if cond='data:blog.pageType == "item"'></b:if>

Trang tĩnh

<b:if cond='data:blog.pageType == "static_page"'>

...
Và còn rất nhiều thẻ b:if.
Dưới đây mình ví dụ code hello box chỉ hiện thị ở trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
/* khanh98.blogspot.com/2015/08/hello-box-cho-blog.html */
#hello-box{
  width:40%; 
  background:#ecf0f1;
  border:4px solid #e74c3c;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  padding:5px;
  font-family:arial;
  position: fixed;
  Left: 30%;
  top:30%;
  display:block;
  text-align:center;
  z-index:9999;
  color:#e67e22;
  text-shadow: 2px 1px 1px #fff;
}
#hello-box div {margin:7px}
#hello-box .welcom{font-weight:bold;font-size:20px}
#hello-box .welcom span{color:#2ecc71; text-decoration:overline}
.close-hello-box{background:#2980b9;
  padding:6px;
  box-shadow: 03px 03px 03px;
  -moz-box-shadow: 03px 03px 03px;
  -webkit-box-shadow: 03px 03px 03px;
  -o-box-shadow: 03px 03px 03px;
  -ms-box-shadow: 03px 03px 03px;
  text-shadow:none;
}
.close-hello-box:hover{background:#fff;border: 1px solid #3498db }

</style>
<script>
function closeTopAds() {
document.getElementById("hello-box").style.visibility = "hidden";
}
</script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' media='all' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

<!-- khanh98.blogspot.com/2015/08/hello-box-cho-blog.html -->

<div id="hello-box">
  <div class="welcom">Welcom to <span>Khanh Blog</span></div>
  <span>
    Chào mừng bạn đến với Khanh Blog! Hi vọng những thông tin của chúng tôi là hữu ích với bạn.
  </span>
  <div><a class="close-hello-box" onclick="closeTopAds();return false;">Close<i class="fa fa-close"></i></a></div>
</div>
</b:if>