Cara Menambah Slide Image pada Background Template Blogger

Kali ini akan saya bagikan hal menarik dari sebuah template blog yang ingin dirubah sedikit tampilannya dengan menambahkan gambar berjalan pada bagian background sehingga membuat terkesan lebih mewah dan professional.

Dengan memanfaatkan gabungan antara CSS/style dan script yang diproduksi oleh Bootstrap yang akan menghadirkan nuasa elegan dan lebih mudah bagi pengguna untuk menerapkannya, karena sebagian besar CSS/style dan script sudah dibungkus dalam bentuk link.

Penempatan pada kerangka template hanya source kode html sederhana, berikut tahapan yang harus dilalui secara seksama.

Letakkan dua bundling CSS dibawah ini tepat diatas kode </head>.

<link href='https://cdn.rawgit.com/ardezign/html-1/master/slider.bootstrap.min.css' rel='stylesheet'/>

<link href='https://cdn.rawgit.com/ardezign/html-1/master/full-slider.css' rel='stylesheet'/>

Kemudian letakkan dua bundling script dibawah ini tepat diatas kode </body>.

<script src='https://cdn.rawgit.com/ardezign/html-1/master/slider.jquery.min.js'/>

<script src='https://cdn.rawgit.com/ardezign/html-1/master/slider.bundle.min.js'/>

Bagian terakhir adalah meletakkan html sederhana dibawah ini tepat dibawah kode <header> dengan menembah beberapa link seprti keterangan dibawah.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>

</ol>

<div class="carousel-inner" role="listbox">

<!-- Slide Satu -->

<div class="carousel-item active" style="background-image: url('link image 1')">

<div class="carousel-caption d-none d-md-block">

<h3>First Slide</h3>

<p>This is a description for the first slide.</p>

</div>

</div>

<!-- Slide Dua -->

<div class="carousel-item" style="background-image: url('link image 2')">

<div class="carousel-caption d-none d-md-block">

<h3>Second Slide</h3>

<p>This is a description for the second slide.</p>

</div>

</div>

<!-- Slide Tiga -->

<div class="carousel-item" style="background-image: url('link image 3')">

<div class="carousel-caption d-none d-md-block">

<h3>Third Slide</h3>

<p>This is a description for the third slide.</p>

</div>

</div>

<!-- Slide Empat -->

<div class="carousel-item" style="background-image: url('link image 4')">

<div class="carousel-caption d-none d-md-block">

<h3>Third Slide</h3>

<p>This is a description for the third slide.</p>

</div>

</div>

<!-- Slide Lima -->

<div class="carousel-item" style="background-image: url('link image 5')">

<div class="carousel-caption d-none d-md-block">

<h3>Third Slide</h3>

<p>This is a description for the third slide.</p>

</div>

</div>

<!-- Slide Enam -->

<div class="carousel-item" style="background-image: url('link image 6')">

<div class="carousel-caption d-none d-md-block">

<h3>Third Slide</h3>

<p>This is a description for the third slide.</p>

</div>

</div>

</div>

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

Ganti teks link image 1, link image 2, link image 3, link image 4, link image 5, link image 6, dengan link image slide.

Setelah selesai mengganti beberapa kode diatas kemudian klik SAVE template dan segeralah lihat hasilnya, selamat mencoba.

Result

Demikian pembahasan sederhana Cara Menambah Slide Image pada Background Template Blogger. Komen, saran, kritik dan masukan selalu saya tunggu karena takkan banyak yang bisa dilakukan kalau tak ada interaksi yang terhubung, selalu saya sampaikan banyak terima kasih atas kunjungan anda.