Tạo nút Download hiển thị thông tin file trên blogspot

 

Bài viết này sẽ hướng dẫn bạn tạo nút download hiển thị thông tin như bên dưới

Doraemon.mp4 10 GB

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>Doraemon.mp4</span>
		<span class='codepro-fileSize'>10 GB</span>
	</div>
	<a aria-label='Download' href='dán link vô đây'><i class='codepro-icon codepro-download'></i></a>
</div>

Vậy là xong, chúc các bạn thành công

Nguồn: code.pro.vn