Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

Cara Mudah Membuat Table Berwarna Dan Responsive Dengan Efek Hover Pada Blog Dengan Bootstrap

1/24/2017 0

Kembali lagi dengan tutorial saya, kali ini saya akan membahas bagaimana membuat table yang reponsive pada blog dengan bootstrap. Seperti biasa sobat harus instal bootsrap dulu pada blog sobat, untuk yang belum tau cara instal bootstrap pada blog silahkan lihat artikel Cara Mudah Memasng Bootstrap Pada Blog.

Pada pembuatan tabel dengan bootstrap ada beberapa class yang perlu sobat ketahui, di antaranya :
  • table
    class ini di gunakan untuk mendefinisikan atau membuat table standar/ table biasa.
  • table-striped
    table-striped merupakan class tambahan untuk membuat table dengan menggunakan bootstrap.class ini berfungsi untuk membuat baris table yang bergaya belang-belang (strip).
  • table-bordered
    table-bordered di gunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table.
  • table-hover
    table-hover merupakan class tambahan untuk mendesign table menggunakan bootstrap. table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table.
Dan untuk membuat pewarnaan pada row atau table data sobat dapat menggunakan class-class berikut ini yang dapat sobat tambahkan pada tag <tr> untuk memberi warna pada table row, atau tambahkan pada tag <td> untuk memberi warna pada table data.
  • success
    class ini di gunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data.
  • danger
    class ini di gunakan untuk memberi warna merah pada table row atau table data.
  • info
    class ini di gunakan untuk memberi warna biru pada table row atau table data.
  • warning
    class ini di gunakan untuk memberi warna kuning pada table row atau table data.

Berikut contoh table yang di buat dengan bootstrap, di sini saya membuat table berwarna dengan efek hover dan responsive

See the Pen Responsive Table by Ariez July (@secret28) on CodePen.


Untuk table di atas kalau sobat membukanya pada tablet atau handphone tampilannya akan sama, silahkan sobat gunakan kode di bawah iniuntuk membuat tabel seperti di atas tinggal  sobat ganti content seperti (nama,alamat,kota,provinsi,negara) dengan kata-kata sobat.

<div class="table-responsive">
    <table class="table table-hover">
            <tr>
                <td class='active'>Nama</td>
                <td class='success'>Alamat</td>
                <td class='warning'>Kota</td>  
        <td class="danger">Provinsi</td>
        <td class="info">Negara</td>
            </tr>
        <tbody>
            <tr>
                <td class='active'>Nama</td>
                <td class='success'>Alamat</td>
                <td class='warning'>Kota</td>  
        <td class="danger">Provinsi</td>
        <td class="info">Negara</td>
            </tr>
            <tr>
                <td class='active'>Nama</td>
                <td class='success'>Alamat</td>
                <td class='warning'>Kota</td>  
        <td class="danger">Provinsi</td>
        <td class="info">Negara</td>
            </tr>
            <tr>
                <td class='active'>Nama</td>
                <td class='success'>Alamat</td>
                <td class='warning'>Kota</td>  
        <td class="danger">Provinsi</td>
        <td class="info">Negara</td>
            </tr>
            <tr>
                <td class='active'>Nama</td>
                <td class='success'>Alamat</td>
                <td class='warning'>Kota</td>  
        <td class="danger">Provinsi</td>
        <td class="info">Negara</td>
            </tr>
            <tr>
                <td class='active'>Nama</td>
                <td class='success'>Alamat</td>
                <td class='warning'>Kota</td>  
        <td class="danger">Provinsi</td>
        <td class="info">Negara</td>
            </tr>
        </tbody>
    </table>
  </div>

Bagaimana mudah bukan membuat table yang responsive dengan efek hover pada blog, dengan bootstrap sobat cukup menulis kode HTML di atas tanpa harus membuat file CSS lagi. Semoga artikelnya dapat membantu dan bermanfaat buat sobat. Terimakasih


Artikel Terkait 

Cara Membuat Content Thumbnail Gambar dengan Bootstrap

1/24/2017 0

Kembali lagi kita bahas seputar bootstrap, sekarang saya akan membahas bagaimana memasang thumbnail gambar dan content pada blog. Terlebih dahulu bootstrap harus sudah terpasang pada template blog sobat. Silahkan lihat artikel Cara Memasang Bootstrap Pada Blog untuk yang belum pasang bootstrap pada template blognya.

Untuk sobat yang mau memasang thumbnail gambar dan content silahkan ikuti langkah-langkahnya :
Pertama sobat tentukan mau di mana memasangnya, kalau mau di postingan sobat tinggal pasang kodenya pada postingan sobat (di HTML jangan di Compose). Kalau mau di pasang di widget sobat tinggal buat gadget baru pilih HTML/JAVASCRIPT sobat tinggal kasih judul gadgetnya dan sobat copykan kodenya. Berikut kode yang harus di pasang :

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="patchloader">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Pada (....) <img src="..." alt="patchloader"> silahkan isi dengan alamat gambar sobat, (...) <p>...</p> isi dengan keterangan gambar sobat dan "#" dengan alamat link sobat. Silahkan sobat lihat contoh di bawah ini :
See the Pen Thumbnail bootstrap by Ariez July (@secret28) on CodePen.

