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ình ảnh bất kì để tạo dáng cho con trỏ chuột, chứ không nhất thiết phải là tập tin dạng .ico, .cur

Lưu ý: Tâm chuột là chính giữa. Cho dù bạn có chèn hình gì đi chăng nữa thì phần tâm vẫn hiện hình mũi tên trắng, và hình khi tô khối là dấu +.

Điều này có nghĩa là: Thủ thuật chỉ tạo thêm lớp ảnh bao quanh con chuột bình thường mà thôi.


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: Tìm thẻ đóng </head>

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

<!-- Tạo trỏ chuột với hình ảnh bất kỳ --> <script type='text/javascript'> //<![CDATA[<script type='text/javascript'>//<![CDATA[var skinableCursor = { skinPath : 'LINK_HÌNH_45x45_pixel', // Thay Link hình của bạn vào đây // private properties. Browser detect. Do not touch! :) IE : ( document.all && document.getElementById && !window.opera ), FF : (!document.all && document.getElementById && !window.opera), OP : (document.all && document.getElementById && window.opera), // private properties. Cursor attributes. Do not touch! :) cursor : { lt : { x : '0px', y : '0px', w : '19px', h : '26px' , dx : -22, dy : -22 }, rt : { x : '19px', y : '0px', w : '26px', h : '19px' , dx : -3, dy : -22 }, rb : { x : '26px', y : '19px', w : '19px', h : '26px' , dx : 4, dy : -3 }, lb : { x : '0px', y : '26px', w : '26px', h : '19px' , dx : -22, dy : 4 } }, // private method. Initialize init : function () { skinableCursor.cursor.browserDelta = (skinableCursor.IE ? 2 : 0); if ( skinableCursor.FF || skinableCursor.OP ) { document.addEventListener("DOMContentLoaded", skinableCursor.domReady, false); } if ( skinableCursor.IE ) { document.write("<scr" + "ipt id=__ieinit defer=true " + "src=//:><\/script>"); var script = document.getElementById("__ieinit"); script.onreadystatechange = function() { if ( this.readyState != "complete" ) return; this.parentNode.removeChild( this ); skinableCursor.domReady(); }; script = null; } }, // private method. domReady : function () { skinableCursor.create(); if ( skinableCursor.FF || skinableCursor.OP ) { var s = document.createElement('style'); s.innerHTML = '* { cursor: inherit; } html { height: 100%; } body, html { cursor: crosshair; }'; document.body.appendChild(s); document.addEventListener('mousemove', skinableCursor.move, false); } if ( skinableCursor.IE ) { var s = document.createStyleSheet() s.addRule("*", "cursor: inherit"); s.addRule("body", "cursor: crosshair"); s.addRule("html", "cursor: crosshair"); document.attachEvent('onmousemove', skinableCursor.move); } var anchors = document.getElementsByTagName('a'); for (x = 0; x < anchors.length; x++) { if ( skinableCursor.FF || skinableCursor.OP ) { anchors[x].addEventListener('mousemove', skinableCursor.events.anchor, false); anchors[x].addEventListener('mouseout', skinableCursor.events.show, false); } if ( skinableCursor.IE ) { anchors[x].attachEvent('onmousemove', skinableCursor.events.anchor); anchors[x].attachEvent('onmouseout', skinableCursor.events.show); } } }, // private method. Create cursor create : function () { function create(el, d) { el.style.position = 'absolute'; el.style.overflow = 'hidden'; el.style.display = 'none'; el.style.left = d.x; el.style.top = d.y; el.style.width = d.w; el.style.height = d.h; if ( skinableCursor.IE ) { el.innerHTML = '<img src="' + skinableCursor.skinPath + '" style="margin: -' + d.y + ' 0px 0px -' + d.x + '">'; } else { el.style.background = 'url(' + skinableCursor.skinPath + ') -' + d.x + ' -' + d.y; } return el; } var c = skinableCursor.cursor; c.lt.el = create(document.createElement('div'), c.lt); c.rt.el = create(document.createElement('div'), c.rt); c.rb.el = create(document.createElement('div'), c.rb); c.lb.el = create(document.createElement('div'), c.lb); document.body.appendChild(c.lt.el); document.body.appendChild(c.rt.el); document.body.appendChild(c.rb.el); document.body.appendChild(c.lb.el); }, // private method. Move cursor move : function (e) { function pos(el, x, y) { el.el.style.left = x + el.dx + 'px'; el.el.style.top = y + el.dy + 'px'; } function hide(el, x, y) { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; var deltaX = w - (x + el.dx + parseInt(el.w) - skinableCursor.cursor.browserDelta); var deltaY = h - (y + el.dy + parseInt(el.h) - skinableCursor.cursor.browserDelta); if (!skinableCursor.noSkin) { el.el.style.display = deltaX > 0 ? (deltaY > 0 ? 'block' : 'none') : 'none'; } } var p = skinableCursor.getMousePosition(e); var s = skinableCursor.getScrollPosition(); var c = skinableCursor.cursor; var x = p.x + s.x - c.browserDelta; var y = p.y + s.y - c.browserDelta; hide(c.lt, p.x, p.y); hide(c.rt, p.x, p.y); hide(c.rb, p.x, p.y); hide(c.lb, p.x, p.y); pos(c.lt, x, y); pos(c.rt, x, y); pos(c.rb, x, y); pos(c.lb, x, y); }, // private method. Returns mouse position getMousePosition : function (e) { e = e ? e : window.event; var position = { 'x' : e.clientX, 'y' : e.clientY } return position; }, // private method. Get document scroll position getScrollPosition : function () { var x = 0; var y = 0; if( typeof( window.pageYOffset ) == 'number' ) { x = window.pageXOffset; y = window.pageYOffset; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { x = document.body.scrollLeft; y = document.body.scrollTop; } var position = { 'x' : x, 'y' : y } return position; }, // private property / methods. events : { anchor : function (e) { skinableCursor.noSkin = true; document.body.style.cursor = 'pointer'; var c = skinableCursor.cursor; c.lt.el.style.display = 'none'; c.rt.el.style.display = 'none'; c.rb.el.style.display = 'none'; c.lb.el.style.display = 'none'; }, show : function () { skinableCursor.noSkin = false; document.body.style.cursor = 'crosshair'; } } } skinableCursor.init(); // private properties. Browser detect. Do not touch! :) IE : ( document.all && document.getElementById && !window.opera ), FF : (!document.all && document.getElementById && !window.opera), OP : (document.all && document.getElementById && window.opera), // private properties. Cursor attributes. Do not touch! :) cursor : { lt : { x : '0px', y : '0px', w : '19px', h : '26px' , dx : -22, dy : -22 }, rt : { x : '19px', y : '0px', w : '26px', h : '19px' , dx : -3, dy : -22 }, rb : { x : '26px', y : '19px', w : '19px', h : '26px' , dx : 4, dy : -3 }, lb : { x : '0px', y : '26px', w : '26px', h : '19px' , dx : -22, dy : 4 } }, // private method. Initialize init : function () { skinableCursor.cursor.browserDelta = (skinableCursor.IE ? 2 : 0); if ( skinableCursor.FF || skinableCursor.OP ) { document.addEventListener("DOMContentLoaded", skinableCursor.domReady, false); } if ( skinableCursor.IE ) { document.write("<scr" + "ipt id=__ieinit defer=true " + "src=//:><\/script>"); var script = document.getElementById("__ieinit"); script.onreadystatechange = function() { if ( this.readyState != "complete" ) return; this.parentNode.removeChild( this ); skinableCursor.domReady(); }; script = null; } }, // private method. domReady : function () { skinableCursor.create(); if ( skinableCursor.FF || skinableCursor.OP ) { var s = document.createElement('style'); s.innerHTML = '* { cursor: inherit; } html { height: 100%; } body, html { cursor: crosshair; }'; document.body.appendChild(s); document.addEventListener('mousemove', skinableCursor.move, false); } if ( skinableCursor.IE ) { var s = document.createStyleSheet() s.addRule("*", "cursor: inherit"); s.addRule("body", "cursor: crosshair"); s.addRule("html", "cursor: crosshair"); document.attachEvent('onmousemove', skinableCursor.move); } var anchors = document.getElementsByTagName('a'); for (x = 0; x < anchors.length; x++) { if ( skinableCursor.FF || skinableCursor.OP ) { anchors[x].addEventListener('mousemove', skinableCursor.events.anchor, false); anchors[x].addEventListener('mouseout', skinableCursor.events.show, false); } if ( skinableCursor.IE ) { anchors[x].attachEvent('onmousemove', skinableCursor.events.anchor); anchors[x].attachEvent('onmouseout', skinableCursor.events.show); } } }, // private method. Create cursor create : function () { function create(el, d) { el.style.position = 'absolute'; el.style.overflow = 'hidden'; el.style.display = 'none'; el.style.left = d.x; el.style.top = d.y; el.style.width = d.w; el.style.height = d.h; if ( skinableCursor.IE ) { el.innerHTML = '<img src="' + skinableCursor.skinPath + '" style="margin: -' + d.y + ' 0px 0px -' + d.x + '">'; } else { el.style.background = 'url(' + skinableCursor.skinPath + ') -' + d.x + ' -' + d.y; } return el; } var c = skinableCursor.cursor; c.lt.el = create(document.createElement('div'), c.lt); c.rt.el = create(document.createElement('div'), c.rt); c.rb.el = create(document.createElement('div'), c.rb); c.lb.el = create(document.createElement('div'), c.lb); document.body.appendChild(c.lt.el); document.body.appendChild(c.rt.el); document.body.appendChild(c.rb.el); document.body.appendChild(c.lb.el); }, // private method. Move cursor move : function (e) { function pos(el, x, y) { el.el.style.left = x + el.dx + 'px'; el.el.style.top = y + el.dy + 'px'; } function hide(el, x, y) { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; var deltaX = w - (x + el.dx + parseInt(el.w) - skinableCursor.cursor.browserDelta); var deltaY = h - (y + el.dy + parseInt(el.h) - skinableCursor.cursor.browserDelta); if (!skinableCursor.noSkin) { el.el.style.display = deltaX > 0 ? (deltaY > 0 ? 'block' : 'none') : 'none'; } } var p = skinableCursor.getMousePosition(e); var s = skinableCursor.getScrollPosition(); var c = skinableCursor.cursor; var x = p.x + s.x - c.browserDelta; var y = p.y + s.y - c.browserDelta; hide(c.lt, p.x, p.y); hide(c.rt, p.x, p.y); hide(c.rb, p.x, p.y); hide(c.lb, p.x, p.y); pos(c.lt, x, y); pos(c.rt, x, y); pos(c.rb, x, y); pos(c.lb, x, y); }, // private method. Returns mouse position getMousePosition : function (e) { e = e ? e : window.event; var position = { 'x' : e.clientX, 'y' : e.clientY } return position; }, // private method. Get document scroll position getScrollPosition : function () { var x = 0; var y = 0; if( typeof( window.pageYOffset ) == 'number' ) { x = window.pageXOffset; y = window.pageYOffset; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { x = document.body.scrollLeft; y = document.body.scrollTop; } var position = { 'x' : x, 'y' : y } return position; }, // private property / methods. events : { anchor : function (e) { skinableCursor.noSkin = true; document.body.style.cursor = 'pointer'; var c = skinableCursor.cursor; c.lt.el.style.display = 'none'; c.rt.el.style.display = 'none'; c.rb.el.style.display = 'none'; c.lb.el.style.display = 'none'; }, show : function () { skinableCursor.noSkin = false; document.body.style.cursor = 'crosshair'; } }}skinableCursor.init();//]]></script>

