Cara Membuat gambar yang bisa di slide didalam post blogger

Membuat gambar mini slider

 

Halo sobat para pencaripengetahuan,Kali ini Admin mau share bagaimana cara membuat Gambar yang bisa digeser di postingan blogger,dengan begitu postingan sobat lebih rapi.oh ya gambar slider ini sangat ringan ringan sehingga tidak terlalu menguarangi loading page blog sobat.

gambar slider ini sangat cocok sekali dengan blog berniche download.Mengapa?.Karena kalian bisa menyertakan gambar schreenshot game,Movie.dll.didalam postingan sobat seperti di PlayStore.
keunggulan lain mini slider ini ialah sudah responsive sehingga menyesuaikan ukuran layar pada hp maupun pc.

kode ini Admin ambil dan mendapat izin repost dari https://www.idblanter.com.simak berikut cara membuatnya.

pastikan code yang ingin di copy tercopy semuanya,dan jangan ada satu pun yang ketinggalan (tidak tercopy)

1. Klick menu pada blogger pilih Tema >> Edit HTML
cari code   ]]><b:skin>   atau bisa juga   </style>   dan letakan code dibawah ini tepat diatasnya.

untuk memudahkan pencarian gunakan CTRL+F .

/* 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)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}

2.cari code  </body>  dan letakan code yang ada dibwah ini diatasnya.

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

jika sudah melakukan cara diatas.klick simpan template.

untuk menggunakannya.pilih postingan yang diinginkan lalu copy code dibawah ini.lalu paste di Mode HTML bukan compose.

<div class="slide-wrap">
<div class="blanter-wrap">
<ul>
<li>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="URL Gambar" 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>

ganti URL gambar dengan url gambar yang diinginkan.

Bagaimana cara mengetahui URL sebuah gambar :

1. Upload gambar di blog sobat dengan cara mengklick icon gambar
2. setelah gambar diletakan.lalu pih Mode HTML dan lihat url nya tepat didepan src="Ini url gambar"
3. selesai.

DEMO 

klick 'RESULT'

See the Pen
YooGmr by Andri Rahmadani (@andri-rahmadani)
on CodePen.

Penutup

 

Terimakasih telah membaca,dapatkan pengetahuannya mengenai bloggger disini.tag : blogger and tips