Skip to main content

Tutorial Memasang Carousel Bootstrap Pada Blogspot

Pada postingan ini saya akan membahas tentang cara untuk memasang Carousel Bootstrap pada Blogspot.
Sebelum saya mulai menjelaskan, pastikan blog anda sudah terintegrasi dengan Bootstrap Framework. Hal ini karena caraousel bootstrap memerlukan fungsi javascript dan class css yang yang ada pada bootstrap framework. Jika anda belum mengetahui cara untuk mengintegrasikan blog dengan Bootstrap Framework, anda dapat memabaca pada postingan saya sebelumnya disini.

Berikut adalah langkah-langkah memasang Carousel Bootstrap pada blog :
  1. Pilih menu Template, lalu klik tombol Edit HTML. Saya ingatkan selalu untuk melakukan backup pada kode HTML pada halaman edit ini.
  2. Buka link carousel bootstrap, pada halaman tersebut dijelaskan struktur kode HTML untuk menampilkan carousel bootstrap.
  3. Pada halaman Edit HTML blog anda, cari kode html <div class='region-inner header-inner'>
  4. Tempelkan kode berikut ini tepat dibawah kode <div class='region-inner header-inner'> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

  <ol class="carousel-indicators">

  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

  <li data-target="#carousel-example-generic" data-slide-to="1"></li>

  <!-- tambah kan tag li seperti contoh ini sesuai jumlah gambar yang anda gunakan -->

  <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>


<!-- Wrapper for slides -->

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

  <!-- item pertama -->

  <div class="item active">

  <img src="url_image_anda" alt="isi_ini_dengan_nama_file_gambar">

  <div class="carousel-caption">

  ini adalah caption pertama

  </div>

  </div>

  <!-- item selanjutnya -->

  <div class="item">

  <img src="url_image_anda_selanjutnya" alt="isi_ini_dengan_nama_file_gambar">

  <div class="carousel-caption">

  ini adalah caption selanjutnya

  </div>

  </div>

  </div>


<!-- Controls -->

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

  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

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

  </a>

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

  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

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

  </a>

  </div>
  5.  Ganti text  url_image_anda dengan url gambar yang ingin anda tampilkan. Saran saya gunakan gambar yang anda upload dari blog anda agar tidak memakan waktu lama saat me-load gambar tersebut.
  6. Lakukan modifikasi CSS pada blog anda pada menu Template lalu klik tombol Costumize. Selanjutnya pilih Advanced dan scroll ke bawah dan klik Add CSS.
Sekian untuk tuturial cara memasang Carousel Bootstrap pada blog. Terimakasih sudah berkunjuang dan membaca tulisan di blog saya. :)
Labels:

Comments

Post a Comment

Popular posts from this blog

Pengertian Database | Sistem Informasi

Menurut para ahli : Gordon C. Everest Database adalah kumpulan data yang mekanis, terbagi, terdefinisi secara formal dan dikontrol secara terpusat pada organisasi Christoper J. Date Database adalah koleksi data operasional yang tersimpan dan terpakai oleh sistem aplikasi dari suatu organisasi. Data Input adalah data yang masuk dari luar sistem. Data Output adalah data yang dihasilkan oleh sistem. Data Operasional adalah data yang tersimpan pada sistem. Toni Fabbri Database adalah sebuah sistem file-file yang terintegrasi yang minimal mempunyai primary key untuk perulangan data. Sehingga dapat disimpulkan bahwa database adalah Kumpulan data yang mekanis, terdefinisi secara formal, tersimpan dan terpakai oleh sistem applikasi dan mempunyai primary key yang digunakan untuk perulangan data. Dalam sistem komputer, database tersimpan secara digital pada sebuah komputer server dan dikelola dengan DBMS ( Database Management System ). Sebelum adanya DBMS, penyimpanan data d...
Post a Comment
Read more

Komponen Dasar Database | Sistem Informai

1. Perangkat Keras (Hardware) Merupakan perangkat keras yang diperlukan untuk mengelola database dalam dunia digital, komputer adalah salah satu perangkat keras yang harus ada untuk dapat mengelola database. Dalam perusahaan skala besar, komputer database dipisahkan dari komputer enduser sehingga meminimalisir terjadinya kerusakan data. 2.  Perangkat Lunak (Software) Merupakan aplikasi komputer yang digunakan untuk mengelola database atau biasa disebut dengan DBMS ( Database Management System ). Beberapa contoh DBMS adalah SQL Server, MYSQL, Oracle dan lainnya. 3. Data Merupakan komponene yang disimpan dan akan diolah sehingga dapat menghasilkan suatu informasi yang berguna untuk pengguna. 4. Pengguna Pengguna database dapat dikelompokkan menjadi 3 kelompok utama, yaitu : a. Database Manager, b. Database Administrator c. Database User
Post a Comment
Read more

I Wish You Were Here | Bacotan - Edisi Kangen Pacar

Hai! Kali ini hanya post bacotan saya, jadi bahasanya gak harus formal-formal banget lah ya. Hari ini saya lagi demen-demennya dengerin lagu I Wish You Were Here dari Sound Of a Mirror. Gak tau knapa akhir-akhir ini saya sering ngerasa ingin pacar saya terus ada deket saya. (Maaf buat yg jomblo ye~). Jadi hari ini saya mau share lirik n lagu dari Sound Of a Mirror. Silahkan di baca dan di dengarkan. :-D I Wish You Were Here When you here beside of me you always make me complete your pretty face look so beautiful when you here in from of me. Haa... haaa.. Stay with you make me comfort you hold my hand and kiss my lips oh baby please don't go i can't live without you here Calm down, i will never let you go i'll be patient to wait you here with me Reff: Baby baby don't you cry, remember me when you feel alone we have to stick together and forever (forever) and i'm here missing you always thinking of you, because tonight ...
Post a Comment
Read more