salin dibawah ini letakkan diatas /b:skin
.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}}
lanjut html dibawah ini dan letakkan dimana kalian ingin menampilkan widget image slider jika ingi tampil diatas homepage bisa letakan diatas /header dan dibungkus dengan <b:if cond='data:view.isHomepage'></b:if>
<div class='slideshow-container'>
<div class='mySlides fade'>
<a href='#'>
<img src='https://www.w3schools.com/howto/img_snow_wide.jpg'/>
<div class='text'>Caption Text</div>
</a>
</div>
<div class='mySlides fade'>
<a href='#'>
<img src='https://www.w3schools.com/howto/img_mountains_wide.jpg'/>
<div class='text'>Caption Two</div>
</a>
</div>
<div class='mySlides fade'>
<a href='#'>
<img src='https://www.w3schools.com/howto/img_nature_wide.jpg'/>
<div class='text'>Caption Three</div>
</a>
</div>
<a class='prev' onclick='prevSlide()'>❮</a>
<a class='next' onclick='showSlides()'>❯</a>
</div>
<div class='wrap-dot'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
lanjut letakkan diatas dibawah </header> dan dipasang degan di<b:if cond='data:view.isHomepage'></b:if>
<div class='slideshow-container'>
<div class='mySlides fade'>
<a href='#'>
<img src='https://www.w3schools.com/howto/img_snow_wide.jpg'/>
<div class='text'>Caption Text</div>
</a>
</div>
<div class='mySlides fade'>
<a href='#'>
<img src='https://www.w3schools.com/howto/img_mountains_wide.jpg'/>
<div class='text'>Caption Two</div>
</a>
</div>
<div class='mySlides fade'>
<a href='#'>
<img src='https://www.w3schools.com/howto/img_nature_wide.jpg'/>
<div class='text'>Caption Three</div>
</a>
</div>
<a class='prev' onclick='prevSlide()'>❮</a>
<a class='next' onclick='showSlides()'>❯</a>
</div>
<div class='wrap-dot'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
lanjut letakkan diatas /body
<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>
Cara Menggunakan Source Code
CSS tempat nya di dalam tag <style> atau <b:skin>. Contoh:
<style>
/* CSS tempel di sini */
</style>
Javascript biasa nya di letakkan di atas tag </body> Contoh:
<script type='text/javascript'>/*<![CDATA[*/
//Tempel Disini Script nya.
/*]]>*/</script>
</body>
HTML terserah mau pasang di mana. mau di template atau postingan terserah.
