Thứ Bảy, 27 tháng 8, 2022

[Blogger] Vietnam Flag Preloader For Blogger

 Hi mọi người, hôm nay tình cờ mình lượt internet để tìm kiếm giao diện blogger, và thủ thuật mới để chia sẽ cho mọi người cùng biết và mình tìm thấy một thủ thuật mới cũng khá hay, nó là thủ thuật tạo trang chờ tải trang cho blogspot hình ảnh lá cờ Việt Nam cũng khá hay nên mình chia sẽ cho mọi người cùng biết luôn nhé.

Chúng ta bắt đầu nhé.

Bài viết này mình sẽ chia sẻ cho các bạn cách thêm hiệu ứng chờ tải trang hay còn gọi là preload cho blog hoặc trang web của các bạn. Bài viết này đặc biệt là hiệu ứng chờ tải trang có dạng cờ đỏ sao vàng và búa liềm nhằm mục đich hưởng ứng ngày lễ Quốc khánh Việt Nam ngày 2 tháng 9 và cũng có thể sử dụng cho ngày 30 tháng 4.

Hiệu ứng chờ tải trang thì cũng không có gì là mới mẻ cả và hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau mà một trong những nguyên do cần đưa hiệu ứng này vào là che đi phần khuyết điểm trong thời gian tải trang, bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước...

Hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cũng vậy mục đích đầu tiên là để tôn vinh ngày Quốc khánh Việt Nam cũng như những ngày lễ của dân tộc Việt Nam, mục đích còn lại là để che đi những khuyết điểm trong thời gian tải trang hiểu một cách đơn gian là nó sẽ che đi toàn bộ phần hiển thị của trang web và hiệu ứng sẽ ẩn đi khi toàn bộ trang web được tải xong. Thủ thuật này mình sẽ chỉ sử dụng HTML, CSS và JavaScript nên nó không ảnh hưởng gì nhiều đến tốc độ tải trang của blog hay trang web hiện tại nên các không phải băn khoăn.

Thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger

Bước 1: Chèn đoạn CSS dưới đây vào vị trí lưu trữ CSS của bạn, đối với Blogger thì có thể là ở trong cặp thẻ <b:skin>...</b:skin> hoặc <style>...</style>
.pageLoading{z-index:999;position:fixed;top:-30%;right:-30%;bottom:-30%;left:-30%;display:flex;align-items:center;justify-content:center;background:#fff;transition:all .7s ease}
.pageLoading.done{visibility:hidden;opacity:0}
.pageLoadingC{position:absolute;display:block;background:#db2017;height:100%;width:100%;transition:all .7s ease}
.pageLoading svg{width:0;height:0;visibility:hidden;opacity:0;fill:#ffff00;transition:all .7s ease;z-index:1}
.pageLoading svg.beatAnimation{animation:beat 2.3s linear infinite}
.pageLoading svg.active{visibility:visible;opacity:1;width:60px;height:60px}
.pageLoading.loaded svg.active.starSvg{width:auto;height:15%}
.pageLoading.loaded svg.active.socialistSvg{width:auto;height:12%}
@keyframes beat{0%,50%,100%{transform:scale(1, 1)}30%,80%{transform:scale(0.72, 0.75)}}

Bước 2: Tiếp tục tìm đến thẻ và chèn code HTML dưới đây ngay phía dưới thẻ <body> đó.
  <div class='pageLoading'>
  <div class='pageLoadingC'></div>
  <svg class='starSvg active beatAnimation' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/></svg>
  <svg class='socialistSvg' viewBox='0 0 399.99 364.75' xmlns='http://www.w3.org/2000/svg'><path class='cls-1' d='M395,323.33l-48.7-47c36.83-40,44.46-98.87,26-153-.05-.16-.11-.33-.17-.49q-.81-2.34-1.68-4.67c-.06-.18-.13-.36-.2-.54-1.26-3.35-2.64-6.68-4.11-10-.11-.25-.22-.51-.34-.76-.69-1.53-1.39-3-2.12-4.56l-.15-.32c-.8-1.64-1.62-3.29-2.47-4.92l-.27-.5c-.74-1.42-1.5-2.82-2.28-4.22l-.51-.92q-2.64-4.66-5.54-9.22l-.63-1q-1.2-1.84-2.45-3.68c-.21-.31-.41-.62-.63-.93-1-1.48-2.05-2.94-3.11-4.4l-.37-.49q-1.41-1.91-2.86-3.79l-.89-1.14q-1.39-1.77-2.83-3.52c-.2-.24-.39-.48-.59-.71-1.14-1.38-2.3-2.73-3.49-4.08l-.87-1q-1.41-1.58-2.85-3.12c-.35-.38-.69-.75-1-1.12-1.24-1.32-2.49-2.62-3.78-3.9-2.69-2.7-5.44-5.29-8.22-7.76C292.71,19.37,264.14,6,235.24,1,233.1.62,231,.29,228.81,0a2.09,2.09,0,0,0-.71,0,2,2,0,0,0-.6.25,2.07,2.07,0,0,0-.91,1.58,1.94,1.94,0,0,0,.83,1.72l.2.14.89.63,0,0c1.13.8,2.37,1.69,3.69,2.66h0C243.06,14.94,260,28,274.9,43c26.18,26.17,43.9,55.74,52.76,85l-.32-1c9.18,29.64,9.26,59-.21,84.09l0,.08a102.06,102.06,0,0,1-4.59,10.37c-.06.12-.12.24-.19.36-.48.94-1,1.86-1.49,2.78l-.4.71c-.47.83-1,1.65-1.45,2.47l-.44.72c-.57.91-1.15,1.82-1.75,2.72l-.2.31c-.68,1-1.38,2-2.1,3l-.4.54c-.58.78-1.16,1.55-1.75,2.31-.25.31-.49.62-.74.92-.51.64-1,1.27-1.56,1.9l-.51.6L186.61,122.3c19.91-20.67,36.2-38.68,42-45.17a2.87,2.87,0,0,0,.54-3,2.81,2.81,0,0,0-.7-1,2.73,2.73,0,0,0-.53-.4c-3.52-2.1-8-4.52-12.82-7-16.32-8.51-37.44-18.32-45-21.79a4.56,4.56,0,0,0-1.19-.37,5.69,5.69,0,0,0-.83-.07,4.72,4.72,0,0,0-1.34.19,5,5,0,0,0-.64.25,4.6,4.6,0,0,0-1.17.76C158.13,50.7,151.28,57,144.57,63.37c-1.8,1.72-3.61,3.43-5.39,5.15q-6.31,6.06-12.35,12c-5.16,5.1-10.15,10.11-14.85,14.91l-3.1,3.17c-14.8,15.18-26.59,27.91-32.6,34.49L74.61,135a4.8,4.8,0,0,0-.24,6.16c15.57,19.75,33.73,36.83,40.85,43.29a4.78,4.78,0,0,0,6.29.11c11.29-9.42,23.63-20.85,35.83-32.73L271.4,269.68c-22.8,10.44-47.88,12.08-72.69,6.23l-1.32-.32c-19.15-4.72-38.11-13.89-55.69-26.91l-2.8-2.11c-1.85-1.43-3.69-2.91-5.51-4.42-.91-.76-1.81-1.52-2.71-2.3q-5.42-4.68-10.58-9.84l-1.69-1.7-1-1-.69-.69c-.31-.31-.63-.6-1-.87s-.67-.52-1-.76a12.32,12.32,0,0,0-3.33-1.56A12.08,12.08,0,0,0,109,223q-.6-.06-1.2-.06a12.83,12.83,0,0,0-2.4.22,12.67,12.67,0,0,0-5.55,2.59c-.32.27-.64.55-1,.86L80.35,247.22a47.78,47.78,0,0,0-5.87-3.71c-.74-.39-1.47-.74-2.19-1a20.66,20.66,0,0,0-3.14-1.05c-.38-.1-.76-.17-1.13-.23a12.57,12.57,0,0,0-1.8-.17c-.31,0-.62,0-.92,0a8.62,8.62,0,0,0-5.66,2.61,8.8,8.8,0,0,0-.65.72c-.09.11-.18.24-.26.35l-.29.39c-.11.17-.21.35-.31.52s-.1.17-.14.25-.21.44-.31.67a.61.61,0,0,0,0,.12,5.92,5.92,0,0,0-.27.81h0c-.9,3.22,0,7.05,2.3,11.27a7.44,7.44,0,0,1,.87,3.75v0a7.55,7.55,0,0,1-.47,2.44h0a7.54,7.54,0,0,1-.73,1.48.35.35,0,0,1-.05.08c-.12.19-.25.37-.39.55l-.13.17-.39.44-.16.17c-.18.18-.38.36-.58.53l-49.72,38h0c-.53.47-1,1-1.52,1.47-.16.16-.3.34-.46.51-.31.35-.62.69-.9,1s-.33.43-.49.64-.49.67-.72,1-.3.47-.45.7-.4.67-.59,1-.27.5-.4.75-.33.68-.48,1-.23.51-.33.77-.27.7-.39,1.06-.18.5-.26.76-.21.78-.3,1.17c-.06.22-.13.44-.17.67-.12.58-.22,1.17-.29,1.75,0,.3,0,.59-.07.88s0,.63-.06.94,0,.63,0,.94,0,.57,0,.85.06.64.1,1,.07.53.11.8.12.64.19,1,.13.5.19.75.18.63.29.95.17.46.26.7.25.62.39.93.22.42.33.62a15.48,15.48,0,0,0,2.76,3.82l13.91,13.91c7.35,7.34,20.43,5.86,28.45-3.23l38.21-49.77a7.74,7.74,0,0,1,9.54-2.08c6.16,3.23,11.45,3.79,15,.2,4.6-4.6,2.43-12-3.46-20.37l5.57-4.59a4.15,4.15,0,0,1,5.57.26l.82.83c55.09,55.08,129.06,69.6,189,36.84l51.23,52.95c6.59,6.82,17.77,6.63,24.83-.42l11.17-11.18C401.62,341.11,401.81,329.93,395,323.33Z'/></svg>
</div>
  

Bước 3: Tìm đến thẻ đóng </body> và chèn đoạn JavaScript dưới đây ngay phía trên nó.
  <script>/*<![CDATA[*/ 
  document.querySelector("html").style.overflow = "hidden"
  document.addEventListener("DOMContentLoaded", () => {
    setTimeout(() => {
    var pageLoading = document.querySelector(".pageLoading"),
    svg1 = document.querySelector("svg.starSvg"),
    svg2 = document.querySelector("svg.socialistSvg");
    svg1.classList.remove("beatAnimation"), pageLoading.classList.add("loaded"), setTimeout(() => { 
      svg1.classList.remove("active"), svg2.classList.add("active"), setTimeout(() => {
          pageLoading.classList.add("done"), pageLoading.addEventListener("transitionend", () => {
          	document.querySelector("html").style.overflow = "auto"
          	pageLoading.remove()
          })
        }, 2e3)
      }, 2e3)
    }, 2e3)
  });
/*]]>*/</script>
  

Vậy là xong, mình đã hướng dẫn các bạn cách thêm hiệu ứng chờ tải trang cờ đỏ sao vàng Việt Nam cho Blogger, demo các bạn có thể tại lại trang bài viết này để xem. Nếu bạn thấy bài viết hay và hữu ích hãy chia sẻ bài viết về trang Facebook cá nhân để lưu lại nhé. Chúc các bạn vui vẻ!
Chúc các bạn thành công.
Theo : NTDBLOG.COM

7 nhận xét:

ADM HUNGQB ™ nói...

(y) chất lượng không mọi người :D

MOD HUNGQB ™ nói...

đẹp đó e (y) sẽ áp dụng cho blog của a :D

Nặc danh nói...

Nice tips

Unix Coders nói...

(y) nhìn trên mobile thấy cũng hay, nhưng nó không phải là tải trang mà là có thời gian mặc định load trang flag này.

Hoàng Hải nói...

ở cái trang flag này nhìn hay nè, kiểu như tạo trang chờ tải trang web vậy nhưng nó lại không phải vậy, vì a thấy blog e tải xong rồi nhưng nó chưa chuyển hướng mà nó vẫn tải xong đã mới hiện :D

ADM HUNGQB ™ nói...

(y) đúng rồi a, nó chỉ là giao diện làm đẹp khi vào blog đó a, chứ nó k giúp gì cho blog a. :D

ADM HUNGQB ™ nói...

(y) chuẩn luôn a :D