Membuat Website Bootstrap 100% Responsive

Membuat Website Bootstrap 100% Responsive
Template HTML Responsive di Semua Perangkat
TIPS & TRICKS

Untuk membuat situs web memerlukan proses, begitu juga dengan tutorialnya. Tutorial membuat website reponsive menggunakan Bootstrap dimulai dari part 1 ini dan berakhir di part 10, pada dasarnya membuat website responsive dengan Bootstrap terbilang mudah dengan syarat harus mengetahui class–class yang sudah disediakan Bootstrap beserta fungsinya.

Sebelumnya saya pernah buatkan tutorial membuat website menggunakan HTML CSS part 1 sampai part 11, silahkan dilihat terlebh dahulu untuk memami tag-tag HTML. Kalo sudah paham mari lanjutkan menggunakan Bootstrap, kalo mau tau “Apa Itu Bootstrap”

What Is Bootstrap ?

Boostrap adalah kerangka HTML, CSS dan JS paling populer untuk mengembangkan website responsif yang di desain untuk siapapun dan dimanapun. Dengan Bootstrap kita dapat membuat website lebih cepat dan lebih mudah. Bisa digunakan untuk para pemula, pengguna tingkat lanjut atau bahkan project kelas dunia.

Pada CSSnya Bootstrap menggunakan 2 processor paling popular yaitu Less dan Sass. Satu framework untuk segala jenis perangkat, Bootstrap mampu merubah bentuk dari ukuran perangkat ke ukuran perangkat lainnya tanpa merusak bentuk website kalian hanya dengan kode tunggal. Dengan Bootstrap juga kita bisa mendapatkan dokumentasi penting dan keren mengenai HTML, CSS dan jQuery nya. Bootstrap ini merupakan Open Source yang ditempatkan, dikembangkan dan dirawat di GitHub.

Saat ini sudah banyak sekali pengguna Bootstrap untuk keperluan bisnis, pribadi, dll. Website2 hebat pun sudah menggunakan Bootstrap. Kalian juga dapat menggunakan Bootstrap secara gratis. Tunggu apa lagi ? Download versi terbarunya disini sekarang juga dan mulai berkreasi !!! Ikuti juga Tutorial Membuat Website 100% Responsive Dengan Bootstrap.
sumber: https://www.posciety.com/pengertian-pemahaman-bootstrap/
Mempersiapkan Bootstrap
Pertama, silahkan download Bootstrapnya terlebih dahulu di getbootstrap.com.

Klik tombol Download Bootstrap untuk mulai mengunduh bukan Download Source ataupun Download Sass.
Setelah berhasil di unduh silahkan extract file nya maka akan muncul folder Bootstrap + versinya (misalnya Bootstrap-3.3.1).
Buka folder Bootstrap tersebut didalamnya ada folder CSS, JS dan Fonts, copy semua folder lalu tempelkan dimana kalian ingin memulai project pembuatan web Bootstrap ini.
Misalnya saya membuat project web ini di folder “Tutorial Web Bootstrap” maka copy 3 folder tadi dan paste didalam folder “Tutorial Web Bootstrap” ini, selesai ! Selanjutnya kita mulai membuat websitenya.

Silahkan buka code editor yang ingin digunakan, misalnya Sublime Text atau Adobe Dreamweaver. Silahkan buat file baru dengan ekstensi file .html untuk halaman beranda / home misalnya home.html atau lebih populer index.html. Simpan file index.html ini di dalam folder project “Tutorial Web Bootstrap” tadi (sejajar dengan folder-folder Bootstrap yang di paste).

Nah, didalam file index.html ini mulailah membangun struktur situs web HTML seperti biasa. Saya anggap kalian sudah memahami pola HTML makanya ingin membuat web menggunakan framework Bootstrap, kalo belum tau struktur dasar HTML bisa lihat disini atau lihat tutorial membuat web HTML CSS sederhana dari part 1 sampai part 11.

Jika ingin menggunakan framework Bootstrap, kita perlu memanggil source Bootstrap yang tadi sudah di paste. Silahkan panggil file bootstrap.min.css (di folder CSS Bootstrap) didalam bagian <head> menggunakan tag <link> seperti biasa ketika kalian memanggil source file. Kalo belum tau cara memanggil file kedalam HTML, silahkan lihat disini caranya.

Sebelum lanjut lebih jauh, silahkan copy code berikut dan tempelkan didalam tag <head>:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Untuk membuat index.html ini benar-benar responsive, code tersebut harus diletakkan tepat setelah <head> karena harus dipanggil lebih awal dibanding code-code source lain.

Selanjutnya, supaya index.html ini bersahabat baik dengan browser Internet Explorer silahkan tambahkan kode berikut (berupa comment HTML) sebelum tag penutup </head>:


Bisa diperhatikan source nya berupa link artinya memerlukan koneksi internet, jika ingin digunakan di direktori lokal / offline untuk Internet Explorer silahkan kunjungi link yang ada di src=”link” kemudian copy semua isinya dan simpan sebagai file .js. Setelah itu tinggal diganti deh src=”” nya dengan nama file dan direktori dimana kalian menyimpannya. Kalo kurang paham, abaikan saja ini bukan hal yang penting untuk dibahas saat ini.

Sampai sini, bagian <head> file index.html akan terlihat seperti ini:

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Web Responsive Bootstrap - Rio Bermano</title>
<link href="css/bootstrap.min.css" rel="stylesheet">

</head>
Apakah sekarang Bootstrap sudah bisa digunakan ? Belum ! Masih ada 2 hal lagi yang perlu dilakukan supaya Bootstrap bisa berfungsi, silahkan masukkan code/ script jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>dari perpustakaan API Google tempelkan di sebelum tag penutup </body>.

Berikutnya silahkan panggil file bootstrap.min.js yang ada didalam folder JS Bootstrap tadi di bagian bawah sebelum tag penutup </body> juga. Maka sekarang file index.html akan terlihat seperti ini:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Web Responsive Bootstrap - Rio Bermano</title>
<link href="css/bootstrap.min.css" rel="stylesheet">


</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>
Perhatikan pada jquery Google API, ini berupa link yang tentu memerlukan koneksi internet. Jika ingin menggunakannya offline silahkan kunjungi link tersebut lalu copy semua codenya dan tempelkan di file baru kemudian save dan beri nama sesuai keinginan dengan ekstensi file .js. Setelah itu ganti link didalam src=”” nya dengan nama file .js yang baru dibuat beserta direktorinya.

Sekarang, index.html ini sudah siap dibangun menggunakan framework Bootstrap. Tinggal pikirkan bagaimana kalian ingin membuat template untuk index.html ini.

Menu Navigasi Bootstrap
Pasti bagian menu atau navigasi terlebih dahulu karena setiap situs web memang memerlukan menu, langsung aja copy code berikut ini dan tempelkan setelah tag <body>:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Navigasi →</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rio Bermano</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Blog</a></li>
<li><a href="">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Terlaris</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Cari...">
</div>
<button type="submit" class="btn btn-default">Cari</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Penulis Blog</a></li>
<li><a href="#">Pekerjaan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Menu Lain</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Ini merupakan navbar standar bawaan Bootstrap, kalo kalian cocok langsung pake kalo gak cocok silahkan di otak-atik sesuai selera. Kalo gak yakin cara otak-atiknya biarkan aja seperti ini, cukup ganti nama-nama menunya sesuai kebutuhan.

Kalo ada yang bertanya “Apa bedanya membuat nav sendiri dan membuat navbar menggunakan framework Bootstrap ?” Silahkan save file index.html ini kemudian lihat hasilnya, menu sudah tampil seperti biasanya. Coba perkecil layar browser sekecil mungkin atau sampai seukuran layar smartphone, navigasi otomatis mengecil sekaligus berubah menjadi toggle menu yang minimalis dan tetap responsive.

