68 Kopakolong, Thống nhất, TP.Kon Tum 600000

14.349171, 108.007778

Chia Sẻ Code Trình Phát Âm Nhạc Cho Website Blog Cục Đẹp

Để blog/website của bạn trở nên sinh động, đẹp mắt, thì nhạc là môt yếu tố vô cùng quan trọng và không thể thiếu. Tuy nhiên đôi khi cũng chính vì nó..

Code Trình Phát Âm Nhạc Cho Website Blog

Code Trình Phát Âm Nhạc Cho Website Blog

Bộ code âm nhạc trên website blog phải nói là đẹp, làm cho website blog của bạn trở nên chuyên nghiệp hơn, một phần cũng là giải trí âm nhạc trong thời gian đọc blog và hôm nay Admin VeoSpot chia sẻ bộ code âm nhạc trên website....

Thông tin và hướng dẫn.

Để blog/website của bạn trở nên sinh động, đẹp mắt, thì nhạc là môt yếu tố vô cùng quan trọng và không thể thiếu. Tuy nhiên đôi khi cũng chính vì nó trang web của bạn load lâu hơn! Đa phần, khi chúng ta chèn nhạc vào blog/website đều cần đến bên thứ 3 để thực hiện (với những đoạn JS nặng nề làm ảnh hưởng nghiêm trọng đến tốc độ load). Điều này, sẽ chấm dứt ngay nếu bạn sử dụng trình phát nhạc tùy chỉnh bên dưới =)) 

Code này được mình rip bên 0286blog! Sử dụng hoàn toàn là CSS & HTML (nếu bạn biết chút về css thì có thể tùy biến theo ý bạn) 

Copy toàn bộ code phía dưới => Bố cục => Thêm tiện ích => HTML/JavaScript => Dán code => Lưu => Xong !
<!-- Trình Phát Nhạc -->
<style>
@import url(https://fonts.googleapis.com/css?family=Lobster|Roboto:400,400i,400b|Satisfy&subset=latin-ext,vietnamese);
@import url(//cdn.jsdelivr.net/gh/ngylduy/font-awesome@8612653/css/all.min.css);
@import url(//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
</style>
<style>
.trmh img{width:186px;height:auto;}
#snow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEqNjMrKpiOzmQ5kk9RoHMkQZPqGEyvjiwSYcS3FXchYIR-NU1NBsUVjXumN6kwusyy-uvgMhjq413QS7uD9HO7Jhvg8Qq9JwdG-2EYGs5NiGm062fNfPmbMf5djuzvsw7rUOOsA6op4/s1600/s1.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx79bxYGKakYldFGd8QROtXfuTB5oRfTpM4SEKdKpvpx_sbED46-qrqhyz8D7uGRk5-uyFN22j9XQbSHFL6snwYbTCaSVqgTCS5bUzPstv5o1jBw4eer_W6Mga2ZnPT-6BiQQcc8pD20I/s1600/s2.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrPdyoQvhVZs8PqQaGi6ONY4Ue6DGBL2Rh5PfB9w1qZYK3rKyqXaaf0aisNSTgpzgOs1Ik3PgbT3s3nspo-_na4C1xorlmKHR1cwhQQ_kXVivgr7BucHQAbYkCJ9JWQf9oJCwxD1jWmoA/s1600/s3.png);height:100%;left:0;top:0;max-width:700px;margin:0 auto;z-index:1;-webkit-animation:snow 15s linear infinite;-moz-animation:snow 15s linear infinite;-ms-animation:snow 15s linear infinite;animation:snow 15s linear infinite}@keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:500px 1000px,200px 400px,-100px 300px}}@-moz-keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:400px 1000px,200px 400px,100px 300px}}@-webkit-keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:500px 1000px,200px 400px,-100px 300px}}@-ms-keyframes snow{0%{background-position:0 0,0 0,0 0}50%{background-position:500px 500px,100px 200px,-100px 150px}100%{background-position:500px 1000px,200px 400px,-100px 300px}}.trmh:hover{transition:all .4s;transform:translateY(-4px);background:#5f61ff;background:linear-gradient(132deg,rgba(95,97,255,1) 0,rgba(119,5,204,1) 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f61ff",endColorstr="#7705cc",GradientType=1);color:#eee}.trmh{position:relative;background:linear-gradient(135deg,rgba(95,97,255,1) 10%,rgb(137,48,204) 100%);box-shadow:0 8px 60px -10px rgba(13,28,39,.6);border-radius:12px;text-align:center;color:white;font-size:18.5px;text-shadow:-.5px .5px 0 grey;line-height:1.65em;padding-left:20px;padding-right:20px;font-family:"Roboto",sans-serif;padding-top:35px;padding-bottom:35px;font-weight:400;max-width:700px;margin:0 auto;margin-bottom:50px}@media screen and (max-width:767px){.trmh{font-size:1.1em;line-height:1.55em;padding-left:10px;padding-right:10px;padding-top:30px;padding-bottom:30px}.bookmark_2{padding:15px 0!important}}@media screen and (max-width:480px){.trmh{font-size:1em;padding-left:10px;padding-right:10px;padding-top:25px;padding-bottom:25px}}
</style>
<div class="trmh">
<div id='snow'>
<img alt="Nếu như ngày đó" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipp9url1i0qYu4HFn7KTumXKdKEK8ra8dDCUO_1A3ntAPJ50st-Ooxr3RmqsMp2p5vxWLS2vKq0oVATrdg52b5yBJ6wkLDZ-mXLQ6AHcpd-zo7U8aaRsTD10c1O53e36RW6haAGPpxcEo/s1600/nld-neu.png" />
<br/>
Ngày ấy anh ngỏ lời
<span style="color: yellow;text-shadow: -1px 1px 0 grey">
 <span class="glitch2"><i class="fal fa-heartbeat"></i></span>
 <span class="glitch1"> thương và yêu</span>
</span>
đậm sâu với em, em có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.<br/>
<span style="color: #efefef">Nếu ngày ấy anh là chàng trai mà em ngày đêm ước ao, ..., thì giờ đây anh đã có câu chuyện thật đẹp...</span>
<br/>
<br/>
<i class='fas fa-volume' onclick='document.getElementById(&apos;audio2&apos;).play();' style='height: 35px;width: 35px;line-height: 22px;border: 1px yellow dashed;cursor: pointer;color:yellow;background:rgba(0,0,0,.1);padding:7px 7.7px;border-radius:100%' title='hát'>
<audio id='audio2' preload='none'>
 <source src='https://drive.google.com/uc?export=download&amp;id=1ZWdb7Z2Odn_ylwAv4P_a_4LCILTBVR13' type='audio/mpeg'></source>Trình duyệt không hỗ trợ phát âm thanh
</audio>
</i>
</div>
</div>
<!-- Kết Thúc Trình Phát Nhạc -->
Trên đây là toàn bộ code & hướng dẫn tạo trình phát nhạc cho blog/website. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới (hoặc tại đây). Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!
Xem thêm: Bộ Thẻ Meta SEO Chuẩn Đầy Đủ Mới Nhất Dành Cho Blogger (Blogspot)
Chúc bạn thành công!
Nguồn code: Anh Đức