• Speedtest Internet
  • Test Code
  • Nén CSS
  • Chuyển đổi định dạng Webp
  • Mã Hóa URL
  • Shorturl
  • Login
Blog thủ thuật máy tính f4vnn
No Result
View All Result
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • LYRICS
  • Trang chủ
  • TIPS COMPUTER
    • WINDOWS
    • SERVER
    • OFFICE
    • SOFTWARE
    • GAME
    • INTERNET
    • SECURITY
  • TIPS MAC – IOS
  • TIPS MOBILE
  • TIPS SOURCE
    • TIPS WORDPRESS
    • TIPS BLOGSPOT
    • OTHER SOURCE
  • TIPS OTHER
  • REVIEWS
  • LYRICS
No Result
View All Result
Blog thủ thuật máy tính f4vnn
Home Tips Source

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

Blog Tips f4vnn by Blog Tips f4vnn
05/08/2021
Reading Time: 5 mins read
# QUÀ TẶNG VÀ KHUYẾN MẠI
  • Đăng ký tên miền tên miền .com chỉ 199k: TẠI ĐÂY
  • Hosting giá rẻ chất lượng cao chỉ 49k/tháng: TẠI ĐÂY
  • Cloud VPS giá rẻ chất lượng cao chỉ 120k/tháng: TẠI ĐÂY
  • Website giá rẻ chỉ 2.388k: TẠI ĐÂY

  • 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 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

    Tags: Cách tạo slide ảnhCách tạo slide ảnh không cần CSSCách tạo slide ảnh không cần CSS cho Wordpresschèn slide ảnh vào wordpresscode tạo slide ảnh cho webslide ảnhslide ảnh cho Wordpressslide ảnh không cần CSS cho Wordpresstạo slide ảnh cho wordpress không cần plugintạo slide ảnh trong wordpresstạo slide trong wordpress
    ShareTweetPin1Share1ShareShare

    Related Posts

    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    10/01/2023
    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    06/01/2023

    Chia sẻ Theme WordPress Wap Game chuyển từ html sang wordpress cực mượt

    14/12/2022

    Hướng dẫn cách sửa lỗi Another Update Is Currently In Progress trên WordPress

    21/08/2022

    Chia sẻ giao diện làm trang web download dành cho wordpress

    15/06/2022

    Hướng dẫn cách cài đặt WordPress trên Windows 10

    06/12/2021
    Next Post
    Quản lý thông báo Windows Defender trên Windows 10

    Quản lý thông báo Windows Defender trên Windows 10

    Cách cài đặt PowerShell 7.0 trên Windows 10

    Cách cài đặt PowerShell 7.0 trên Windows 10

    ☊ BLOG NGHE NHẠC DJ

    slide-dj24h

    Receive updates of our latest tutorials.

    By signing up, you agree to our Privacy Policy.

    Facebook logoTwitter logoLinked-in logo

    ✪ TÌM KIẾM NHANH TRÊN GOOGLE

    Mẹo để tìm kiếm nhanh cách sửa lỗi bạn vào Google gõ tên lỗi + từ khóa f4vnn!

    ☷ BÀI VIẾT MỚI NHẤT

    7 tiện ích mở rộng ChatGPT cho Chrome bạn có thể sử dụng

    7 tiện ích mở rộng ChatGPT cho Chrome bạn có thể sử dụng

    02/02/2023
    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    Hướng dẫn thêm tìm kiếm theo danh mục cho wordpress không cần Plugin

    10/01/2023
    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    Hướng dẫn cách chuyển tên sản phẩm thành h3 trong WooCommerce

    06/01/2023
    Hướng dẫn sửa lỗi System Idle Process chiếm CPU cao trên Windows 11

    Hướng dẫn sửa lỗi System Idle Process chiếm CPU cao trên Windows 11

    23/12/2022
    Chia sẻ Theme WordPress Wap Game chuyển từ html sang wordpress cực mượt

    Chia sẻ Theme WordPress Wap Game chuyển từ html sang wordpress cực mượt

    14/12/2022

    ☷ BÀI VIẾT XEM NHIỀU

    • Chuyển từ Google Slides sang PowerPoint và ngược lại 35.2k views
    • Làm thế nào để dừng Fixing Stage 1 trong Windows 10 30.3k views
    • Sửa lỗi Run-time error 1004 không thể chạy Macro trong Excel 17.6k views
    • Sửa lỗi A JavaScript error occurred in the main process trên Windows 10 16.6k views
    • Cách sửa lỗi Runtime Error 1004 trong Microsoft Excel 13.6k views
    • Cách sửa lỗi Bad Image 0xc000012f trong Windows 10 11.9k views
    Blog thủ thuật máy tính f4vnn

    © 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

    Giới thiệu & Bạn bè

    • Chính sách
    • Quy định
    • About Us
    • DMCA
    • Nhạc DJ24h
    • Truyện Ma
    • Vocal

    Follow Us

    No Result
    View All Result
    • Trang chủ
    • TIPS COMPUTER
      • WINDOWS
      • SERVER
      • OFFICE
      • SOFTWARE
      • GAME
      • INTERNET
      • SECURITY
    • TIPS MAC – IOS
    • TIPS MOBILE
    • TIPS SOURCE
      • TIPS WORDPRESS
      • TIPS BLOGSPOT
      • OTHER SOURCE
    • TIPS OTHER
    • REVIEWS
    • LYRICS

    © 2021 Blog Tips F4vnn - Chia sẻ thủ thuật công nghệ.

    Welcome Back!

    Login to your account below

    Forgotten Password?

    Retrieve your password

    Please enter your username or email address to reset your password.

    Log In