Sebagai gambaran saja, contoh halaman home / index.html yang akan kita buat misalnya seperti ini: (lihat gambar).

Dilihat dari contoh ini, terdapat header yang lebar penuh tepat dibawah menu artinya sekarang kita akan membuat bagian itu karena menu sudah diterapkan. Silahkan tempelkan code berikut setelah tag penutup </nav>:

<div class="container-fluid">
<div class="container">
<div class="row">

</div>
</div>
</div>
Didalam bagian ini (setelah class=”row”) akan dimasukkan element-element yang diperlukan, jika dilihat pada contoh diatas terdapat text + tombol disebelah kiri dan video disebelah kanan.

Informasi:

container-fluid adalah container pada bagian HTML yang lebarnya penuh (full width)
container adalah container pada bagian HTML yang lebarnya kotak (boxed) dibagian tengah-tengah situs
row adalah baris pada HTML
Semua element ini dibuat di framework Bootstrap, kita cukup meneraknanya di HTML, gampang kan ?

Perhatikan pada gambar, dibagian atas terdapat background merah yang lebar penuh sedangkan text + tombol dan video berada di tengah-tengah situs seolah ada kotak lagi didalam element background merah tersebut. Itu memang benar, karena disini kita gunakan container-fluid sebagai background merah dan video serta text ditempatkan didalam row yang sudah dibungkus container.

Masih bingung ? Lihat : Video tutorial cara membuat web sendiri yang responsive.

Selamat mencoba !

Part 1 selesai sampai sini, silahkan lanjut ke part berikutnya (part 2).

PART 2
Bagian Menu Navigasi dan Header
TIPS & TRICKS
Diperbarui 17 Mar 2019

Pada part 2 ini kita akan membuat bagian header yang dijadikan jumbotron dan akan diisi dengan 2 kolom.

Kolom ini sejajar bersampingan (kanan dan kiri) disebelah kanan kita terapkan media misalnya video sedangkan sebelah kiri kita terapkan judul dengan heading dan beberapa kalimat menggunakan paragraf + tombol besar.

Pada part 1 baru sampai sini:

<div class="container-fluid">
<div class="container">
<div class="row">

</div>
</div>
</div>
Silahkan tambahkan class baru setelah container-fluid, class tersebut akan kita gunakan untuk mengedit bagian ini karena saya tidak menyarankan mengedit bagian dari nama class yang sudah disediakan Bootstrap. Silahkan beri class baru misalnya diberi nama atas, maka akan jadi seperti ini:

LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

<div class="container-fluid atas">
<div class="container">
<div class="row">

</div>
</div>
</div>
Seperti yang dijelaskan diatas, kita akan sisipkan 2 kolom didalam row ini maka silahkan masukkan code pembuat kolom dari Bootstrap yaitu col-. Misalnya kita gunakan col-md-6 artinya kedua kolom ini akan memiliki lebar yang sama:

<div class="container-fluid atas">
<div class="container">
<div class="row">
<div class="col-md-6 text-atas"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
Pada col-md-6 yang pertama silahkan beri class baru seperti biasa supaya kita dapat mengedit element-element yang ada didalamnya, sekarang silahkan masukkan kode berikut didalam col-md-6 yang pertama:

<h1>Contoh Judul</h1>
<p>rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover. rem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover</p>
<p><a href="https://posciety.com" target="_blank" class="btn btn-default btn-lg">INI Tombol</a></p>
Ini hanya contoh saja untuk mengisi kolom sebelah kiri dengan judul dan kalimat + tombol, silahkan sesuaikan dengan kebutuhan kalian. Selanjutnya masukkan kode ini pada col-md-6 yang kedua:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/stsQT6Z8Fzw"></iframe>
</div>
Pada kolom kedua ini kita sisipkan video, video ini saya ambil dari YouTube. Jika ingin menyisipkan video dari YouTube juga silahkan buka video YouTube yang ingin di sisipkan kemudian klik Embed / Sematkan dibawah video tersebut, salin code nya dan tempelkan didalam col-md-6 ini.

Lihat : Cara memasukkan media (gambar, video, audio) di HTML CSS.

Sekarang kita buat file CSS baru karena belum punya, file-file CSS yang kita punya sebelumnya itu adalah bawaan dari Bootstrap. Buat file baru dan simpan dengan ekstensi .css misalnya style.css. Untuk apa file ini ? File CSS ini untuk gaya / style kustom yang akan kita terapkan pada class-class yang kita buat sendiri contohnya class atas yang kita buat di col-md-6 tadi.

Save file style.css ini di folder CSS bersamaan dengan file-file CSS Bootstrap lain supaya gak bingung / gak berantakan, atau kalo mau simpan di tempat lain juga silahkan. Sekarang silahkan panggil file tersebut di file HTML ini dibagian <head>: <link href="css/style.css" rel="stylesheet">Kode ini artinya memanggil file style.css yang berada di folder CSS.

Lihat: Cara memanggil file dari luar root HTML CSS (lanjutan).

Sekarang, kita akan mengatur gaya sendiri untuk class atas tadi didalam file style.css. Misalnya saya terapkan gaya seperti ini:

.atas {
background-color: #c41617;
padding: 5% 0 5% 0;
}
Gaya yang diberikan adalah warna merah pada latar belakang pada 2 kolom tadi dan memberi sedikit jarak atas dan bawah 2 kolom tersebut supaya terlihat rapih. Dan kalo kalian perhatikan tadi bagian col-md-6 yang pertama diterapkan juga class baru dengan nama text-atas, nah sekarang silahkan atur gaya untuk class text-atas di style.css ini misalnya seperti ini:

.text-atas h1 {
color: #fff;
font-family: 'KaushanScript-Regular';
}
.text-atas p {
color: #fff;
}
Code ini memberikan nilai / gaya pada tag h1 dan tag p yang ada didalam class text–atas, silahkan sesuaikan gayanya sesuai keinginan. Sekarang Save dan lihat hasilnya ! (lihat gambar)

Masih bingung ? Lihat : Video tutorial membuat tempalte responsive dengan Bootstrap Part 2.

Jangan lupa lihat part berikutnya (part 3) disini, atau klik disini untuk lihat part sebelumnya (part 1).

PART 3
Membuat About Section dan Skills Section
TIPS & TRICKS
Diperbarui 17 Mar 2019

Sebelumnya kita sudah membuat bagian header jumbotron dibagian paling atas tepat dibawah menu navigasi, sekarang kita akan lanjutkan dengan membuat bagian Tentang Saya / Tentang Kami tepat dibawah header. Selain itu, kita juga membuat bagian My Skills dengan memanfaatkan panel Bootstrap.

Tentang Kami
Biasanya pada bagian Tentang Kami ini di isi dengan foto profil / logo dan teks paragraf yang menjelaskan tentang situs ini secara singkat dan jelas. Pada bagian pertama kita akan menerapkan judul Tentang Kami terlebih dahulu yang mana judul ini dibuat menggunakan tag h1, supaya tidak terlalu polos kita tambahkan icon user disebelah kirinya menggunakan span ikon dari Bootstrap (glyphicon) dan semua ini dibungkus dengan col-sm-12 seperti ini:

<div class="container">
<div class="row">
<div class="col-sm-12 judul text-center">
<h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
</div>
</div>
</div>
</div>
Jika sebelumnya kita membuat kolom menggunakan col-md kali ini kita akan membuatnya dengan col-sm, md artinya medium sedangkan sm artinya small. Jadi, ketika diatur col-sm-12 artinya di akan tetap full baris pada perangkat kecil. Untuk ikon glypihcon sendiri bisa kalian temukan disini dan pilih ikon yang lebih disukai.

LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

Seperti biasa kita tambahkan nama class baru didalamnya untuk digunakan dalam pengeditan style di CSS nya nanti, disini diberi nama class judul. Pada bagian col-sm-12 ini juga terdapat class lain yaitu text-center yang artinya tulisan yang ada didalam kolom ini akan berposisi ditengah, silahkan Save dan lihat hasilnya !

Sekarang, kita buat baris baru setelah penutup row diatas yang mana baris baru ini di isi dengan 2 kolom yang memiliki lebar berbeda. Kolom pertama kita buat sedikit lebih kecil dan di isi dengan foto profil atau logo sedangkan kolom satunya lagi kita buat lebih lebar dan di isi dengan beberapa kalimat pengenalan Tentang Kami.

<div class="container">
<div class="row">
<div class="col-sm-12 judul text-center">
<h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
Perhatikan col-md yang dibuat memiliki nilai berbeda artinya tidak memiliki lebar yang sama, silahkan tentukan ukuran sesuai selera kalian yang penting jumlah dari keduanya adalah 12 misalnya 7 & 5 atau 9 & 3.

Pada kolom pertama yang kecil akan di sisipkan gambar, silahkan siapkan gambarnya terlebih dahulu. Saya simpan gambar di dalam folder media/image/foto/, maka folder-folder tersebut menjadi root dalam pemanggilan file gambar disini:

<div class="container">
<div class="row">
<div class="col-sm-12 judul text-center">
<h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="media/image/foto/foto1.jpg" class="img-responsive">
</div>
<div class="col-md-8"></div>
</div>
</div>
Jangan lupa tambahkan class img-responsive didalam tag img nya supaya gambar tersebut menjadi responsive (rapih tidak berantakan), class img-responsive ini merupakan class yang dibuat oleh Bootstrap untuk membuat gambar menjadi responsive.

Selanjutnya pada col-sm-8 ini kita masukkan paragraf sebagai penjelasan dari Tentang Kami:

<div class="container">
<div class="row">
<div class="col-sm-12 judul text-center">
<h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> About Me</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="media/image/foto/foto1.jpg" class="img-responsive">
</div>
<div class="col-md-8">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
</div>
Ini hanya contoh paragraf saja, silahkan masukkan kaliam yang sesungguhnya supaya terlihat lebih real. Save dan lihat hasilnya !

? Jika posisi atau tinggi antara gambar dan paragraf tidak sama dan ingin di samakan silahkan perpendek / perpanjang paragrafnya atau bisa juga mengedit gambarnya terlebih dahulu di aplikasi pengedit foto atau edit langsung di style CSS nya.

Sepertinya bagian atas judul Tentang Kami masih terlalu dekat jarak atas dan bawahnya, inilah fungsinya class judul yang tadi kita terapkan, sekarang kita atur di CSS nya:

.judul h1 {
margin: 3% 0;
color: #c41617;
}
Code ini memberi jarak atas bawah judul tersebut dan memberikan warna merah, silahkan sesuaikan gayanya sesuai keperluan. Save dan lihat hasilnya ! Sekarang sudah terlebih lebih rapih dari sebelumnya.

My Skills
Bagian selanjutnya dibawah Tentang Kami kita buat bagian My Skills yang mana bagian ini dibuat menggunakan panel yang kotak kotak grid dan didalamnya terdapat ikon Bootstrap + teks. Pertama, kita buat kerangka utamanya dulu dengan container-fluid:

<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Skills</h1>
</div>
</div>
container-fluid ini sama seperti bagian header yang dibuat sebelumnya, artinya lebar dari baris ini full sampai sisi pinggir kanan dan kiri sedangkan container itu tidak full hanya meng-kotak dibagian tengah-tengah situs. Seperti biasa kita masukkan class baru supaya dapat mengedit bagian ini nanti di CSS dan disini namanya sama dengan yang sebelumnya yaitu class judul.

Selanjutnya, kita buat row baru dan didalamnya di isi dengan 4 buah col- kecil:

<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Skills</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
</div>
Perhatikan, kenapa ada 2 col- didalam satu div ini ? col- yang pertama itu adalah –md– sedangkan yang kedua adalah –sm-. artinya ketika layar / perangkat yang digunakan berukuran medium akan membentuk menjadi col berukuran 3 sedangkan ketika dibuka di perangkat kecil akan membentuk menjadi col berukuran 6. Jika berukuran 3 artinya akan menampilkan 4 dalam satu baris sedangkan jika berukuran 6 akan menampilkan 2 saja dalam 1 baris.

Sekarang, masukkan panel yang sudah disediakan oleh Bootstrap didalam semua 4 col- tersebut:

<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Skills</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center"></div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center"></div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center"></div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center"></div>
</div>
</div>
</div>
</div>
Pada bagian panel-body ini saya terapkan class text-center supaya text yang ada didalamnya berposisi ditengah, jika tidak mau silahkan hapus aja.

Sekarang, saya akan membuat ikon dengan tag h1 kemudian dibawahnya di isi judul dengan tag h2 dan dibawahnya lagi di isi dengan presentase skill menggunakan tag p. Jadi seperti ini:

<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Skills</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></h1>
<h2>Skill 1</h2>
<p>90%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></h1>
<h2>Skill 2</h2>
<p>85%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></h1>
<h2>Skill 3</h2>
<p>80%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-star" aria-hidden="true"></span></h1>
<h2>Skill 4</h2>
<p>75%</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-film" aria-hidden="true"></span></h1>
<h2>Skill 1</h2>
<p>90%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></h1>
<h2>Skill 2</h2>
<p>85%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-off" aria-hidden="true"></span></h1>
<h2>Skill 3</h2>
<p>80%</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></h1>
<h2>Skill 4</h2>
<p>75%</p>
</div>
</div>
</div>
</div>
</div>
Save dan lihat hasilnya !

Masih bingung ? Lihat : Video tutorial cara membuat template Bootstrap Part 3.

Perhatikan, disini ada 8 panel sedangkan tadi hanya 4. Silahkan copy semua mulai dari class row sampai penutup class row tersebut dan paste dibawah penutup class row tersebut maka menjadi ada 2 row masing-masing memiliki 4 col- jadi semua ada 8 col dan 2 row.

Ini supaya terlihat lebih banyak aja, kalo cuma mau 1 row alias 4 col juga tidak apa-apa. Mungkin kalo mau lebih banyak bisa lakukan hal seperti diatas sesuai jumlah row yang diinginkan.

Setelah menyelesaikan part 3 ini, silahkan lanjut ke part 4 atau lihat kembali ke part 2.
sumber: https://www.posciety.com/cara-membuat-website-responsive-bootstrap-part-310/

PART 4
Membuat Bagian My Projects, Menampilkan Daftar Project
TIPS & TRICKS
Diperbarui 17 Mar 2019

Setelah membuat bagian header, About Me dan bagian My Skills di part-part sebelumnya, kali ini kita akan membuat bagian lagi yang tidak berbeda jauh dengan sebelumnya misalnya membuat bagian My Projects. Tapi tentu didalam bagian ini kita gunakan elemen-elemen berbeda dari sebelumnya supaya sekalian mempelajari elemen baru.

Buka kembali file HTML nya dan salin kode berikut tepat dibawah tag /div penutup bagian My Skills:

<div class="container-fluid myprojects">
<div class="container">
<div class="col-sm-12 judul-myprojects text-center">
<h1>My Projects</h1>
</div>
<div class="row">
<div class="col-md-4 item-project"></div>
<div class="col-md-4 item-project"></div>
<div class="col-md-4 item-project"></div>
</div>
</div>
</div>
Kali ini kita bungkus semuanya menggunakan container-fluid karena supaya berbeda aja dengan yang bagian atasnya dan container-fluid ini ketika dikasih latar belakang gambar akan terlihat lebih keren. Seperti biasanya juga didalam elemen-elemen ini kita terapkan nama class baru supaya nanti bagian dari elemen-elemen tersebut bisa di kustom style nya di style.css.

Kita terapkan gambar terlebih dahulu di dalam masing-masing col-md-4 dan dibungkus a href supaya berisi link dan dapat di klik, silahkan siapkan gambar yang ingin digunakan di root direktori kemudian panggil gambarnya disini:

LIHAT JUGA:
Apa Itu Filler Payudara? Apakah Benar Berbahaya Hingga Menyebabkan Kematian?

Tim Museum Prabu Siliwangi Temukan Batu Kapak Peninggalan Sri Jayabupati

Anggota DPR RI Sosialisasikan 4 Pilar Kebangsaan Ke Masyarakat Sukabumi

Cara Screenshot Panjang (Long Screenshot) Di Xiaomi

<div class="container-fluid myprojects">
<div class="container">
<div class="col-sm-12 judul-myprojects text-center">
<h1>My Projects</h1>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href="portfolio/portfolio1.html"><img src="media/image/test1.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
</div>
</div>
</div>
</div>
</div>
Jangan lupa untuk memberikan class img-responsive supaya gambar menjadi rapih dan pastikan gambar yang digunakan juga ukurannya memadai dengan ukuran kolom pada situs yang dibuat, jika menurut kalian gambarnya kurang banyak silahkan tambahkan dengan membuat row baru dan design col-md yang sama seperti pada penjelasan di part 3.

Misalnya saya akan tambahkan 2 row lagi dengan design col-md yang sama maka akan menjadi seperti ini:

<div class="container-fluid myprojects">
<div class="container">
<div class="col-sm-12 judul-myprojects text-center">
<h1>My Projects</h1>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href="portfolio/portfolio1.html"><img src="media/image/test1.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test1.jpg" class="img-responsive"></a>
</div>
</div>
<div class="row">
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test1.jpg" class="img-responsive"></a>
</div>
<div class="col-md-4 item-project">
<a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
</div>
</div>
</div>
</div>
Sekarang menjadi 3 row dan masing-masing memiliki 3 kotak col-md, silahkan tentukan jumlah yang kalian butuhkan. Tapi seperti masih ada yang kurang, kita tambahkan tombol dengan tulisan Lihat Semua Project yang tujuannya supaya pengunjung dapat diarahkan ke halaman yang menampilkan semua project karena di bagian ini mungkin tidak menampilkan semua project.

Tambahkan code berikut tepat setelah /div penutup row yang terakhir jika ingin menggunakan tombol:

<div class="col-sm-12 text-center">
<button class="btn btn-lg btn-default tombol-projects"><a href="pages/portfolio.html">Lihat Semua Projects</a></button>
</div>
Perhatikan pada bagian a href=, itu merupakan URL kemana akan diarahkan jika mengklik tombol tersebut. Silahkan kosongkan jika belum ada halamannya atau biarkan seperti itu karena nanti pada part-part berikutnya kita akan membuat halaman yang menampilkan semua My Projects.

Saat ini pasti belum terlihat rapih karena belum kita atur di CSS style.css nya, silahkan atur sesuai keinginan atau ikuti style yang saya gunakan seperti ini:

.judul-myprojects {
margin: 3% 0;
color: #fff;
}
.myprojects {
background: url(../media/image/bg/bg-myprojects.jpg);
background-size: cover;
}
.item-project img {
margin: 2% 0;
box-shadow: 2px 5px 3px #000;
}
.tombol-projects {
margin: 3% 0;
}
.tombol-projects a {
color: #c41617;
}
.tombol-projects a:hover {
text-decoration: none;
}
Inilah style yang saya gunakan, jika sesuai dengan keinginan kalian ya tinggal di Save aja. Pada bagian ini kita menggunakan latar belakang gambar yang mana gambar ini bisa kalian temukan di .myproject background: url(), silahkan panggil gambar yang ingin digunakan sebagai background.

Harap diperhatikan, ketika menggunakan latar belakang gambar pada bagian pastikan gambar latar belakang tidak bertambrakan warnanya dengan gambar-gambar yang ditampilkan dibagian ini supaya terlihat bagus. Silahkan pergelap gambar yang digunakan menjadi background jika gambar diatasnya terang dan begitu sebaliknya.

Bisa berikan shadow / bayangan pada gambar yang ditampilkan di gambar ini supaya terlihat jelas jika warna kontras dengan latar belakang, dan jika ingin mengatur gaya tombol silahkan sesuaikan di bagian class tombol–projects serta :hover nya.

Masih bingung ? Lihat : Video tutorial membuat website Bootstrap part 4.

Setelah menyelesaikan part 4 ini, silahkan lanjut ke part berikutnya (part 5) atau lihat kembali part sebelumnya.
sumber: https://www.posciety.com/cara-membuat-website-responsive-bootstrap-part-4-10/

PART 5
GRID Style & Links
TIPS & TRICKS
Diperbarui 17 Mar 2019

Pada part 5 ini, kita akan beralih dulu ke cara membuat halaman / page. Pada part-part sebelumnya kita baru membangun halaman beranda (home/index.html) dan baru sampai bagian My Projects + tombol Lihat Semua Projects. Tombol ini tentunya harus mengarah ke suatu halaman yang menampilkan semua projects karena pada bagian My Projects itu hanya menampilkan beberapa projects saja.

Silahkan buat folder baru di folder root website masing-masing, bebas mau dibuat dimana tapi disarankan sejajar saja dengan folder CSS supaya tidak kesulitan memanggilnya nanti. Silahkan buat folder baru, berinama apa saja yang penting tanpa spasi dan usahakan huruf kecil semua supaya tidak bingung memanggilnya. Misalnya “pages“.

Sekarang, buka code editornya misalnya aplikasi Sublime Text. Buat file baru di code editor kemudian Save sebagai file HTML didalam folder “pages” tadi. Kasih nama file itu yang gampang-gampang aja supaya gak ribet manggilnya, misalnya semua-projects.html. Sekarang saatnya membangun halaman ini.

Buka kembali file index.html / beranda, salin code dari paling atas DOCTYPE sampai tag penutup /nav Bootstrap. Tempelkan di file semua-projects.html, kemudian salin lagi code di index.html bagian bawahnya dari mulai script di footer sampai tag penutup </html> dan tempelkan di file semua-projects.html tepat dibawah tag penutup </nav> tadi. Maka hasilnya akan seperti ini:

LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Tutorial Rio Bermano</title>


<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">




</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Navigasi →</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rio Bermano</a>
</div>


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="../index.html">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Blog</a></li>
<li class="active"><a href="#">Semua Projects</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Terlaris</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Cari...">
</div>
<button type="submit" class="btn btn-default">Cari</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Penulis Blog</a></li>
<li><a href="#">Pekerjaan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Kustom</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>


<script src="../js/jqueryo.js"></script>

<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Kenapa disalin dari index.html ? Karena navigasi ini kita buat sama antara halaman beranda dan halaman semua projects, silahkan ganti atau buat berbeda jika ingin menampilkan navigasi berbeda. Diantara code yang disalin ini baru kita membangun sebuah halaman.

