Tạo hộp nguồn bài viết (source) dưới chân bài viết

Để nhắc nhở người copy bài viết thì việc để lại URL bài viết dưới chân bài viết là một cách khá hiệu quả và được nhiều blog lớn áp dụng, hôm nay mình sẽ giúp các bạn làm điều này với Javascript.

Xem demo tại Codepen hoặc ở dưới bài viết này

#Cách thực hiện

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ <div class='post-footer'> . Thường là thẻ thứ hai

4. Dán code dưới vào dưới thẻ vừa tìm

<div id="source" title="Nguồn bài viết">Nguồn</div>
<script type="text/javascript">
  document.getElementById('source').innerHTML=window.location.protocol+'//'+window.location.hostname+window.location.pathname;
</script>
<style type="text/css">
  #source{border: 1px solid #cc0000;
    -moz-border-radius: 05px;
    -webkit-border-radius: 05px;
    -ms-border-radius: 05px;
    -o-border-radius: 05px;
    border-radius: 05px;
    padding: 02px 02px 2px 02px;
  margin:1px;
  line-height: 20px;
  font-style: italic;
  font-family:arial;
  overflow: auto;
  display:block    
 }
</style>

5. Lưu mẫu lại và kiểm tra kết quả

Nguồn