• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo hộp thoại thông báo với hiệu ứng trượt

45
19/07/2011

Một hộp thoại thông báo rất cần thiết cho bất kỳ website hay webblog, có tác dụng đặt một đoạn text với nội dung chào mừng bạn đọc hoặc gửi lời nhắn đến bạn đọc về một vấn đề gì đó. Có nhiều cách để tạo một thông báo như vậy, trong số đó nổi bật nhất có sử dụng thư viện jQuery để tạo hiệu ứng trượt, như bạn có thể thấy tại trang Demo (kéo xuống đáy trang).

Nếu bạn muốn tạo một hộp thoại thông báo như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.
<style>
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}
</style>

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();

if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});

$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>

Bước 3. Đặt đoạn code bên dưới vào trước thẻ <div id='footer'>.
<p id='last'/>
<div id="slidebox">
<a class="close">[×]</a>
<p>Nội dung thông báo.</p>
</div>

Lưu Template.

Hy vọng bạn sẽ hài lòng với thủ thuật nhỏ này và mong nhận ý kiến góp ý của bạn đọc để có thêm ý tưởng mới.

{45 bình luậnAdd yours ?}

16:25:00, 19 thg 7, 2011

nhấn demo chỉ thấy xuống bottom, còn ko thấy gì cả

Reply
20:02:00, 19 thg 7, 2011

Vẫn bình thường mà Vietutd.

Reply
22:09:00, 19 thg 7, 2011

Cái này cũng hay :55) bên Noct cũng có thủ thuật na ná giống vậy nhưng chèn thẳng code css trước thẻ </body> luôn đó anh Hà.

Reply
22:19:00, 19 thg 7, 2011

Có phải bài này không hè:
http://noct-land.blogspot.com/2011/04/khung-thong-bao-cho-blog.html
Hiệu ứng ở đây đã hơn nhiều mà, trượt mới đã. CSS thì đặt đâu cũng được mà. :71)

Reply
22:32:00, 19 thg 7, 2011

Anh kiếm cái hình nền nào độc độc mới đã, màu trắng không gây ấn tượng lắm :54)

Reply
22:38:00, 19 thg 7, 2011

Hì vấn đề CSS là vấn đề mở để người dùng ngâm cứu vận dụng riêng theo sở thích và theo mỗi blogspot. Nền thì thêm cái background vô đơn giản ấy mà.

Reply
22:48:00, 19 thg 7, 2011

Hì, em biết chứ, chỉ là góp ý với cái của anh thôi :51)

Reply
22:50:00, 19 thg 7, 2011

Có cách nào cho nó mỗi lần trượt ra là hiện một thông báo khác không anh Hà?

Reply
22:51:00, 19 thg 7, 2011

Cảm ơn e nhiều nhé. Tạm thời xài đỡ nền xám cho đơn giản. Quan trọng vẫn là anh em áp dụng được thôi.

Reply
23:22:00, 19 thg 7, 2011

ohh cái này đẹp quá, js chạy rõ nuột, linh động

Reply
07:14:00, 20 thg 7, 2011

@peace19812006 Nếu muốn thế thì thêm cái random nữa, đọc bài này nha:
http://www.bloggerism.tk/2010/10/hien-thi-danh-ngon-ngau-nhien-su-dung.html

Reply
12:32:00, 20 thg 7, 2011

@Huỳnh Nhật Hà Áp dụng thêm cái random đó vô thì nó bị lệch sang bên trái, không còn hiệu ứng trượt và background color của cái box không hoạt động, em đã test thử trên blog mình, thấy chưa được nên đã gỡ bỏ.

Reply
13:04:00, 20 thg 7, 2011

Bấm vô nhãn Emoticons trong Tag Cloud của anh thì có thông báo Malware đó anh Hà! :51)

Reply
13:06:00, 20 thg 7, 2011

Hì, bấm vô nhãn nào cũng bị hết đó :67)

Reply
13:12:00, 20 thg 7, 2011

Kỳ vậy ta, hổng lẽ do chèn cái mặt cười trong nhãn Emoticons. Nhưng mà máy của a đâu có báo vậy hè, em xài virus scanner gì?

Reply
13:15:00, 20 thg 7, 2011

Không thể nào có malware, a đã test nhiều máy rồi mà, em có thể chụp hình post lên đây được k?

Reply
13:19:00, 20 thg 7, 2011

http://2.bp.blogspot.com/-rDaMd5qctuw/TiZzEO51dkI/AAAAAAAABD4/dqPRIUxqfLI/s1600/bloggerism.tk.png

Reply
13:22:00, 20 thg 7, 2011

@Huỳnh Nhật Hà Em xài trình duyệt Chrome, nó báo vậy đó anh.

Reply
13:43:00, 20 thg 7, 2011

À hiểu rồi, ấy là do cái banner cũ có dính malware, tháo nó ra là xong ấy mà. Cảm ơn em nhé.

Reply
13:51:00, 20 thg 7, 2011

