Cara Membuat Slideshow Postingan Di Blog

Cara Membuat Slideshow Postingan Di Blog
Cara Membuat Slideshow Postingan Di Blog

Cara Membuat Slideshow Postingan Di Blog. Membuat tampilan blog yang keren tentu akan menambah menarik views dari blog yang kita miliki. Salah satu cara untuk membuat blogmu lebih menarik adalah dengan membuat gambar berjalan (slideshow).

Tidak sedikit mungkin content yang membahas terkait bagaimana membuat slideshow blog yang ciamik. Namun pada artikel kali ini, kita akan kupas tuntas bagaimana membuat sebuah tampilan foto berjalan secara lengkap.

Membuat animasi slide dalam blog atau wordpress sebenarnya tidak sulit. Ada beberapa cara dan trik yang dapat kita pergunakan untuk menciptakannya.

Baca Juga : Tips Buat Blogger Pemula, 10 Hari Blog Diterima Adsense

Cara Membuat Slideshow Di Blogger

Apakah Blogger bisa dipasang foto berjalan? Bagaimana cara membuat slideshow atau galeri berjalan pada blog?

Sebelum kita lanjut pada pembahasan lebih rinci. Kita akan ulas secuplik gurisan tentang perihal mengenai slideshow, agar kamu lebih mantab dan yakin apabila ingin memasangnya.

Pengertian Slideshow Blog

Slideshow adalah frame dalam sebuah blog yang tampil biasanya terletak pada header sebuah blogger. Pada umumnya viewsnya adalah berupa gallery foto yang bergeser dari kanan ke kiri atau sebaliknya.

Slider ini terletak dalam sebuah bingkai yang dibuat dengan menggunakan script html.

Untuk beberapa template blog fitur slide ini tidak semua ada. Namun, ada juga beberapa template blogger yang sudah menyediakan fitur ini secara otomatis.

Baca Juga : Template Blogger Dengan Slider Keren

Akan tetapi jangan kawatir, karena dalam article ini kita akan ulas tuntas. Cara membuat slider blog, dengan script html. Sangat mudah sehingga pasti kamu bisa membuatnya.

Membuat Slideshow Dengan HTML CSS dan Javascript

Mungkin sebagian dari kita akan merasa kesulitan untuk untuk membuat slider. Terlebih bagi kamu yang sama sekali tidak mengerti tentang bahasa pemrograman.

Namun jangan kawatir, dengan megikuti langkah-langkah yang kami sampaikan. Pasti kamu bisa dengan mudah membuat sebuah gambar bergerak di header blogmu.

Sebuah metode pengkodean yang efektif dari bootstrap yang kita modifikasi. Sehingga menghasilkan slider cantik dan elegan untuk pasang pada bloggermu.

Baca Juga : Cara Membuat Blog SEO Friendly, Pasti Diterima Adsense

Langkah Membuat Slideshow di Blogger

  • Masuk dalam laman blogger Anda
  • Klik pada menu Post, dan mulai membuat artikel baru
  • Ganti mode penulisan dari compose ke HTML
  • Selanjutnya masukkan atau copas kode skrip html berikut ini ke postingan
<!doctype html> 

<!-- Meta Tags Yang Perlu -->


<!-- Bootstrap CSS --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> 

FUNGSI SLIDE

<h1>TULIS TEKS DI SINI</h1>

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">

</script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="carousel slide" data-ride="carousel" id="carouselExampleCaptions"> 
<ol class="carousel-indicators"> 
<li class="active" data-slide-to="0" data-target="#carouselExampleCaptions">
</li> <li data-slide-to="1" data-target="#carouselExampleCaptions">
</li> <li data-slide-to="2" data-target="#carouselExampleCaptions">
</li> </ol> <div class="carousel-inner">
<div class="carousel-item active">

<img alt="TECHFORU" class="d-block w-100" src="Masukan Url Gambar Disini" /> <div class="carousel-caption d-none d-md-block">

<h5>Label untuk Slide 1</h5> 
<p>Jangan lupa Subscribe</p>
</div> 
</div> 
<div class="carousel-item"> 
<img alt="..." class="d-block w-100" src="Masukan Url Gambar 1 Disini" /> <div class="carousel-caption d-none d-md-block">

<h5>Label untuk Slide 2</h5> 
<p>Share, untuk mendukung kami</p> 
</div> 
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="Masukan Url Gambar 2 Disini" /> <div class="carousel-caption d-none d-md-block">

<h5>Label untuk Slide 3</h5>
<p>Dukung kami dengan cara like</p>
</div> 
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="Masukan Url Gambar 3 Disini" /> <div class="carousel-caption d-none d-md-block">


</div> <a class="carousel-control-prev" data-slide="prev" href="#carouselExampleCaptions" role="button"> 
<span aria-hidden="true" class="carousel-control-prev-icon">
</span> <span class="sr-only">Previous</span>
</a> <a class="carousel-control-next" data-slide="next" href="#carouselExampleCaptions" role="button"> 
<span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span> </a> 
</div>

</!doctype>

Baca Juga : Template Blog Simple SEO friendly

Pada tulisan Masukan url gambar input text alamat url gambar yang ingin kamu jadikan slideshow. Untuk label dan paragraf dibawahnya bisa disesuaikan dengan konteks dari gambar yang anda cantumkan.

Demikian informasi mengenai, Cara Membuat Slideshow Postingan Di Blog semoga informasi ini bermanfaat. Dan selamat mencoba, semoga blog yang sedang kamu bangun ramai pengunjung.

1 komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *