Part 6 Sharing Button Bar - BAGAIMANA CARA MEMBUAT TEMPLATE BOOTSTRAP 4 SENDIRI

Assalaikum wr wb

Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat NavBar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website.

Didalam pembahasan kali ini saya akan membagikan beberapa tips untuk membuat Sharing Button Bar. Kali saya akan menjelaskan tentang tutorial lanjutan cara membuat template dengan bootstrap 4, namu ditambah dengan beberapa css sendiri yang saya desain. Teman-teman bisa mengikutinya dari awal atau langsung.

Hal-hal tersebut harus kita perhatikan karena itu jika tidak diperhatikan maka akan terjadi ketidak sesuaian struktur css atau tata letak template yang akan dibuat. Lihat gambar dibawah ini adalah contoh konten yang saya buat.

Ok langsung saja kita masuk kepembahasan tentang Bagaimana cara membuat Sharing Button Bar menggunakan bootstrap 4. Liat langkah dibawah ini bagaimana cara Bagaimana cara membuat Sharing Button Bar menggunakan bootrtrap 4.

1. Pertama seperti tutorial sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap kalian harus menyiapkan bahannya. Bagi teman yang belum mengikuti langkah awal silakan klik artikel ini Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap.
2. Ada pun langkah selanjutnya teman-teman bisa download bahannya untuk menjalankannya, ada beberapa item yang dibutuhkan dalam pembuatan.
3. Langkah ketiga kita masukan dulu link stylesheetnya seperti gambar yang ada dibawah ini. 

4. Selanjutnya kita akan membuat koding css tambahan disini saya memasukan css internal css, bisa dilihat kodingnya digambar ini.

5. Lalu simpan dengan didalam folder yang sudah dibuat pada tutotial yang sebelumnya Bagaimana cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap dengan format namafile.html, setelah itu coba jalankan.

Dari langkah tersebut saya akan menjelaskan beberapa koding css yang ada. Yang pertama anda bisa melihat gambar dibawah ini.

Bisa dilihat ada yang ada didalam class itu beberapa koding css, icon disini saya memasukan beberapa koding css yaitu menambahkan padding : 20 px; berfungsi membuat suatu jarak antara content dan border sekitar 15px. kemudian font-size : 15 px; lebar widht: auto; text-align: center yang berguna untuk membuat setiap text mejadi ketengah.

Kemudian selanjutnya text-decoration: none; artinya membuat tulisan tidak ada dekorasi atau ada garis. Ada juga margin margin: 5px 2px; yang berfungsi untuk membuat batas luar antara border, lalu yang terakhir adalah  border-radius: 50%; itu fungsinya membuat sebuah lengkungan pada konten sekitar 50%.

Mungkin itu saja penjelasan dari saya jika kurang paham, bisa lihat video dibawah ini, atau silakan tinggalkan komentar dibawah ini, dan jangan lupa share pada teman-teman yang mau belajar tentang cara membuat template sendiri.

Itulah pemaparan yang saya buat jika ada kata-kata yang salah saya mohon maaf saya akhiri, wasalamulaikum wr wb.