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.

SlideNote là một tùy chỉnh linh hoạt jQuery plugin mà làm cho nó dễ dàng có thể hiển thị các thông báo trượt trên trang blog của bạn hoặc trong ứng dụng web của bạn. SlideNote tương thích với jQuery 1.4.3 và các phiên bản hiện hành của các trình duyệt chính. (IE8, IE9 là 2 phiên bản của Internet Explorer hỗ trợ chính thức.)

Demo

Lưu ý: Trước khi thực hiện hãy sao lưu mẫu blogger lại để dự phòng.   

Đă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> .

/* ----- www.vinh.co.cc 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; }
/* ----- www.vinh.co.cc CSS END------ */

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

<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>Blogger How to Tips</h2>
<span><em>Get All Blogger and Blogspot Related Tips !!! :) </em></span>
<p>Visit now : <a href='http://blog.vinh.co.cc/'>http://blog.vinh.co.cc/</a> and learn ... <br/><a href='http://blog.vinh.co.cc/'>Blogger How To</a> | <a 
href='http://blog.vinh.co.cc/'>Blogspot How To</a></p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({ 
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Ih7jBPbIw5eETssPnqI2TG7Hi94yoLbQg1e3PHGbxZCDOfQiYtyhhWqz-aeEy8zntFnfq-APf9_v2q1KHqmYFzJK2-TSsnDEGblczDeILoQDzv5Rhvz1bb95rSMhNSaSDnF8jPGnkgTp/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider 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: http://slidenote.info/download/jquery.slidenote.zip

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

Quốc Vịnh (theo: bloghowtotips)