@Huỳnh Nhật Hà OK rồi đó anh!

Reply
15:00:00, 20 thg 7, 2011

Tin tức này có thiệt không anh Hà? :55)

http://1.bp.blogspot.com/-x3hk912cFC4/TiaKvLgUmCI/AAAAAAAABF8/JttdWTV1vJ8/s1600/DOMAIN.png

Reply
15:10:00, 20 thg 7, 2011

Tin đó đâu ra vậy em, chính em thấy à?

Reply
15:13:00, 20 thg 7, 2011

@Huỳnh Nhật HàHì, mới tìm được cái script chỉnh sửa website, định chọc anh thôi, sorry anh nha! :54)

Reply
15:17:00, 20 thg 7, 2011

Phòe, mới thoạt nhìn anh cứ ngỡ bị hacker phá ấy chứ. :55)

Reply
15:21:00, 20 thg 7, 2011

@Huỳnh Nhật Hà Cái script này ghê thật, làm xong em còn tính chuyện này có thiệt nữa đó, y như thật :51)

Reply
15:23:00, 20 thg 7, 2011

Cái đó là zì zậy cà, nghe tò mò quá, có cái đó đi quăng lựu đạn quấy phá dân tình được đấy :75)

Reply
22:19:00, 20 thg 7, 2011

Nếu anh cần quăng lựu đạn thì em share cho :54)

Reply
22:33:00, 20 thg 7, 2011

Xài để khám phá chứ quăng lựu đạn thì k, vì k muốn vậy :67)

Reply
14:56:00, 21 thg 7, 2011

cái này mà anh Hà chế được hiển thị bài liên quan giống WP thì hay biết mấy,

Reply
16:24:00, 21 thg 7, 2011

Cũng đang nghĩ đến vấn đề này đó em, ý tưởng này cũng hay, tìm được chìa khóa là mở được cửa ngay ấy mà :56)

Reply
17:51:00, 21 thg 7, 2011

http://www.itechplus.info/2011/03/tao-banner-quang-cao-dang-popup.html
Anh Hà có thể cải tiến lại cái thủ thuật này được không? Để nó có thể dễ dàng tùy biến, mún chèn hình size nhiu cũng được, chứ hình như thủ thuật này chỉ chèn hình ảnh size mặc định thì phải

Reply
19:47:00, 21 thg 7, 2011

@Lê Trương Vĩnh Trung Chỉ cần thay đổi height và width là ok mà bạn. :51)

Reply
13:03:00, 24 thg 7, 2011

cảm ơn bạn, cái này rất hữu ích :53)

Reply
08:34:00, 6 thg 8, 2011

thủ thuật hay quá, thanks nhé

Reply
14:02:00, 11 thg 8, 2011

a Hà sang xem giúp em tại sao cái thông báo nó lại bị wiget ở footer đè lên được không!
blog e: meoblog.net

Reply
15:04:00, 11 thg 8, 2011

Cái này do thuộc tính position ở #footer của e không tương thích với thuộc tính postion ở cái #slidebox nên thèn footer đè lên.

Reply
15:07:00, 11 thg 8, 2011

Với thiết kế footer của e k thích hợp để dùng slidebox bởi vì k có cách nào để cho nó hoạt động slidebox này được.

Reply
22:16:00, 11 thg 8, 2011

vâng ạ! thế đành xóa nó đi vậy!Tks a nhé!

Reply
07:38:00, 17 thg 8, 2011

Chào Hà,
cho mình hỏi: có cách nào gởi comment bằng tk yahoo không.

Reply
08:39:00, 17 thg 8, 2011

Cái này dùng hệ thống comment Disqus thì có tính năng này, Blogger chưa hỗ trợ mấy cái này. Mình đã nghĩ đến việc tích hợp gravatar để comment cho blogspot nhưng vẫn chưa tìm thấy ánh sáng cuối đường hầm. :54)

Reply
20:44:00, 13 thg 9, 2011

em thấy cài này hình như chỉ ở trang chủ thôi... thẾ em muốn nó ở một bài viết cụ thể nào đó, hay hiện ra khi tìm kết quả của một nhãn nào đó thì làm sao?

Reply
22:56:00, 26 thg 11, 2011

sao em tìm thẻ này div ở b3 mà hổng có thấy vậy anh?
giúp em với?

Reply
09:46:00, 3 thg 12, 2011

@Huỳnh Nhật Hàdúng vậy hiệu ứng ni nhìn .matz,tươi nữa anh Hà ah.he.rất hay.ah em thấy tthuat ni giống bên Chip Trần ý với bài viết kế tip .anh hướng dẫn luôn nha.nhưng em nghĩ chỉ cần đạt code .bài viết next.la đc nhỉ?
Kon riêng cái nút Close k hoạt động anh ah

Reply
09:51:00, 3 thg 12, 2011

@Shop ClickbankM cũng vậy k tìm ra đc như code đó .nhưng bạn tìm div tùy tem mình xài là đc .nó nằm ở chân trang footer.hi

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn