How to Customize Slider of Median ui v1.3
Steps to Customize slider of Median Ui
- Goto Your Blogger Dashboard As Usual
- Then,Goto Theme Section
- After That Click on Edit Html
- Now, Look for this code which is Given Below
<div class='widget-content'><section aria-label='Gallery' class='carousel'><ol class='carousel-viewport'><li class='carousel-slide' id='carousel-slide1' tabindex='0'><div class='carousel-snapper'><!-- Tambahkan/ganti bagian ini dengan gambar Anda --><div class='text-here'><span class='text-left'><i/><i class='bot'/><i class='go'/></span><span class='text-img' style='margin-left:25px'/></div><!-- Sampai disini --></div><a aria-label='Previous' class='carousel-prev' href='#carousel-slide4' role='button'/><a aria-label='Next' class='carousel-next' href='#carousel-slide2' role='button'/></li><li class='carousel-slide' id='carousel-slide2' tabindex='0'><div class='carousel-snapper'><!-- Tambahkan/ganti gambar Anda disini --><div class='text-here'><span class='text-left'><i style='margin:auto;background-color:#fefefe'/><i class='bot' style='margin-left:auto;margin-right:auto;background-color:#fefefe'/><i class='go' style='margin-left:auto;margin-right:auto;width:30%;max-width:150px;background-color:#ebeced'/></span></div><!-- Sampai disini --></div><a aria-label='Previous' class='carousel-prev' href='#carousel-slide1' role='button'/><a aria-label='Next' class='carousel-next' href='#carousel-slide3' role='button'/></li><li class='carousel-slide' id='carousel-slide3' tabindex='0'><div class='carousel-snapper'><!-- Tambahkan/ganti gambar Anda disini --><div class='text-here'><span class='text-img' style='margin-right:25px;'/><span class='text-left'><i/><i class='bot'/><i class='go'/></span></div><!-- Sampai disini --></div><a aria-label='Previous' class='carousel-prev' href='#carousel-slide2' role='button'/><a aria-label='Next' class='carousel-next' href='#carousel-slide1' role='button'/></li></ol><!-- Tombol Navigasi --><aside class='carousel-navigation'><ol class='carousel-navigation-list'><li class='carousel-navigation-item'><a aria-label='Carousel Next' class='carousel-navigation-button' href='#carousel-slide1' role='button'/></li><li class='carousel-navigation-item'><a aria-label='Carousel Next' class='carousel-navigation-button' href='#carousel-slide2' role='button'/></li><li class='carousel-navigation-item'><a aria-label='Carousel Next' class='carousel-navigation-button' href='#carousel-slide3' role='button'/></li></ol></aside></section></div>
After find that Code then customize it Look like below code.
<div class='widget-content'>
<section aria-label='Gallery' class='carousel'>
<ol class='carousel-viewport'>
<li class='carousel-slide' id='carousel-slide1' tabindex='0'>
<div class='carousel-snapper'>
<!-- Tambahkan/ganti bagian ini dengan gambar Anda -->
<a href='https://www.freetemplateandwidget4u.store/2020/10/free-download-median-ui-v1.3-original-premium-version-blogger-template.html'>
<img alt='Median Ui v1.3 Blogger Template' height='100%' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtYXDusnuVdDg2xvouTzHxDKofrFj8TQH2F_NaqpahQDqosS3yLyPw_2d_kPiJd6SUf_Y9PR-EeXiM2J4B7UYJputfACYLw1X5ANHMZqUBVPiYrDENlY-cjAOhDpPFNDPoy8kwE5byEz0Y/s320/Median+Ui+v1.3+Blogger+Template+Free+Download.webp' width='1200px'/>
</a>
<!-- Sampai disini -->
</div>
<a aria-label='Previous' class='carousel-prev' href='#carousel-slide3' role='button'/>
<a aria-label='Next' class='carousel-next' href='#carousel-slide2' role='button'/>
</li>
<li class='carousel-slide' id='carousel-slide2' tabindex='0'>
<div class='carousel-snapper'>
<!-- Tambahkan/ganti bagian ini dengan gambar Anda -->
<a href='https://www.freetemplateandwidget4u.store/2020/10/original-purchased-fletro-pro-v54.html'>
<img alt='Fletro Pro v5.4 Blogger Template' height='100%' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFnujSG_FhEO3P6gVsgbTdJjrvRAUaHNwZuKTwCiEkeTY-G80w8jhzWIFGEGieJWq0EvqTVVbeYYHksLte5tengiDBlVtOHXwk1eCTYSYtpyWNLEyWyX0mtiuIJeiHkiZUP7mCVk3B0dMC/s320/Fletro+Pro+v5.4+Blogger+Template+Free+Download.webp' width='1200px'/>
</a>
<!-- Sampai disini -->
</div>
<a aria-label='Previous' class='carousel-prev' href='#carousel-slide1' role='button'/>
<a aria-label='Next' class='carousel-next' href='#carousel-slide3' role='button'/>
</li>
<li class='carousel-slide' id='carousel-slide3' tabindex='0'>
<div class='carousel-snapper'>
<!-- Tambahkan/ganti bagian ini dengan gambar Anda -->
<a href='https://www.freetemplateandwidget4u.store/2020/10/masign-asuka-Blogger-template-free-download-premium-version.html'>
<img alt='Masign Asuka Blogger Template' height='100%' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5myDiiHHMpHMpJNiX2phBvl1SjIbW2BfrunqlYc5P63F5E23mIs-3CZTNu04ZEiSajHP8m0LY8-7Qdb3PRvQcevHack8Sufh9beq53JPz56JzgXHM1BhJ9Nm3fcnL0IlNvz9wtADhIgZX/s320/Masign+Asuka+Blogger+Template+Free+Download.webp' width='1200px'/>
</a>
<!-- Sampai disini -->
</div>
<a aria-label='Previous' class='carousel-prev' href='#carousel-slide2' role='button'/>
<a aria-label='Next' class='carousel-next' href='#carousel-slide1' role='button'/>
</li>
</ol>
<!-- Tombol Navigasi -->
<aside class='carousel-navigation'>
<ol class='carousel-navigation-list'>
<li class='carousel-navigation-item'>
<a aria-label='Carousel Next' class='carousel-navigation-button' href='#carousel-slide1' role='button'/>
</li>
<li class='carousel-navigation-item'>
<a aria-label='Carousel Next' class='carousel-navigation-button' href='#carousel-slide2' role='button'/>
</li>
<li class='carousel-navigation-item'>
<a aria-label='Carousel Next' class='carousel-navigation-button' href='#carousel-slide3' role='button'/>
</li>
</ol>
</aside>
</section>
</div>
Otherwise you Can Replace this code with default code of the theme then Customize that code in Edit HTML Section to understand better.
