Anti Jones! Cara Membuat Halaman About/Tentang ala Chatting di Blog

Setelah sekian lama Blogwalkling halaman about/tentang di beberapa Blog atau Website.

Hampir 90% isi didalam halaman tersebut hampir sama dan sangat membosankan untuk dibaca.

Tidak ada sesuatu yang Special atau UNIK sehingga halaman tersebut tidak memiliki daya tarik untuk dibaca pengunjung.

Hal inilah yang mendorong saya untuk membuat Halaman About/Tentang yang Berbeda dari yang lain. 😊

Setelah saya pikir-pikir, mungkin Halaman About ala Chatting merupakan solusi yang tepat, penasaran bagaimana rupanya?

Silahkan buka Halaman About JuliKoding yang dulu(jaman old) :v berikut.

Sumber Photo : Jeremy Wong

1#Tutorial Membuat Halaman Tentang/About ala Chatting

Halaman About/Tentang ala Chat ini memiliki fitur yang hampir sama dengan Aplikasi Chat lainnya.

Yaitu, tombol REPLY dimana ketika di click, maka akan muncul Balasan dari Admin Situs tersebut.

Inspirasi Muncul ketika saya galau karena Akun Line Terhapus 😂 dan Halaman About belum selesai dibuat

1. Copy Semua Kode di bawah ini..

<style>
.post-body{margin:0 auto; display: table;}
 #kotak1 img,#kotak2 img{border-radius: 100%; width: 150px; height: auto; float: left; margin: 10px;}
.kotaknya1, .kotaknya2{background-color: #dedee3; width: 350px; height: auto; float: left; margin-top: 15px; border-radius: 15px; max-height: 500px;}
.kotaknya2{margin-left: 138px;background-color: #879fe3; color: white;}
#nama-orangnya{margin-left: 10px; margin-top: 5px; font-weight: bold;}
#isinya{margin-left: 10px;}
#tombolnya1, #tombolnya2{float: right; margin-right: 10px; padding: 5px; background-color: #879fe3; border-radius: 10%; margin-bottom: 10px;}
#tombolnya2{background-color: #4d4848; float: left; margin-left: 10px;}
#kotak1,#kotak2{clear: both; position: relative; top: 10px; left: 0px;}
#kotak2{display: none; left: 10px;}
@media (min-width:320px) and (max-width: 643px){
  #kotak1 img, #kotak2 img{width: 20%;}
  .kotaknya1, .kotaknya2{width: 70%; float: left;}
 .kotaknya2{margin-left: 0px;}
 }
</style>
<!-- Kotak Chat ala JuliKoding-->
<div style="max-width:700px; margin:0 auto;">
<div id="kotak1">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak2').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak2">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div><!-- Tambahkan kode dibawah tag ini -->
</div>

2. Kemudian, paste kan kode tersebut pada Laman Baru - Mode HTML, kemudian publikasikan..

3. Jika ingin Membuat kotak CHAT selanjutnya, ikuti tutorial berikut ini..

2#Tutorial Menambahkan Kotak Chat di Halaman About

1.1 Pada bagian tag <style> hingga tag penutupnya </style>. Cari id kotak1 (gunakan CTRL + F untuk memudahkan pencarian)

1.2. Jika id kotak1 ditemukan dengan jumlah 3. silahkan tambahkan id kotak3 pada posisi yang sama dipisahkan dengan tanda koma ( , )..

1.3. Lalu cari id kotak2, dan jika ditemukan dengan jumlah 4. silahkan tambahkan id kotak4 pada posisi yang sama dipisahkan dengan tanda koma ( , )

2.1. Pada bagian HTML, copy kode berikut ini..

<div id="kotak1">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak2').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak2">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div>
</div>

2.2 Lalu Paste kan tepat dibawah kode yang keterangannya "Tambahkan kode di bawah tag ini".

2.3 Dan jangan lupa untuk mengubah properti berikut ini..

• kotak1 menjadi kotak3,
• dan kotak2 menjadi kotak4

2.4 Maka kodenya kurang lebih seperti ini..

<style>
.post-body{margin:0 auto; display: table;}
 #kotak1 img,#kotak2 img, #kotak3 img,#kotak4 img{border-radius: 100%; width: 150px; height: auto; float: left; margin: 10px;}
.kotaknya1, .kotaknya2{background-color: #dedee3; width: 350px; height: auto; float: left; margin-top: 15px; border-radius: 15px; max-height: 500px;}
.kotaknya2{margin-left: 138px;background-color: #879fe3; color: white;}
#nama-orangnya{margin-left: 10px; margin-top: 5px; font-weight: bold;}
#isinya{margin-left: 10px;}
#tombolnya1, #tombolnya2{float: right; margin-right: 10px; padding: 5px; background-color: #879fe3; border-radius: 10%; margin-bottom: 10px;}
#tombolnya2{background-color: #4d4848; float: left; margin-left: 10px;}
#kotak1,#kotak2, #kotak3, #kotak4{clear: both; position: relative; top: 10px; left: 0px;}
#kotak2,#kotak4{display: none; left: 10px;}
@media (min-width:320px) and (max-width: 643px){
  #kotak1 img, #kotak2 img, #kotak3 img, #kotak4 img{width: 20%;}
  .kotaknya1, .kotaknya2{width: 70%; float: left;}
 .kotaknya2{margin-left: 0px;}
 }
</style>
<!-- Kotak Chat ala JuliKoding-->
<div style="max-width:700px; margin:0 auto;">
<div id="kotak1">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak2').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak2">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div><!-- Tambahkan kode dibawah tag ini -->
<div id="kotak3">
  <img src="Link-Gambar.png">
  <div class="kotaknya1">
   <p id="nama-orangnya">Siti Rahmah</p>
   <p id="isinya">Mau nanya nih, Admin dari Blog JuliKoding ini siapa ya?</p>
   <div id="tombolnya1" onclick="document.getElementById('kotak4').style.display = 'block'">REPLY</div>
  </div>
 </div>

 <div id="kotak4">
  <div class="kotaknya2">
   <p id="nama-orangnya">Ahmad Jazuli - Admin JuliKoding</p>
   <p id="isinya">Hallo sis, perkenalkan nama Saya Ahmad Jazuli.</p>
   <p id="isinya">Saya bertugas sebagai Admin dan Penulis dari Blog JuliKoding</p>
   <div id="tombolnya2">REPLY</div>
  </div>
  <img src="Link-Gambar.png">
 </div>
</div>
</div>

2.5 Simpan dan Publikasikan.. 😀sekarang halaman About ala Chat berhasil dibuat.

BACA JUGA : Cara Membuat Halaman Partner Link Terbaru & Responsive di Blog

Mudah, bukan ?? Dijamin anda tidak akan Kesepian/Jones 👫 

Dan yang pasti, halaman ini Responsive dan wajib anda buat, khususnya yang ingin Memasang Iklan dari Google Adsense dll.

Sekian Tutorial Mudah Membuat Halaman About/Tentang ala Chatting yang Responsive di Blog. Ditunggu komentar kece kalian 👻💬