Kích cỡ ảnh theo trỏ chuột là: 45x45 pixel.

Bước 2: Save template. (Lưu mẫu)


Một số mẫu tạo dáng cho trỏ chuột với hình ảnh 

           

THE END.

Xem thêm tại đây: http://kenhdaihoc.com/forum/showthread.php?t=2090

Read More

Click chuột vào button, một hộp thoại hiển thị

Giới thiệu: Một trong những ứng dụng của tiện ích jQuery. Khi ta click chuột vào nút nhấn, một hộp thoại sẽ hiển thị. 

Lưu ý là nội dung trong hộp thoại không được enter xuống hàng (nghĩa là phải viết liền trong một câu). Muốn cho câu xuống dòng thì space (tạo khoảng trắng nhiều cho đến khi thấy chữ xuống hàng là được). 

Vidu:

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)

Chèn code bên dưới vào dưới <head>

<script src='http://kenhdaihoc.com/blogger/jquery.min1.4.3.js' type='text/javascript'/>

Bước 2: Cho vào bài viết, template, hoặc widget (tiện ích) với đoạn script sau:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#Name").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK");
  });
});
</script>
<input type="button" value="Click me" id="Name"/>

("#Name") // Tên cho hộp thoại
id="Name" // Tên hộp thoại sẽ hiển thị.

