Iris Tips
Iris TipsHow to create a Changelog for website
Nếu bạn thường xuyên sử dụng trang Jsfiddle để làm demo cho các thủ thuật thì bạn sẽ để ý thấy có 1 icon nhỏ màu đỏ nằm cạnh bên logo. Khi nhấp vào đó nó sẽ hiện lên một thoại hiển thị những thông báo, thay đổi trên website. Hôm nay Iris Tips sẽ chia sẻ cho các bạn cách làm biểu tượng thông báo y như vậy trên chính website của mình.
Cách thực hiện
1Vào trang Headway vào tạo cho mình một tài khoản.2Kế tiếp bạn nhấn vào Setting như hình bên dưới
3Chọn tab thứ 3 Widget bạn sẽ tìm thấy được ID tài khoản của mình. Hãy ghi nhớ nó vì chúng ta sẽ cẩn ở các bước sau.
4Trở lại Blogger, vào Mẫu >> Chỉnh sửa HMTL và dán đoạn code bên dưới trước thẻ </body>
<script>
var HW_config = {
selector: ".title",
account: "XXXX" // your account ID
};
</script>
<script src='//cdn.headwayapp.co/widget.js'/>
<style type='text/css'>
#HW_badge_cont{position:absolute!important;top:-5px;right:50px;}
</style>Chỉnh sửa:
aXXXX thành ID Headway bạn nhận được ở bước 3.
b.title thành class hoặc ID bạn muốn xuất hiện hiện biểu tượng thông báo, ở đây Iris Tips sẽ cho xuất ở tiêu đề website.
cCuối cùng là chỉnh lại vị trí cho phù hợp với website của bạn trong thẻ style.
5Để viết một Changelog mới bạn cần click vào + New changelog. Bạn cũng có thể gắn các thẻ vào changelog như Update, New, Fix...
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by Iris Tips
Ad giải thích kĩ hơn chỗ CSS selector đi ad?!
Trả lờiXóaBạn vào Mẫu >> Chỉnh sửa HTML để xác định vị trí đặt changelog dựa vào class(.class) hoặc ID (#ID) trong cấu trúc template của bạn. Hoặc bạn có thể nhấn Ctrl + Shift + I trực tiếp trên website để xác định.
XóaNhư ví dụ trên bài viết là đặt cạnh tiêu để blog, vào Mẫu >> Chỉnh sửa HTML ta sẽ được class ".title"
http://imageshack.com/a/img924/1479/cYoWbO.png
Ad có thể giúp em chỉnh sửa code để chèn vào widget "Có gì mới hôm nay" trên website http://www.tailieudaihoc.com không ạ? Sẵn tiện cho em hỏi sao website có mấy chỗ nó không load hình được vậy ạ?
XóaBlog của bạn có thể thử thay .title trong đoạn code hướng dẫn thành #logo_blog hoặc #header-inner xem nhé.
XóaMình xem qua trên website bạn, không hiên ảnh bạn có thể thử khắc phục theo các cách:
1. Đăng ảnh với kích thước gốc (s1600).
2. Nếu sử dụng dấu ngắt bài thì nên để 1 ảnh làm thumbnail rồi hãy ngắt, tức là dùng dấu ngắt sau hình ảnh đầu tiên của bài viết.
Sao changelog vẫn không thấy ạ?
Xóa<script>
Xóavar HW_config = {
selector: "#header-inner",
account: "yBOnZx"
};
</script>
<script src='//cdn.headwayapp.co/widget.js'/>
<style type='text/css'>
#HW_badge_cont{position:absolute!important;top:-5px;right:-20px;}
</style>
Bạn dùng đoạn code trên mình đã fix riêng cho template + ID của bạn.
Bạn có thể xem thêm demo tại link bên dưới.
http://irisdeveloper.blogspot.com/
Mình tạo rồi mà nó k hiện :(
Trả lờiXóaChèn ở 1 số class rồi mà vẫn k thấy gì :(
Bạn có thể xem giúp mình ở demo này.
Vì blog chính dùng js chống ctrl+u các kiểu rồi nên k view source ra đc.
https://testingblog81xx.blogspot.com/
Bạn thử thay chỗ selector lại thành ID #header-inner
XóaBạn có thể xem các cmt ở trên mình có hướng dẫn cụ thể rồi đó bạn.