Cách tạo slide ảnh không cần CSS cho WordPress

Posted on by mtoplistChuyên mục:Top List

Cách tạo slide ảnh không cần CSS cho WordPress: WordPress là một hệ thống xuất bản blog viết bằng ngôn ngữ lập trình PHP và sử dụng MySQL database. WordPress là hậu duệ chính thức của b2/cafelog, được phát triển bởi Michel Valdrighi. Cái tên WordPress được đề xuất bởi Christine Selleck, một người bạn của nhà phát triển chính Matt Mullenweg

Theme miễn phí dành cho WordPress hiện nay rất nhiều chưa kể đến một số theme bản quyền được chia sẻ miễn phí tràn lan trên Internet. Tuy nhiên đôi khi các theme đó sẽ thiếu đi một số cái mà người tạo ra nó cố tình ẩn nó đi.

Điển hình như slide ảnh chẳng hạn, trên những bản Demo thì nó hiển thị và rất đẹp trên trang chủ. Nhưng đối với bản free thì nó sẽ không có chức năng này. Hôm nay mình sẽ chia sẻ cho bạn cách tạo slide ảnh cho những người không chuyên như mình chẳng hạn

Cách tạo slide ảnh không cần CSS cho WordPressCách tạo slide ảnh không cần CSS cho WordPress

Cách tạo slide ảnh không cần CSS cho WordPress

Slide này mình đang dùng cho một BLog của mình nhìn nó rất giống với slide của taiwebs đang dùng. Trong slide mình đã chèn cả link bài viết ở các ảnh khi bạn bấm vào slide nào thì nó sẽ nhảy sang bài viết của slide đấy. Ở đây mình demo chỉ có 3 slide các bạn muốn thêm thì tự thêm vào nhé.

Đầu tiên: Các bạn copy đoạn code sau vào chỗ bạn cần hiển thị nhé, theme mình đang dùng nó là theme miễn phí nó có thêm widget ở đầu trang chủ nên mình chèn vào đấy luôn.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #FF0000;
  font-size: px;
  padding: 0px 0px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 2px;
  padding: 5px 5px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 5 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <a href="https://downmienphi.top/kmspico-activator-for-windows-ms-office.html" target="_self"> 
  <img src="https://downmienphi.top/wp-content/uploads/2020/05/KMSpico-kich-hoat-windows-va-office-vinh-vien.jpg" style="width:100%">
  </a>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <a href="https://downmienphi.top/ccleaner-pro.html" target="_self"> 
  <img src="https://downmienphi.top/wp-content/uploads/2020/05/ccleaner-pro-full-key-download.jpg" style="width:100%">
  </a>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <a href="https://downmienphi.top/internet-download-manager.html" target="_self"> 
  <img src="https://downmienphi.top/wp-content/uploads/2020/05/idm-full-key.jpg" style="width:100%">
  </a>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>

</body>
</html>

Các bạn tìm đoạn mã

  • a href: thay bằng link bài viết bạn cần chèn vào slide
  • img src: thay bằng link ảnh bạn muốn hiển thị trên slide nhé

Đơn giản chỉ vậy thôi, vì mình không phải chuyên code nên không biết code có chuẩn không nhưng mình thêm vào thấy chạy không lỗi lầm gì. Nếu thấy phù hợp thì các bạn dùng nhé.

Và đây là DEMO của em nó : Demo

Xem thêm :Tại Đây
Blog Download Template Blogspot : Tại Đây
Blog Download Phần Mềm Free : Tại Đây
Blog Download Acapella : Tại Đây
Trang mã hóa URL : Tại Đây
Link liên kết : Downmienphi.top

mtoplist