- Nếu một trang hay bài viết sử dụng nhiều hộp thoại thì: 

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#Name.1").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.1");
  });


  jQuery("#Name.2").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.2");
  });


  jQuery("#Name.3").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.3");
  });


});
</script>
<input type="button" value="Click me" id="Name.1"/>
<input type="button" value="Click me" id="Name.2"/>
<input type="button" value="Click me" id="Name.3"/>

Ba dòng cuối đặt ở vị trí nào cũng được.

Xem thêm tại đây: http://kenhdaihoc.com/forum/showthread.php?t=2089

Read More

Hướng dẩn chèn Emoticons vào comment

Giới thiệu: Khung Đăng Nhận xét của blogspot là một trang riêng được chèn vào blog thông qua thẻ iframe, và Google không cho ta quyền can thiệp vào khung “Đăng nhận xét” này. Đó là lý do mà không đưa được bộ gõ riêng cũng như emoticons vào khung “Đăng nhận xét”.

Với bộ gõ thì dường như không thể, cho đến khi nào Google tích hợp thêm vào. Còn với Emoticons thì thật may là có hàm replace, sử dụng hàm này để thay đổi ký tự thành hình ảnh. Và như thế Blogspot đã có Emoticons, cho dù việc nhập Emoticons vẫn không thể theo kiểu click.

