Trang chủ
Blogger

Tiện ích thanh trượt bài đăng ngẫu nhiên trên Blogger

Tiện ích thanh trượt bài đăng ngẫu nhiên cho tất cả các loại mẫu blogger
·
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào đây để chuyển đến liên kết
Chúc mừng! Liên kết được tạo

Xin chào mọi người, nhân dịp này mình sẽ chia sẻ một widget bài viết ngẫu nhiên.

Tôi đã sử dụng chủ đề Giao diện người dùng trung bình khá lâu kể từ phiên bản 1.3, nếu tôi không nhầm thì thanh trượt này đã có từ phiên bản 1.5 hoặc 1.4 nhưng tôi chưa bao giờ kích hoạt hay sử dụng nó.

Tiện ích thanh trượt bài đăng ngẫu nhiên trên Blogger
Tiện ích thanh trượt bài đăng ngẫu nhiên trên Blogger

Trong bài đăng này, tôi cũng sẽ chia sẻ một điều tương tự nhưng nó có thể được áp dụng cho tất cả các loại mẫu blogger, không chỉ UI trung bình.

Các tính năng tôi đã thêm là các nút tiếp theo và trước đó và nếu bạn sử dụng thiết bị di động, bạn cũng có thể sử dụng thao tác vuốt sang trái và phải để xem bài đăng trước hoặc bài đăng tiếp theo.

Nếu bạn sử dụng mẫu Median UI phiên bản 1.7 thì phải loại bỏ CSS của thanh trượt để không xung đột, đặc biệt là các hiệu ứng chuyển tiếp hoạt hình, vì ở đây chúng tôi sử dụng JavaScript để làm cho thanh trượt hiển thị nội dung tiếp theo hoặc trước đó.

Cách thực hiện

Cách thực hiện các bạn không cần biết nhiều về những kiến thức HTML, CSS hoặc JS vì mình đã code sẵn cho các bạn. Các bạn cần làm theo chính xác các bước hướng dẫn của mình là được.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

/* Random post slider widget by Giahuy.net */
.slideB {
--indicator: #ce2c90;
--sliderBd-radius: 4px;
--sliderRatio: 56.25%;
}
  
@-webkit-keyframes fade{from{opacity:.4;}to{opacity:1;}}
@keyframes fade{from{opacity:.4;}to{opacity:1;}}
.slider .item{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;}
.slideI .i.active{width:10px;background-color:var(--indicator);}
.slideB .next,.slideB .prev{position:absolute;top:40%;font-size:2.5em;border-radius:50%;user-select:none;border:1px solid #e4e3e1;background:#fffdfc;opacity:.5;padding:0 20px 5px;outline:0;}
.slideB .next:hover,.slideB .prev:hover{opacity:.9;}
.slideB .prev{left:10px;}
.slideB .next{right:10px;}
.slideB{position:relative;border-radius:var(--sliderBd-radius);overflow:hidden;}
.slideB:hover .slideI svg{opacity:1;visibility:visible;}
.slideI.active svg .pause{display:block;}
.slideI.active svg .play,.slideI svg .pause{display:none;}
.slider.no-items~.slideI{display:none;}
.slideI .i{width:4px;height:4px;border-radius:10px;background-color:rgb(0 0 0 / 15%);transition:width .1s ease,background-color .1s ease;}
svg{width:12px;height:12px;fill:currentColor;}
.slideI svg{right:0;}
.slideI svg{position:absolute;top:0;opacity:0;visibility:hidden;transition:opacity .1s ease .4s,visibility .1s ease .4s;}
.slider{position:relative;width:400%;}
.slider >*{flex-shrink:0;width:calc(100% / 4);}
.slider .item{display:none;position:relative;border-radius:var(--sliderBd-radius);overflow:hidden;}
.slider .img{display:block;padding-top:var(--sliderRatio);color:#d9e2f0;background-color:#f9f9fb;background-position:center;background-size:cover;background-repeat:no-repeat;}
.slider .cap{display:block;position:absolute;left:0;bottom:0;right:0;padding:20px;padding-block-start:40px;background-image:linear-gradient(0deg,rgb(45 49 56 / 90%) 0%,rgb(45 49 56 / 50%) 60%,rgb(45 49 56 / 0%) 100%);}
.slideB >*{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;}
.slideB:hover .slider .cap{background-image:none;}
.slideB a:hover{filter:none;}
.slider .img{position:relative;border-radius:var(--sliderBd-radius);}
.slider .cap{background-image:linear-gradient(0deg,rgb(45 49 56 / 55%) 0%,rgb(45 49 56 / 22%) 60%,rgb(45 49 56 / 0%) 100%);border-radius:var(--sliderBd-radius);font-size:0.9em;line-height:1.2em;font-weight:600;text-shadow:0 2px 10px #272733,0 1px 1px rgba(10,10,10,.5);color:#f9f9fb;}
.slider .category{top:0;right:0;position:absolute;padding:10px;}
.slideB a.button{display:inline-flex;text-decoration:none;outline:0;border:0;padding:2px 10px;font-size:12px;border-radius:15px;color:#0e2045;background-color:#fffdfc;box-shadow:5px 5px 15px 0 rgb(0 0 0 / 10%);}
.slideI{display:flex;gap:5px;position:relative;height:12px;margin-block:5px calc(40px - 12px - 4px)) align-items:center;justify-content:center;margin-top:5px;}
@media screen and (max-width:640px){.slideB a.button{font-size:10px;padding:0 10px;}.slideB .next,.slideB .prev{font-size:1em;border-radius:50%;padding:0 10px 3px;}}
Đánh dấu Thông tin
--indicator: Màu chỉ báo dưới thanh trượt
--sliderBd-radius: Bán kính biên giới
--sliderRatio: Tỷ lệ hình thu nhỏ

Bước 6: Tiếp tục hãy thêm JavaScript sau ngay bên trên vào thẻ </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

<script>/*<![CDATA[*/
const ghSliderRandom = {
  feeds: 'https://www.giahuy.net',
  noImage: 'data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
  thumbnailSize: '1600',
  amount: '5',
  duration: '3000',
  auto: 'true',
  button: 'true',
  swipe: 'true',
  sharedBy: 'www.giahuy.net' // Credit do not removed
};

function sliderLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.giahuy.net/widget/js/slider-random.min.js';document.body.appendChild(script)}function sldDtcLazy(){sliderLoad(),localStorage.setItem("sliderJs","true")}var ghLdStorage=localStorage.getItem("sliderJs");if("true"!=ghLdStorage){var t=!1,e=!1;window.addEventListener("scroll",()=>{(0!=document.documentElement.scrollTop&&!1===t||0!=document.body.scrollTop&&!1===t)&&(sldDtcLazy(),t=!0,e=!0)},!0),window.addEventListener("click",()=>{!1===e&&!1===e&&(sldDtcLazy(),e=!0,t=!0)},!0)}"true"===ghLdStorage&&sliderLoad();
/*]]>*/</script>
Đánh dấu Thông tin
feeds: Địa chỉ blog của bạn.
noImage: Hình ảnh không có hình ảnh.
thumbnailSize: Kích thước thu nhỏ.
amount: Số bài viết.
duration: Thời lượng thanh trượt mili giây.
auto: Nếu đúng, thanh trượt sẽ tự động di chuyển nếu không thay đổi thành sai.
button: Nếu đúng, nút trước tiếp theo sẽ được hiển thị nếu không thay đổi thành sai.
swipe: Nếu đúng tiếp theo bạn có thể sử dụng thao tác vuốt nếu không thay đổi thành sai.

Bước 7: Tiếp tục đặt mã này vào nơi bạn muốn hiển thị thanh trượt, nó có thể ở tiêu đề hoặc bất cứ nơi nào bạn thích, vì mỗi mẫu có cấu trúc khác nhau nên bạn phải tự tìm vị trí.

<div class='slideB giahuyRandom'></div>

Bước 8: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Trên đây là hướng dẫn tiện ích thanh trượt bài đăng ngẫu nhiên.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé!

Chuyển đến liên kết
Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.