Selsai sudah pembahasan tentang memasang thumbnail dan content pada blog, semoga artikelnya dapat membantu dan bermanfaat buat sobat. Terimakasih

Artikel Terkait 

Cara Mudah Membuat Video Yang Responsive Atau Responsive Embed Dengan Bootstrap

1/24/2017 0

Untuk sobat yang suka upload video ke blog tentu ingin video yang sobat upload responsive, dalam kesempatan kali ini saya akan membagikan tutorial membuat video yang responsive dengan bootstrap. Tentunya sobat harus sudah memasang bootstrap ulu di template blog sobat. Buat yang belum pasang bootstrap pada templatenya sobat bisa lihat artikel tentang Cara Memasang Bootstrap Pada Blog .

Dengan bootstrap sobat tidak perlu repot-repot edit template sobat, karena bootstrap memungkinkan browser untuk menentukan video atau slideshow dimensi berdasarkan lebar blok,dengan menciptakan rasio intrinsik yang benar akan skala pada perangkat apapun. Jadi video sobat dapat mengikuti dalam bentuk layar apapun,misal laptop,tablet bahkan handphone.

Langsung saja sobat ikuti langkah-langkahnya

Masuk Blogger>Pos>HTML di sini sobat jangan pilih Compose pilih HTML sobat masukan kode di bawah ada 2 pilihan "16:9 aspect ratio" dan "4:3 aspect ratio"


<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Nah mudah bukan sobat tinggal memasukan kode tadi pada postingan sobat, jadi sobat tidak perlu edit CSS sobat lagi. Semoga artikelnya dapat membantu dan bermanfaat buat sobat. Terimakasih

Artikel Terkait 

Cara Mudah Membuat Tombol (Botton) Dengan Bootstrap Terbaru

1/24/2017 0

Pada artikel sebelumnya saya sudah membahas bagaimana Memasang Bootstrap Pada Blog pada kesempatan kali ini saya akan membahas bagai mana membuat tombol atau botton dengan bootstrap. Tanpa Bootstrap kalau sobat ingin membuat Botton harus mengedit pada CSS template sobat dan HTML postingan sobat, kalau template sobat sudah di pasang Bootstrap sobat tinggal edit HTML postingan sobat saja.

Perhatikan contoh pembuatan Botton dengan Bootstrap
See the Pen Contoh Tombol Bootstrap by Ariez July (@secret28) on CodePen.
Pada contoh di atas kalau template sobat sudah terpasang Bootstrap sobat tinggal memasukan kode di bawah ini pada postingan sobat (pilih HTML jangan Compose). Pilih salah satu tombol yang mau sobat pasang pada postingan sobat.

<!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button>


Bagaimana mudah bukan membuat tombol atau botton pada blog dengan bootstrap, sekian pembahasan tentang cara pembuatan tombol pada blog dengan bootstrap. Semoga artikel saya dapat membantu dan bermanfaat buat sobat. Terimakasih

Artikel Terkait 

Cara Mudah Memasang Bootstrap di Template Blogger Terbaru

1/24/2017 0

Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan front-end website. Bootstrap merupakan salah satu framework HTML, CSS dan Javascript yang paling populer di kalangan web developer. Pada saat ini hampir semua web developer telah menggunakan Bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.

Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.

Salah satu contoh website besar yang menggunakan framework bootstrap adalah Twitter, tentu anda sudah familiar dengan twitter bukan ? yap, interface twitter di bangun dengan menggunakan bootstrap. karena sebenarnya bootstrap di kembangkan oleh developer twitter sendiri sehingga bootstrap sering juga di sebut “twitter bootstrap”.

Bagi sobat yang mau download bootstrap silahkan kunjungi web resmi Bootstrap ,sobat tinggal pilih mau download bootstrap dengan cara apa.

Untuk proses pemasangan pada blogger sobat harus masukan bootstrap dengan cara online, silahkan ikuti langkah-langkahnya.

Login Blogger>Template>Edit Html kemudain sobat masukan kode di bawah di atas kode </head> sobat tinggal pilih salah satu link Bootstrap di bawah.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>


Kemudian sobat masukan kode di bawah di atas kode </body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Selesai, sekarang template sobat sudah di pasang bootstrap dengan terpasangnya bootstrap sekarang sobat bisa mengedit template sobat dengan mudah. Mudah-mudahan artikel saya dapat membantu sobat dan bermanfaat buat sobat. Terimakasih

Artikel Terkait