Advertisement

Hot News

News

Slide Carousel di Blogger

Tutorial kali ini adalah Cara membuat Slide Carousel di Blogger dengan bootstrap framework tanpa merusak Tema Bawaan Blogger, pastinya dengan memilih style CSS bootsrap yang hanya berguna untuk membangun slide carousel ini dan membuang sisanya.
Carousel yang akan saya buat akan menggunakan bootstrap Framework. Fungsi Carousel adalah untuk mempercantik halaman Home Page Blogger dengan Slide gambar yang biasanya berada di bagian atas blog, tepat di bawah Header Blog.Untuk contoh hasil tutorial ini bisa anda kunjungi web berikut, anda akan di arahkan ke website yang menerapkan SlideCarousel dari tutorial ini


SAMPEL DEMO

Sesuai yang ada di contoh, Carousel tersebut tidak di masukkan kedalam Widget Blogger, alias permanen tidak bisa di geser menggunakan fitur Tata Letak / Layout dari Blogger. Namun di sini juga akan saya sertakan cara agar bisa di geser geser dengan fitur Widget dari Blogger.

1. Langkah Pertama (tanpa widget)

langsung masuk ke Tab Tema - Edit HTML. Cari kode <main> tekan (ctrl+f) untuk mempercepat pencarian

masukkan kode berikut tepat di atas kode <main>




kode di atas adalah untuk menampilkan Carousel, kode bagian ini lah yang bisa anda masukkan di dalam widget HTML/JavaScript jika ingin memindah mindahkan posisi letak Carousel dengan fitur Tata Letak milik Blogger.

Simpan Tema


**penjelasan kode 1

<li class='active' data-slide-to='0' data-target='#carouselExampleIndicators'/><br />
<li data-slide-to='1' data-target='#carouselExampleIndicators'/><br />
<li data-slide-to='2' data-target='#carouselExampleIndicators'/><br />

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

kode ini untuk menentukan jumlah indikator slide yang di tampilkan. di kode tersebut sudah tersedia 4 indikator yaitu 0,1,2 dan 3, jika ingin menambahkan indikator tinggal menulis kode lagi di bawahnya dengan kode seperti ini :

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

**penjelasan kode 2

<div class='carousel-item'>
      <img alt='Second slide' class='d-block w-100' src='#'/>
            <div class='carousel-caption'>
           <p class='carousellabeldeskripsi'>deskripsi</p>
        </div>
    </div>

kode ini untuk mengambil gambar yang akan di tampilkan dalam Carousel.
kode dengan tanda pagar merah tersebut ganti dengan link anda tempat menyimpan gambar.
dan yang berwarna biru adalah kode caption yang di tampilkan bersama dengan slide gambar.
untuk menambahkan jumlah gambar yang ditampilkan dalam slide carousel, anda tinggal menambahkan kode tersebut, pastikan jumlah indikator dan jumlah slide gambar sama. jika indikator ada 4 maka gambar juga harus 4.

2. Langkah Kedua

masih di Halaman HTML, cari kode </body>

masukkan kode berikut tepat di atas kode </body>

 <script src='https://cdn.rawgit.com/OkiFIrman/javascript/53b48e7b/jquery-1.11.3.js' type='text/javascript'/>
  <script src='https://cdn.rawgit.com/OkiFIrman/javascript/cfbbad68/bootstrap.js' type='text/javascript'/>

kode tersebut untuk memanggil file JavaScript bootstrap

3. Langkah Ketiga

masih juga di halaman HTML, cari kode </head>

masukkan kode berikut tepat di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.thumbnailcarousel {display:none}
</style>
</b:if>

kode tersebut untuk membatasi penampilam Carousel hanya di halaman Home serta halaman-halaman statis lainnya seperti about, contact us, dll.


4. Langkah Keempat

ini adalah langkah terakhir.
masuk ke Tab Tema-Sesuaikan
selanjutnya pilih lanjutan-tambahkan CSS masukkan kode berikut di kolom tambahkan CSS
kode tersebut untuk style CSS Carousel, sebaiknya jangan di rubah

Selesai.... Selamat Mencoba.
Tinggalkan komentar di bawah jika kesulitan
Slide Carousel di Blogger Reviewed by Oki Firmansyah on August 22, 2017 Rating: 5

2 comments:

All Rights Reserved by Digital Tutor © 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.