Sejauh ini, waktu dilihat semua-projects.html di browser pasti berantakan. Gak perlu khawatir 😀 itu cuma soal direktori aja. Karena posisi index.html dan semua-projects.html berbeda (tidak sejajar) maka kita perlu merubah cara pemanggilan CSS dan Script yang ada di semua-projects.html.

Silahkan tambahkan dua titik dan garis miring (../) disetiap pemanggilan direktori, contoh: src=”../js/bootstrap.min.js”. Begitu juga untuk file CSS dan file lainnya karena posisi index dan semua projects berbeda, kalo masih bingung tinggal di copy aja code diatas atau klik disini untuk mempelajari lebih lanjut tentang memanggil file di root direktori berbeda.

Jangan lupa, pada menu Semua Projects dikasih link yang mengarah ke halaman semua-projects.html contoh: “pages/semua-projects.html“. Bisa klik disini juga untuk mempelajari cara menyisipkan link di HTML atau klik disini untuk membuat link a href pada menu terbuka di tab browser baru ketika di klik.

Selanjutnya, silahkan salin code dari file index.html bagian My Skills yang sebelumnya sudah dibuat dan tempelkan di file semua-projects.html setelah tag penutup </nav>:

<div class="container-fluid">
<div class="col-sm-12 judul text-center">
<h1>My Portfolios / Projects</h1>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href="../portfolio/portfolio1.html"><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 1</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test2.jpg" class="img-responsive"></a>
<h2>Portfolio 2</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test3.jpg" class="img-responsive"></a>
<h2>Portfolio 3</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 4</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 1</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test2.jpg" class="img-responsive"></a>
<h2>Portfolio 2</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test3.jpg" class="img-responsive"></a>
<h2>Portfolio 3</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 4</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 1</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test2.jpg" class="img-responsive"></a>
<h2>Portfolio 2</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test3.jpg" class="img-responsive"></a>
<h2>Portfolio 3</h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href=""><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 4</h2>
</div>
</div>
</div>
</div>
</div>
Karena ini hasil salinan dari My Skills, artinya tampilannya akan sama dengan apa yang ditampilkan pada bagian My Skills di index.html. Silahkan ganti-ganti aja sesuai keinginan. Bisa perhatikan pada kode diatas, sudah ganti bagian-bagiannya sehingga berbeda dengan apa yang ditampilkan di My Skills. Save dan lihat hasilnya !

Untuk menambahk atau mengurangi baris, bisa atur aja di bagian row. Setelah mengatur halaman ini, jangan lupa untuk memberikan link di tombol Lihat Semua Project pada bagian My Projects index.html yang mengarah ke halaman semua-projects.html. Berikan link href=”pages/semuaprojects.html”.

Tambahan
Mumpung ingat, kita buat bagian Footer yang akan digunakan untuk menampilkan copyright. Silahkan buat code seperti ini:

<div class="container-fluid">
<div class="row copyright text-center">
<p>All Rights Reserved 2016 | <a href="https://posciety.com">Tutorial Rio Bermano</a></p>
</div>
</div>
Buat kode ini di sebelum script Bootstrap bagian bawah atau di setelah bagian terakhir setiap masing-masing halaman. Selanjutnya berikan nilai pada file CSS seperti ini, untuk mengatur style dari Footer:

.copyright {
background-color: #c41617;
padding: 1% 0;
}
.copyright p {
color: #fff;
}
.copyright a {
color: #000;
}
.copyright a:hover {
text-decoration: none;
color: #fff;
}
Silahkan atur style nya sesuai selera ya… Jangan lupa buat Copyright juga di halaman index.html dan di semua halaman yang kalian buat.

Masih bingung ? Lihat : Video tutorial cara membuat template Bootstrap sendiri part 5.

Sudah paham ? Yuk lanjut ke part berikutnya, atau lihat lagi part sebelumnya.
sumber: https://www.posciety.com/cara-membuat-website-menggunakan-bootstrap-part-5-10/

PART 6
Halaman Detail Post & Sidebar Responsive
TIPS & TRICKS
Diperbarui 17 Mar 2019

Pada part-part sebelumnya kita sudah membuat sebagian halaman home (index.html) dan halaman penampil Semua Projects / portfolio, kali ini kita lanjutkan membuat halaman single / pos single untuk masing-masing projects / portfolio yang ada.

Sebelum itu, silahkan buat folder baru terlebih dahulu di root website kalian silahkan beri nama misalnya portfolio.

Selanjutnya buka code editor yang digunakan misalnya Sublime Text / Adobe Dreamweaver kemudian buat file baru misalnya contohportfolio1.html (nama file ini adalah nama dari portfolionya, silahkan sesuaikan karena ini nanti akan menjadi URL). Simpan file contohportfolio1.html ini didalam folder baru portfolio tadi.

Persiapan
LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

Seperti biasa, kita buat bagian navigasi terlebih dahulu dan navigasi ini sama dengan navigasi-navigasi di halaman sebelumnya. Jadi, copy code yang ada di file sebelumnya (semuaprojects.html / halaman yang kemarin dibuat untuk menampilkan semua projects) dari bagian atas code (!doctype) sampai tag penutup </nav> kemudian tempelkan di file baru contohportfolio1.html.

Kasih jarak dengan menekan Enter beberapa kali supaya tidak bingung, kemudian copy lagi code yang ada di file sebelumnya (semuaprojects.html) bagian Copyright sampai paling bawah (tag penutup </html>) tempelkan di file baru contohportfolio1.html.

Sebelum melanjutkan membangun pos tunggal contohportfolio1.html ini, kita buat sedikit perubahan terlebih dahulu pada semuaprojects.html (halaman yang menampilkan semua project) dengan menambahkan link dibagian a href=”” nya. Silahkan isi link supaya mengarah ke pos tunggal contohportfolio1.html misalnya:

<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body text-center">
<a href="../portfolio/contohportfolio1.html"><img src="../media/image/test1.jpg" class="img-responsive"></a>
<h2>Portfolio 1</h2>
</div>
</div>
</div>
Perhatikan pada bagian a href=”” nya, silahkan masukkan link yang mengarah ke file contohportfolio1.html (sesuaikan dengan nama file yang kalian buat). Dengan begitu, ketika seseorang mengklik Portfolio 1 di halaman Semua Projects akan diarahkan ke pos tunggal contohportfolio1.html.

Bisa pelajari disini bagaimana cara memanggil file di HTML dan disini.

Silahkan lakukan ini pada semua a href=”” portfolio yang ada di halaman Semua Projects dan arahkan ke pos tunggal portfolionya masing-masing. Silahkan di coba yang Portfolio 1 tadi, maka akan mengarah ke pos tunggal / detail dari contohportfolio1.html tapi belum ada apa-apanya karena belum kita bangun pos tunggalnya.

Hal ini juga dapat kalian lakukan pada link a href=”” yang ada di bagian My Projects di halaman beranda (index.html), silahkan terapkan masing-masing link portfolio supaya ketiak di klik portfolionya akan mengarah ke pos tunggal portfolio juga.

Pos Tunggal Portfolio
Biasanya, pada pos tunggal itu terdapat sidebar / widget di samping dari pos detail. Posisinya silahkan kalian yang tentukan apakan sidebar nya mau di sebelah kiri atau di sebelah kanan, jika disebelah kanan maka kode nya seperti ini:

<div class="container-fluid">
<div class="col-md-9 col-sm-12 detail-portfolio"></div>
<div class="col-md-3 col-sm-12 widget-portfolio"></div>
</div>
Jika ingin di sebelah kiri tinggal diubah saja posisi col-md-3 berada diatas, silahkan atur juga ukuran lebar masing-masing col- sesuai selera seperti yang sudah dijelaskan pada part-part sebelumnya. Jangan lupa tambahkan class baru juga buatan kalian sendiri contohnya detail-portfolio dan widget-portfolio supaya kita bisa memberi gaya bebas nantinya untuk bagian-bagian tersebut.

Setelah mempelajari dari part 1 sampai part 5 kemarin, saya rasa tidak perlu dijelaskan terlalu panjang tentang pembuatan halaman seperti ini karena tidak berbeda jauh dengan halaman-halaman yang kita buat sebelumnya. Tapi untuk contoh aja, misalnya saya membuat pos tunggal ini dengan code berikut:

<div class="container-fluid">
<div class="col-md-9 col-sm-12 detail-portfolio">
<div class="row">
<h2>Detail Portfolio 1 Rio Bermano</h2>
<p><img src="../media/image/test1.jpg" class="img-responsive"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="col-md-3 col-sm-12 widget-portfolio">
<div class="widget-portfolio-terbaru">
<h2 class="text-center">Portfolio Terbaru</h2>
<ul>
<li>
<div class="gambar-portfolio-terbaru">
<img src="../media/image/test2.jpg">
</div>
<div class="judul-portoflio-terbaru" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
<a href="">Portfolio 1 Rio Bermano</a>
</div>
</li>
<li>
<div class="gambar-portfolio-terbaru">
<img src="../media/image/test2.jpg">
</div>
<div class="judul-portoflio-terbaru">
<a href="">Portfolio 2 Rio Bermano</a>
</div>
</li>
<li>
<div class="gambar-portfolio-terbaru">
<img src="../media/image/test2.jpg">
</div>
<div class="judul-portoflio-terbaru">
<a href="">Portfolio 3 Rio Bermano</a>
</div>
</li>
<li>
<div class="gambar-portfolio-terbaru">
<img src="../media/image/test2.jpg">
</div>
<div class="judul-portoflio-terbaru">
<a href="">Portfolio 4 Test Test Rio Bermano</a>
</div>
</li>
<li>
<div class="gambar-portfolio-terbaru">
<img src="../media/image/test2.jpg">
</div>
<div class="judul-portoflio-terbaru">
<a href="">Portfolio 5 5 7 8 Rio Bermano</a>
</div>
</li>
</ul>
</div>
</div>
</div>
Mungkin tidak terlalu bagus, karena ini hanya contoh saja. Silahkan gunakan code diatas jika ingin membuat pos tunggal yang sama atau silahkan buat baru atau bisa juga mengedit kode-kode diatas. Style yang saya gunakan untuk pos tunggal ini adalah:

/* DETAIL PORTFOLIO */
.detail-portfolio p {
text-align: justify;
}
.detail-portfolio p img {
width: 250px;
float: left;
margin: 0 1% 1% 0;
}

/* Widget Portfolio */
/* Portfolio Terbaru */
.widget-portfolio-terbaru ul {
list-style: none;
}
.widget-portfolio-terbaru ul li {
overflow: hidden;
margin-bottom: 4%;
}
.widget-portfolio-terbaru ul li:hover {
box-shadow: 2px 2px 2px #000;
}
.gambar-portfolio-terbaru img {
width: 40%;
float: left;
margin-right: 2%;
}
.judul-portoflio-terbaru a {
color: #c41617;
}
.judul-portoflio-terbaru a:hover {
text-decoration: none;
}
Save dan lihat hasilnya !

Contoh dari pos tunggal ini, menampilkan gambar mini di float left / hamparan kiri supaya gambarnya berada di sebelah kiri dari tulisan-tuilisan portfolio. Pada widget nya sendiri disini baru saya tambahkan 1 widget saja yaitu Portfolio Terbaru yang menampilkan semua postingan portfolio terbaru, silahkan tambahkan widget yang kalian butuhkan dibagain bawahnya dan pastikan itu diisi link juga yang mengarah ke masing-masing pos tunggal portfolionya.

Jika text / tulisan yang ditampilkan di widget terlalu panjang akan terlihat jelek, maka jangan lupa gunakan overflow hidden seperti yang diterapkan pada style code diatas supaya tulisannya tidak berantakan.

Masih bingung ? Lihat : Video tutorial cara membuat single post dan sidebar.

Sedikit tambahan saja, pada bagian navigasi silahkan masukkan link yang mengarah ke halaman semuaporjects.html (halaman yang menampilkan semua project / portfolio) di bagian menu Portfolio supaya ketika di klik dari pos tunggal portfolio akan mengarahkan ke halaman Semua Projects.

Sudah paham ? Lanjutkan ke part berikutnya atau baca lagi part sebelumnya.
sumber: https://www.posciety.com/membuat-website-bootstrap-100-responsive-part-6-10/

PART 7
Menambah Section "Layanan Kami"
TIPS & TRICKS
Diperbarui 17 Mar 2019

Di part 7 ini kita akan kembali lagi ke halaman home / index.html melanjutkan sisa-sisa part sebelumnya yang baru sampai bagian My Projects / My Portfolio, kali ini kita akan membuat bagian Our Service / Layanan Kami dibagian bawahnya. Bagian ini biasanya menggunakan gambar sebagai ikon dari layanan tersebut dan sedikit deskripsi.

HTML
<div class="container-fluid">
<div class="col-sm-12 judul-our-services">
<h2 class="text-center">Our Services</h2>
</div>
<div class="col-md-6 col-sm-12 service-kiri">
<div class="item-service">
<ul>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-sm-12 service-kanan">
<div class="item-service">
<ul>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
<li>
<div class="gambar-item-service">
<img src="media/image/service/service1.png">
</div>
<div class="deskripsi-item-service">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
Copy kode diatas tepat dibagian bawah setelah tag </div> penutup bagian My Projects di part sebelumnya, jika kalian perhatikan kode diatas menggunakan list <li> yang tidak berbeda jauh dengan kode saat kita membuat bagian widget di sidebar tapi bagian ini akan ditampilkan lebih bagus lagi tidak seperti widget yang benar-benar menampilkan sebagai list.

CSS
LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

Code CSS yang digunakan seperti ini:

.judul-our-services {
margin: 3% 0;
}
.item-service {
height: 100%;
overflow: auto;
}
.service-kiri {
height: 70vh;
margin-bottom: 5%;
}
.service-kanan {
height: 70vh;
margin-bottom: 5%;
direction: rtl;
}
.item-service ul {
list-style: none;
}
.item-service ul li {
width: 99%;
}
.item-service li:nth-child(odd) .gambar-item-service {
float: left;
}
.item-service li:nth-child(even) .gambar-item-service {
float: right;
}
.gambar-item-service img {
width: 100%;
}
.deskripsi-item-service p {
text-align: justify;
}
Mungkin ada beberapa pembaca yang bertanya apa itu nth-child seperti yang ditulis di CSS diatas, silahkan pelajari selengkapnya tentang nth-child disini.

Kita buat bagian Our Service ini menjadi dibagian yaitu kiri dan kanan, uniknya lagi masing-masing bagian ini bisa di scroll didalam kolom / div yang artinya jika kalian memiliki layanan yang super banyak tetap dapat dibaca dengan cara scroll pada bagian ini dan halaman tetap diam.

Untuk mencobanya, silahkan Save dan lihat hasilnya !

Masih bingung ? Lihat : Video tutorial membuat website responsive Bootstrap Part 7.

Bagaimana bisa scroll di dalam kolom seperti itu ? Bahkan scroll keduanya (kanan & kiri), silahkan klik disini untuk mempelajari selengkapnya tentang membuat scroll didalam kolom / div. Seperti biasa, desain yang digunakan disini hanya contoh saja (terapkan gaya seperti warna dan gambar yang ditampilkan sesuai keperluan supaya terlihat lebih menarik).

Klik disini untuk melanjutkan ke part berikutnya, atau klik disini untuk membaca lagi part sebelumnya (part 6).
sumber: https://www.posciety.com/cara-membuat-website-html-css-dengan-bootstrap-responsive-part-7-10/

PART 8
Slider & Carousel Responsive
TIPS & TRICKS
Diperbarui 17 Mar 2019

Cuma mau ngingetin aja nih, buat kamu yang baru lihat postingan ini pastiin udah ikutin tutorial ini dari part-part sebelumnya karena tutorial ini saling terhubung sama lain.

Pada postingan kali ini kita akan membuat bagian Testimonial dibawah bagian Our Service yang sudah selesai dibuat pada part sebelumnya. Testimonial ini biasanya berupa slider yang menampilkan beberapa testimonial pelanggan dan slide secara otomatis. Awalnya pasti harus ada bungkusnya terlebih dahulu untuk membungkus bagian Testimonial ini, langsung saja buat code seperti ini tepat dibagian bawah tag penutup bagian Our Service:

<div class="container testimonial">
<div class="row">
<div class="col-xs-12">

</div>
</div>
</div>

Seperti yang kamu lihat, code diatas menggunakan col-xs-12 yang artinya akan full width ketika dibuka di perangkat kecil dan tingginya otomatis dan didalam col-xs-12 inilah kita akan menampilkan slider Testimonial. Seperti biasa kita menggunakan nama class custom (testimonial) untuk dipanggil di CSS-nya nanti.Langsung aja masukkan kode ini didalamnya:

<h2 class="text-center">Testimonial</h2>
<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 data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div>
<div class="item">
<img src="media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 2</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div>
<div class="item">
<img src="media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 3</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div>
<div class="item">
<img src="media/image/bg/bg-testimonial.jpg">
<div class="carousel-caption">
<h1 class="hidden-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h1>
<h4>Nama Pengguna 4</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
</div>
</div>
</div>


<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">Sebelumnya</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">Selanjutnya</span>
</a>
</div>
Tag h2 diatas itu untuk judul seperti biasa pada setiap bagian sebelum-sebelumnya memang diberikan judul, tag ol diatas adalah indikator yang berfungsi untuk menggerakkan slide-slide. Pada Bootstrap kita cukup menambahkan <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">seperti yang diterapkan pada codingan diatas untuk membuat indikator bulat (radio) dibagian bawah slider.

LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

Sedangkan <div class="carousel-inner" role="listbox">adalah list atau daftar slide yang akan digunakan, masing-masing slide dibungkus dengan div class item. Pada tutorial ini saya hanya menampilkan beberapa slide saja untuk mengurangi slide silahkan hapus bagian div class item, tambahkan jika ingin menambah slide.

Dimana saya bisa mengedit isi slide ? Kamu dapat mengatur isi slide di dalam div class item, disini saya menggunakan tag h1 untuk menampilkan icon Bootstrap (glyphicon), menggunakan h4 untuk judul slide, dan tag p untuk deskripsi slide. Kamu dapat menggantinya dengan apa saja sesuai kebutuhan, pastikan tampilannya menarik dan enak dilihat. Semua isi ini disebut slider caption dan berada didalam div class=”carousel-caption”.

Slider ini dibuat untuk menggunakan gambar, dimana letaknya ? Kamu bisa memasukkan gambar sebagai background masing-masing slide pada tag img yang berada diatas <div class="carousel-caption">silahkan ganti dengan gambar yang diinginkan, Tidak tau cara menyisipkan file gambar ? Klik disini untuk melihat tutorialnya. Setelah membaca tutorial tersebut, mungkin kamu mau mengganti background gambar dengan background video. Bisa ? Tentu bisa…

Catatan: Pastikan gambar yang digunakan memiliki ukuran yang sama supaya slide terlihat rapih dan sejajar (tidak berubah-ubah posisi ketika play)

Pada bagian bawah code terdapat tag a controls yang berfungsi sebagai controller slider, biasanya slider memiliki controller dengan tanda panah di samping kanan dan samping kirinya kan ? Nah… Tag a ini juga berfungsi seperti itu, ketika di klik yang kanan akan ke slide berikutnya dan ketika di klik yang kiri akan mengarah ke slide sebelumnya.

Santai… Kita belum atur style-nya di CSS, saat ini tampilannya mungkin masih sedikit berantakan. Saya sudah siapkan CSS untuk HTML diatas, ini dia:

.testimonial {
margin-bottom: 3%;
}
.testimonial h2 {
margin-bottom: 3%;
}
Gimana ? Mendingan kan ? CSS ini hanya memberi jarak margin saja supaya tidak terlalu nempel dengan bagian-bagian lain. Save dan lihat hasilnya !

Selesai, kamu sudah bisa membuat slider sendiri menggunakan framework Bootstrap. Silahkan coba juga di perangkat kecil atau perkecil ukuran jendela browsernya untuk melihat tampilan slider ini responsive.

Masih bingung ? Lihat : Video tutorial cara membuat slider & carousel Bootstrap.

Sampai sini dulu untuk part 8, jangan lupa lanjutkan ke part selanjutnya atau lihat lagi part 7.

Selamat mencoba !
sumber: https://www.posciety.com/tutorial-cara-membuat-website-sendiri-menggunakan-framework-bootstrap-part-8/

PART 9
Menampilkan Daftar Logo Perusahaan Responsive
TIPS & TRICKS
Diperbarui 16 Mar 2019

Setelah menyelesaikan tutorial dari part 1 sampart 8 tentu sudah banyak hal baru yang dipahami kan ? Jadi, pasti lebih gampang pahami penjelasan-penjelasan di part ini dan part berikutnya, kali ini kita akan tambahkan section / bagian Our Partner atau Our Client dibagian bawah slider yang sudah dibuat di part sebelumnya.

Seperti pada umumnya, Our Partner ini biasanya menampilkan logo-logo perusahaan. Jadi, silahkan siapkan logo-logo perusahaan terlebih dahulu yang akan ditampilkan dibagian ini, disini saya sudah siapkan folder logo-perusahaan didalam folder media >> images yang mana logo-logo ini akan saya tampilkan di bagian Our Partner. Karena logo-logo ini akan ditampilkan dalam ukuran kecil, usahakan logo-logo tersebut memiliki ukuran square supaya terlihat rapih.

Menampilkan di Perangkat md
Silahkan salin dan tempelkan kode berikut dibawah bagian Testimonial yang sudah dibuat pada part berikutnya:

LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

<div class="container our-partners hidden-xs hidden-sm">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-md-1">
<img src="media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/6.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/7.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/8.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-md-1">
<img src="media/image/logo-partners/4.jpg" class="img-responsive">
</div>
</div>
</div>
Bagian ini kita menggunakan container dan seperti biasa tambahkan class custom untuk supaya kita dapat mengedit bagian ini pada CSS dengan memanggil class custom tersebut, perhatikan disini terdapat hidden-xs dan hidden-sm, apa ni artinya ? Ini adalah class Bootstrap yang disediakan untuk menyembunyikan bagian di perangkat kecil seperti HP (hidden-xs, extra small) dan perangkat sedang seperti tablet (hidden-sm, small).

Kenapa kita sembunyikan ? Saya hanya ingin menjelaskan pada teman-teman bagaiman cara menyembunyikan bagian pada perangkat tertentu, nanti kita buat kode seperti ini lagi dibawahnya untuk bagian perangkat xs dan sm, jadi saya bisa menjelaskan banyak hal.

Selanjutnya, jangan lupa berikan judul dengan tag h2 supaya sama dengan judul-judul bagian lain yang pernah kita buat di part-part sebelumnya. Dan seperti biasa judul ini dibungkus dalam div yang memiliki class custom, disini saya pakai class yang pernah kita pakai di part sebelumnya yaitu class-judul-ourservice karena style-nya bakal sama untuk bagian ini jadi gak perlu bikin lagi. Kalo mau bikin lagi juga silahkan, jangan lupa atur di CSS-nya juga.

Sedangkan untuk gambar / logo perusahaan, kita tampilkan dengan tag img seperti biasa menampilkan gambar tapi kita bungkus dulu dengan col-md. Disini saya menggunakan col-md-1 artinya kita bisa membuat sampai 12 buah col-md-1 karena Bootstrap menyediakan perbarisnya 12 col-md, masih ingat kan tentang ini ? Kalo lupa, silahkan baca lagi part-part sebelumnya.

Oya, jangan lupa tambahkan class img-responsive didalam tag img-nya supaya gambar menjadi responsive menyesuaikan ukuran perangkat. Dalam tag img silahkan panggil direktori gambar / logo yang sudah kita siapkan tadi diawal, lupa lagi cara menyisipkan gambar di HTML ? Baca lagi tutorialnya disini.

Catatan: Untuk mendapatkan hasil yang lebih bagus, saya sarankan menggunakan gambar transparan (PNG).

Sekarang, kita tambahkan dulu CSS untuk bagian ini:

.our-partners {
margin-bottom: 5%;
}
Disini kita berikan jarak (margin) bawah saja, karena secara bawaannya bagian ini pasti nempel dengan bagian bawah (footer) karena bagian atas sudah kita kasih jarak pada bagian Testimonial di part sebelumnya. Silahkan simpan dan lihat hasilnya ! Berhasil kan ? Tapi coba perkecil browser kamu, pasti hilang untuk perangkat tablet dan smarthpone, keren kan ?

Menampilkan di Perangkat sm

Jangan khawatir, sekarang kita buat satu lagi bagian ini tapi hanya tampil di perangkat small dan extra small sebagai pengganti kode diatas. Silahkan buat kode seperti ini dibawah kode yang tadi:

<div class="container our-partners visible-sm">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-xs-2">
<img src="media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/6.jpg" class="img-responsive">
</div>
</div>
</div>
Sekarang kita buat bagian yang sama yaitu Our Partner tapi untuk perangkat small (sm) yang sudah kita sembunyikan sebelumnya, Perhatikan di baris sejajar dengan container, disitu terdapat visible-sm, apa artinya ? visible-sm artinya kita memerintahkan bagian ini untuk tampil HANYA di perangkat small seperti tablet.

Simpan dan lihat hasilnya !

Menampilkan di Perangkat xs
Sekarang, ketika browser di kecilkan akan tampil Our Partner versi small (sm) yang sudah kita buat, tapi masih belum tampil di smartphone (extra-small), maka dari itu kita buat lagi codingan untuk extra-small:

<div class="container our-partners visible-xs">
<div class="col-xs-12 judul-our-services">
<h2 class="text-center">Our Partners</h2>
</div>
<div class="row">
<div class="col-xs-2">
<img src="media/image/logo-partners/1.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/2.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/3.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/4.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/5.jpg" class="img-responsive">
</div>
<div class="col-xs-2">
<img src="media/image/logo-partners/6.jpg" class="img-responsive">
</div>
</div>
</div>
Lihat, sekarang kita menggunakan visible-xs yang fungsinya memerintahkan bagian ini untu ktampil HANYA di perangkat extra-small. Simpan dan lihat hasilnya !

Kamu bisa pelajari lebih lanjut tentang hidden dan visible disini.

Lengkap sudah, sekarang bagian ini akan tampil di semua perangkat dengan konten yang sama tapi style-nya berbeda seperti yang kamu lihat pada xs dan sm kita membuatnya menggunakan col-xs-2 dan col-sm-2 artinya setiap perangkat menampilkan konten yang sama hanya gaya menampilkannya saja yang berbeda.

Oya, untuk bagian sm silahkan gunakan col-sm sedangkan untuk bagian xs silahkan gunakan col-xs, ini harus disesuaikan dengan dimana ia ditampilkan (jika kalian mengatur penampilan per perangkat seperti ini) jangan sampai salah karena tidak akan berfungsi.

Masih bingung ? Lihat : Video tutorial cara membuat website sendiri menggunakan Bootstrap.

Berhasil, sekarang kamu sudah memahami bagaiman cara menampilkan konten dengan pengaturan perangkat kustom menggunakan framework Bootstrap.

Selamat mencoba !

Jangan lupa untuk melanjutkan ke part berikutnya (terakhir) atau baca-baca lagi part sebelumnya (part 8).
sumber: https://www.posciety.com/cara-membuat-website-sendiri-pake-bootstrap-part-9-10/

PART 10
Selesai !~
TIPS & TRICKS
Diperbarui 17 Mar 2019

Terimakasih sudah mengikuti tutorial membuat website responsive menggunakan framework Bootstrap dari part 1 sampai part 10 ini yang merupakan part terakhir, sebetulnya tidak ada tutorial lagi di part 10 ini tapi hanya informasi aja karena sebelumnya saya membuat judul sampai part 15.

Karena supaya tidak terlalu banyak part, saya stop saja sampai part 10 ini.

Gak perlu khawatir, kamu tetap bisa ikuti tutorial tentang Bootstrap di kategori Bootstrap. Jangan hapus hasil tutorial yang pernah kamu ikuti karena nanti ke depannya akan kita buat tutorial lain tentang Bootstrap misalnya membuat menu mencitu, atau apapun yang berkaitan tetang framework Bootstrap.

Jadi, kamu bisa ikuti tutorialnya menggunakan template yang pernah kita buat di tutorial 10 part ini.

LIHAT JUGA:
Apa Itu QR CODE? Bagaimana Cara Membuat QR CODE?

Butuh Template Gratis Untuk Website? Yuk Download Disini GRATIS!

Cara Membuat HyperLink / Link HTML

Apakah Situs Web Anda Mobile-Friendly?

Kamu pengunjung baru situs ini ? Saya cuma mau ngingetin lagi, tutorial membuat website Bootstrap ini bisa diikuti oleh siapapun walaupun tidak ada basic IT atau tidak paham codingan tapi akan lebih baik kalo sudah memahami dasar HTML CSS. Di part 1, saya menjelaskan dasar dari nol yangh mudah-mudahan bisa dipahami dengan mudah.

Begitu juga di part-part berikutnya, saya menjelaskan beberapa hal penting dari yang jarang digunakan sampai elemen yang sudah umum. Dengan begitu, kamu gak cuma mengikuti tutorial tapi juga bisa memahami elemen-elemen yang kamu gunakan di framework Bootstrap.

Buat kamu yang mau cari semua tutorial dari part 1 sampai terkahir, silahkan kllik kategori Bootstrap atau gunakan kolom pencarian dengan kata kunci “membuat website bootstrap“.

Lihat : Video tutorial membuat website Bootstrap Part 10.

Selamat mencoba !
sumber: https://www.posciety.com/cara-membuat-website-responsive-mudah-dengan-bootstrap/

BAHASA PEMOGRAMAN

Cari Blog Ini

Membuat Website Bootstrap 100% Responsive

Komentar

Posting Komentar

Postingan populer dari blog ini

Pemograman R Studio

MIGRASI DATABASE DARI SQLite KE MySQL (Part-1)

Cara Menjadi Pengembang Front End – Keterampilan Front End Web Dev