Status :

Cara Membuat slider di Blogger

 

Hi blogger,di artikel ini aku akan membahas cara memodifikasi template blogger lagi yaitu: cara membuat slider yang dapat digunakan untuk gambar maupun vidio.
Slaider ini sangat ringan karena memgandalkan efek klik pada gombol kiri,kanan,efek scroll kiri kanan,dan ukuran gambar beragam kalian bisa menggunakan gambar vertikal dan horizontal.


Demo

Cara memasang slider di template blogger


Langkah 1:silakan kalian login ke akun blogger kalian masing masing.
Langkah 2:pilih tema kemudian klik titik tiga,dan pilih edit html.
Langkah 3: cari kode ]]></b:skin> atau kode </style> dan letakkan kode di bawah ini tepat diatas kode ]]></b:skin> atau kode </style>.
/* CSS Blanter Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
langkah 4:letakkan kode dibawah ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
$('a.left-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]>
</script>

langkah 5:simpan tema

Langkah 6:silakan kalian buat postingan tatau edit postingan yang sudah ada kemudian pilih mode HTMLkemudian letakkan kode di bawah ini

<div class="slide-wrap">
<div class="blanter-wrap">
<ul>
<li>
<a class="youtube-iframe" href="javascript:void(0)">
<iframe allow="autoplay; encrypted-media" allowfullscreen="false"
frameborder="0" src="https://www.youtube.com/embed/03qDL0Xp2Lw?rel=0&amp;showinfo=1"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://2.bp.blogspot.com/-Zv_Y_O7-Ap0/W8vYbA2b2dI/AAAAAAAAKsE/H5-Ongllea8LCOZELOXQ_Hm3NOwW8pSAwCLcBGAs/s1600/RoC.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://2.bp.blogspot.com/-jT6c0VTad-g/W8vYWKUiloI/AAAAAAAAKr4/q0cqMpikNlcAefIKx-W_Y1sGu-RAT_WKwCLcBGAs/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://4.bp.blogspot.com/-eW-DPRBJLZk/W8vYWEn59qI/AAAAAAAAKr0/P1RVlx5my_EurZTLdDmheiFNAQSdQ2ETwCLcBGAs/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://2.bp.blogspot.com/-_LxNeAWme0Q/W8vYXm3goyI/AAAAAAAAKsA/xy97wbOFk-QLddM1VFEAws5_l5DfVwTGgCLcBGAs/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://3.bp.blogspot.com/-rzt4aeynB4g/W8vYXnLHknI/AAAAAAAAKr8/G2NZFqzDDq8vihc8K5iJANdakodG5YBWwCLcBGAs/s1600/RoC5.jpg" title="Judul Gambar" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a>
</div>
Catatan:
  • Ganti Linkgambar dengan link gambar kalian
  • untuk megganti link vidio yutube kalian tinggal ambilSlgFj8XjUcs
  • contohhttps://youtu.be/SlgFj8XjUcs kalian tinggal ambil kode yang saya tandai di link vidio yutube masing masing.


penutup

sekin tutorial Cara Membuat slider di Blogger,jika ada yang tidak dimengerti,dan tidak jelas silakan tanyakan di komentar

Referensi:https://www.idblanter.com/2018/10/membuat-mini-slider-di-postingan-blog.html

Baca juga :
Utamakan ngopi pagi hari,, karna hidup butuh inspirasi bukan caci maki... | Blogger | pelajar | Yo..|

1 komentar

  1. mantap
© Alfatechnesia. All rights reserved. Distributed by zidarma