Đặc biệt: Hiển thị tốt trên cả IE (Internet Explorer). 

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. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm thẻ đóng </body>

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

<!-- Emotion comment (1) -->
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;

theText = theText.replace(/KÍTỰ.1/gi, "<img src='LINK_HÌNH'/>");
theText = theText.replace(/KÍTỰ.2/gi, "<img src='LINK_HÌNH'/>");
...
theText = theText.replace(/KÍTỰ.N/gi, "<img src='LINK_HÌNH'/>");

bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

KÍTỰ // Đặt kí tự tắt cho Emoticon. Ví dụ như: :cuoi, :) , :D ,…
LINK_HÌNH // Thay Link hình Emoticon của bạn vào đây.

Bạn có thể Down hình yahoo tại đây: http://www.mediafire.com/?ds5c530wwrz6thv

Bạn cũng có thể dùng trọn bộ link ảnh băng link này 

http://kenhdaihoc.com/forum/images/smilies/yahoo/tên ảnh.gif

VD:

 http://kenhdaihoc.com/forum/images/smilies/yahoo/1.gif

http://kenhdaihoc.com/forum/images/smilies/yahoo/2.gif

Tên ảnh trong file tải về hoặc xem trong ảnh này





Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + ^ $ : thì phải thêm kí tự \ trước nó.
Với ký tự < : Phải đổi thành &lt;
Với ký tự > : Phải đổi thành &gt;
Với ký tự & : Phải đổi thành &amp;

Ví dụ: 

:))     thành  :\)\)
:-/     thành  :-\/
>:D<  thành  &gt;:D&lt;

Với những ký tự tắt bao gồm như nhau như :)) và :)
Thì bạn phải đặt :)) lên trước dòng :)

Nếu không làm vậy thì chỉ ký tự ít hơn được hiện lên. Và không hiện được kí tự kia.


Bước 2: Tìm dòng <b:loop values='data:post.comments' var='comment'>

- Thêm vào trước nó thẻ <div id='emocomments'> 

