Cara Membuat Widget Slider Photo di Blog secara mudah

 Halo semuanya! Kali ini saya akan membagikan penggeser gambar atau penggeser spanduk otomatis menggunakan JavaScript murni. 

 penggeser gambar ini biasa digunakan di situs belanja online untuk mempromosikan produk baru agar pengguna dapat langsung melihatnya. 

, namun ada juga blog pribadi yang menggunakan jenis image slider yang biasanya digunakan untuk mempromosikan artikel. 

 Widget ini memiliki penggeser otomatis dan juga memiliki tombol Berikutnya dan Sebelumnya serta teks di bawah gambar. 

 untuk demo klik tombol di bawah ok yang ingin mencobanya mari kita lihat caranya. 

 pergi ke Blogger > Tema > Edit HTML >  salin css di bawah ini dan letkkan di atas kode ]]></b:skin>  > atau di atas kode </style> 

VIEW PREVIEW

Code :

.mySlides{display:none} .mySlides img {vertical-align:middle;width:100%} .wrap-dot{text-align:center;margin-top:10px} .slideshow-container{max-width:1000px;position:relative;margin:auto} .slideshow-container .prev,.slideshow-container .next{cursor:pointer;position:absolute;top:50%;padding:7px 15px;margin:-22px 5px 0 5px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:50%;user-select:none} .slideshow-container .next{right:0} .slideshow-container .prev:hover,.slideshow-container .next:hover{background-color:rgba(0,0,0,0.8)} .slideshow-container .text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center} .wrap-dot .dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease} .wrap-dot .dot.active{background-color:#f89000;width:30px;border-radius:20px} .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}} @media only screen and (max-width:300px){.slideshow-container .prev,.slideshow-container .next,.slideshow-container .text{font-size:11px}}

salin html di bawah ke depan dan letakkan di tempat Anda ingin menampilkan widget penggeser gambar, jika Anda ingin menampilkannya di atas halaman utama Anda dapat meletakkannya </header> di bawah dan membungkusnya <b:if cond='data:view.isHomepage'></b:if>

VIEW PREVIEW

CODE

<div class='slideshow-container'> <div class='mySlides fade'> <a href='Link Blog/Website kalian'> <img src='link Photo.jpg'/> <div class='text'>Caption Text</div> </a> </div> <div class='mySlides fade'> <a href='Link Blog/Website kalian'> <img src='Link Photo.jpg'/> <div class='text'>Caption Two</div> </a> </div> <div class='mySlides fade'> <a href='Link Blog/website kalian'> <img src='Link Photo.jpg'/> <div class='text'>Caption Three</div> </a> </div> <a class='prev' onclick='prevSlide()'>&#10094;</a> <a class='next' onclick='showSlides()'>&#10095;</a> </div> <div class='wrap-dot'> <span class='dot'></span> <span class='dot'></span> <span class='dot'></span> </div>

  salin javascript di bawah ini dan letakkan  kode ini </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika tidak lupa klik simpan 

VIEW PREVIEW

CODE

<script>/*<![CDATA[*/ var timeOut = 2e3, slideIndex = 0, autoOn = !0; function autoSlides() { timeOut -= 20, 1 == autoOn && timeOut < 0 && showSlides(), setTimeout(autoSlides, 20) } function prevSlide() { timeOut = 2e3; var e = document.getElementsByClassName("mySlides"), s = document.getElementsByClassName("dot"); for (i = 0; i < e.length; i++) e[i].style.display = "none", s[i].className = s[i].className.replace(" active", ""); --slideIndex > e.length && (slideIndex = 1), 0 == slideIndex && (slideIndex = 3), e[slideIndex - 1].style.display = "block", s[slideIndex - 1].className += " active" } function showSlides() { timeOut = 2e3; var e = document.getElementsByClassName("mySlides"), s = document.getElementsByClassName("dot"); for (i = 0; i < e.length; i++) e[i].style.display = "none", s[i].className = s[i].className.replace(" active", ""); ++slideIndex > e.length && (slideIndex = 1), e[slideIndex - 1].style.display = "block", s[slideIndex - 1].className += " active" } autoSlides(); /*]]>*/</script>

 ok jadi kali ini saya bisa membuat widget  slider gambar, semoga bermanfaat dan terima kasih telah berkunjung.

Think a Head

subcriber • vidio

SUBSCRIBE •••

subscribe youtube channel saya juga ya teman terima kasih