Jean Gkol Blogging Tips: Membuat Slideshow dengan Bootstrap Twitter

Tips kali ini gampang banget.

Hal pertama yang anda harus lakukan adalah, blogmu harus memiliki 3 buah paket script:

Bootstrap.min.css
jQuery.min.js (versi keluaran terakhir/the latest update lebih baik)
Bootstrap.min.js

Bagi blogger blogspot adalah tidak mungkin mengcopy script tersebut dan menyimpannya di Host Milik Blogger.com karena kita tidak bisa mengaksesnya baik secara langsung atau tak langsung. Jadi Anda terpaksa membuat LINK dari blogmu ke website lainnya yang memiliki link tersebut, bisa di google atau web jquery, dan web bootstrap. Akan tetapi, disini kita akan me-Link-an blog kita dengan 3 sumber paket script diatas seperti dibawah ini:

http://www.appacyber.net/_stylesheet/bs-v2.3.2/css/bootstrap.min.css
http://www.appacyber.net/_stylesheet/bs-v2.3.2/js/jquery.min.js
http://www.appacyber.net/_stylesheet/bs-v2.3.2/js/bootstrap.min.js

Kemudian letakkan link diatas dengan cara sebagai berikut:

<link href="css_blogger/bootstrap.min.css" rel="stylesheet"/>
Letakkan script ini di atas tag </head> atau dibawah tag <head> atau dibawah tag <title>

<script src="http://www.appacyber.net/_stylesheet/bs-v2.3.2/js/jquery.min.js"></script>
<script src="http://www.appacyber.net/_stylesheet/bs-v2.3.2/js/bootstrap.min.js"></script>
Letakkan kedua script JS/Javascript diatas diatas tag </body>.

Setelah ketiga script terpasang, tambahkan 1 buah widget dan letakkan dimanapun anda suka, misalnya dibawah header.
Berikut ini adalah scriptnya:

           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                            </div>
                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
               </div>

#Catatan:
Bila slideshow yang dibuat tidak dapat berjalan sendiri, bisa disebabkan oleh 3 hal:

Koneksi internet lamban/lelet
Lambannya traffic Link image ke blog. Ini disebabkan karena web dimana image tersimpan itu juga lelet.
Versi bootstrap berbeda

Agar image dapat sesuai dengan ukuran halaman postingmu, maka yang perlu anda lakukan adalah, mengubah/mengganti angka seperti yang tercetak tebal (bold) dibawah ini:

<div class="col-lg-8" style="text-align: center;">

Note: Angka tersebut berkisar antara 1 hingga 12 dan pilihlah sesuai dengan lebar halaman blogmu.

Dari script diatas, bisa dilihat tulisan yang tercetak tebal (bold). Nah, disitulah LINK gambar/image yang harus anda ganti dengan image mu sendiri. Bagaimana cara menginput atau menambahkan image di blog blogspot? apakah dengan menambahkan widget image? jawabnya tidak!
Apakah dengan menghost dulu ke hosting/storage provider? jawabnya: tentu tidak! hehe :p

Jadi gimana dong?

Kunjungi ini atau klik saja.
http://true-blogger.blogspot.com/2015/01/memasang-image-disudut-browser.html

Selamat mencoba!

Jean Gkol Blogging Tips

Sunday, January 11, 2015

Membuat Slideshow dengan Bootstrap Twitter

No comments:

Post a Comment