- Tìm tiếp ở đoạn code này thẻ đóng </b:loop> 

- Thêm vào sau nó thẻ đóng </div>


Bước 3: Bước này là để hiển thị khung hình Emoticon ở khung nhận xét.

- Tìm đến thẻ <data:blogTeamBlogMessage/> 

- Đôi khi có tên là <data:blogCommentMessage/> 

- Thêm vào sau nó đoạn code sau:

<!-- Emotion comment (2)-->
<script type="text/javascript"> 
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">                    Thu gọn </a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">                    Xem thêm </a>';
}
//]]>
</script>


<!-- Dòng hiện vài Emoticon mẫu khi chưa bấm “Xem thêm” -->
<div class='emoticons'>
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 


<!-- Khung hiện đầy đủ các Emoticons khi bấm “Xem thêm” -->
<span id='smiley-more' style='display: none;'>
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.1
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.2
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.N  

</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()"> Xem thêm </a></span>
</div>

- Thay LINK_HÌNH thành link hình Emoticon của bạn vào đây.

- CHÚ-THÍCH_KÍTỰ // Hiện chú thích kí tự khi bạn rê chuột lên ảnh.




- KÍTỰ // Chữ kế bên Emoticons. Kí tự nào là tùy bạn đặt cho Emoticons.




* Ngoài ra, thay vì dùng đoạn code ở bước 3, bạn cũng có thể dùng đoạn code sau: 

(Cách thức cũng giống nhau, nhưng có hơi chút khác biệt về giao diện.)

<!-- Emotion comment (2)-->
<script type='text/javascript'> 
//<![CDATA[ 
if(typeof(rnd) == 'undefined') var rnd = ''; 
rnd = Math.floor(Math.random()*1000); 
rnd = 'id-' + rnd; 
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="text-decoration : none;float:left;margin-right:2px;">'); 
//]]> 
</script> 


<!-- Dòng hiện vài Emoticon mẫu khi chưa bấm [▼/▲] -->
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/> 
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>  <b>[▼/▲]</b> 


<script type='text/javascript'>
//<![CDATA[ 
document.write('</a>'); 
//]]> 
</script>
<br/>
<br/>

<!-- Khung hướng dẫn chèn Emoticons Comment
**Có thể bỏ đi nếu không cần**-->
<div style='border:#4F4F4F 1px dashed; padding: 4px; background:#FFFF96;'>
<b>Chèn thêm Emoticons vào nhận xét: </b>
<br/>
<span style='color: #3366ff; font-family: Verdana; font-size: 10pt;'>Rê chuột lên Emoticons để thấy các kí hiệu tương ứng!</span>
<br/></div>


<script type='text/javascript'> 
//<![CDATA[ 
document.write('<div id="' + rnd + '" style="display:none;">'); 
//]]>
</script>


<div style='text-align: left; border: 1px solid #cccccc; padding:2px; background:#affdd3;'>

<!-- Khung hiện đầy đủ các Emoticons khi bấm [▼/▲] -->
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.1
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.2
...
<img src='LINK_HÌNH' title='CHÚ-THÍCH_KÍTỰ'/>KÍTỰ.N  

</div>
<script type='text/javascript'>
//<![CDATA[ 
document.write('</div>'); 
//]]> 
</script>

Bước 4: Save template. (Lưu mẫu)

Read More

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 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/AVvXsEjre1jKcD8vpBwjn9VGtZHAvIwXm0NOmeHqA1VQv1mMJ_Dx_yBzCpk4_tdZHaQVuQvowPE9YivSF9frSXLjvsFXJEt-P7QHP-gIHLyOu4FSSFX3V6bSM7HDprW3BDjGem19bZZv9Wo4FbQ/) 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/AVvXsEgqLJkEjU81ndmwWw7CwJvPy-0BPujXFth5BaVOIvhkYANiAbXWAFkRfq24lqBFEH71Xd1EtaRUVOMBRU4jIwLSRMGNTIuVE9RL8B2rUXQSEtjXq8XAgx_bmpsWJytdz54-Kwo70pjYkgc/);
   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

Read More