Thêm Thông báo trượt Widget trong Blogger

SlideNote là một Plugin jQuery để hiển thị thông báo trượt trong blogger. Hiển thị thông báo (là một Widget) trên blog của bạn là một cách tuyệt vời để giới thiệu những thứ mà bạn nghĩ rằng độc giả của bạn nên được thông báo trước. Bạn có thể thấy rằng phổ biến nhiều blog bạn đang gặp là loại trượt thông báo ở khu vực có thể nhìn thấy khác với việc khi bạn di chuyển các trang về phía dưới cùng của trang, và nó đi ra vô hình khi bạn đang ở trên cùng của trang.

Demo

Chú ý; Nếu như bạn nào còn chưa thành thạo chèn Code thì nên Lưu temple lại rồi thực hiện cho thoải mái nha.

1.Đăng nhập vào blog của bạn từ Bảng điều khiển Blogger và đi đến Thiết kế chọn Chỉnh sửaHTML.

Bước 1. Sao chép mã dưới đây và dán nó ngay trước </ head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="https://sites.google.com/site/bloggerhowto/blogger-how-to/jquery.slidenote.min.js" type="text/javascript"></script>

Bước 2. Copy và dán mã dưới đây ngay trước ]]></b:skin>

/* -----CSS START------ */

.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;

-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}

.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }

.slidenote img:hover { margin-top: -1.95em; }

/* ----- CSS END------ */

Bước 3. Bây giờ Sao chép mã dưới đây và dán nó ngay trước </ body>

<!-- BẢNG THÔNG BÁO CHẠY Start -->

<div class='slidenote' id='note'>

<div id='container'>

<h2>Welcome To Blog ChipKool</h2>

<span><em>Blog Chipkool đang trong giai đoạn xây dựng,sẽ còn nhiều sai sót mong các bạn thông cảm!Nếu bạn nào có niềm đam mê Điện Tử.Cùng Chip xây dựng blog Điện Tử.Các bạn liên hệ với mình qua YM:New_man9xone!!! :) </em></span>

<p>XEM 4RUM: <a href='http://clan-family.tk/'>Bắt Sóng Cảm Xúc</a>.......<br/><a href='http://www.chipkool.blogspot.com/2011/05/boi-tinh-yeu.html'>Bói Tình Yêu</a> | <a href='http://www.chipkool.blogspot.com/2011/05/boi-so-ien-thoai.html'>Bói Số Điện Thoại</a></p>

</div>

</div>

<script type='text/javascript'>

$(&#39;#note&#39;).slideNote({

closeImage: &#39;http://i1121.photobucket.com/albums/l502/chjpchjp1991/ICOlogout.png&#39;

});

</script>

<!-- BẢNG THÔNG BÁO CHẠY Ends -->

Lưu mẫu lại là xong!. Bạn có thể thay đổi giá trị của các lớp CSS theo nhu cầu của bạn. Di chuyển xuống cuối trang để dưới cùng của trang và bạn sẽ thấy thông báo.

Tải về toàn bộ plugin bao gồm cả mã nguồn minified-un, trang demo, README, và kiểu mẫu

Chúc các bạn thành công!^^

ChipKool (theo: bloghowtotips)