Xin chia sẽ cho mọi người cách tạo nút download hiển thị thông tin file trên blogspot
 |
| Tạo nút download hiển thị thông tin file trên blogspot |
Bước 1: copy toàn bộ css dưới đây
<style type='text/css'>
.codepro-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.codepro-icon.codepro-download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}.codepro-downloadInfo{max-width:500px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:6px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}.codepro-downloadInfo a,.codepro-downloadInfo .codepro-fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}.codepro-downloadInfo a{background-color:#1e1e1e;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;text-decoration:none}.codepro-downloadInfo a:after{content:attr(aria-label)}.codepro-downloadInfo .codepro-fileType:before{content:attr(data-text)}.codepro-downloadInfo .codepro-fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}.codepro-downloadInfo .codepro-fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codepro-downloadInfo .codepro-fileSize{line-height:1.4em;font-size:12px;opacity:.8}.darkMode .codepro-downloadInfo{background-color:#2d2d30;border:0}.darkMode .codepro-downloadInfo .codepro-fileType{background-color:#1e1e1e}@media screen and (max-width:480px){.codepro-downloadInfo{padding:12px}.codepro-downloadInfo a{width:50px;height:50px;border-radius:10px}.codepro-downloadInfo a:after{display:none}.codepro-downloadInfo a .codepro-icon{margin:0}}
</style>
Bước 2: dán đoạn code trên trước thẻ đóng </body>Bước 3: trong quá trình soạn thảo, để chèn nút download này bạn hãy chuyển qua chế độ html và chép đoạn code này vào chỗ cần chèn. Nhớ chỉnh lại nội dung cho phù hợp với file download
<div class='codepro-downloadInfo'> <span class='codepro-fileType' data-text='mp4'></span> <div class='codepro-fileName'> <span>Pokemon.mp4</span> <span class='codepro-fileSize'>15 GB</span> </div> <a aria-label='Download' href='dán link vô đây'><i class='codepro-icon codepro-download'></i></a> </div>Okiii vậy là xong, chúc các bạn thành công
Nguồn : Code.Pro.Vn
Được Chia Sẻ Lại Bởi : Nguyễn Thanh Quốc (Site)