Anti Jones! Cara Menciptakan Halaman About/Tentang Ala Chatting Di Blog

Setelah sekian usang 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 mempunyai daya tarik untuk dibaca pengunjung.

Hal inilah yang mendorong aku untuk menciptakan Halaman About/Tentang yang Berbeda dari yang lain. 😊

Setelah aku pikir-pikir, mungkin Halaman About ala Chatting merupakan solusi yang tepat, ingin tau bagaimana rupanya?

Silahkan buka Halaman About JuliKoding berikut.

Sumber Photo : Jeremy Wong

1#Tutorial Membuat Halaman Tentang/About ala Chatting

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

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

Inspirasi Muncul dikala aku gundah sebab Akun Line Terhapus 😂 dan Halaman About belum final 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 arahan dibawah tag ini --> </div>

2. Kemudian, paste kan arahan tersebut pada Laman Baru - Mode HTML, lalu publikasikan..

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

2#Tutorial Menambahkan Kotak Chat di Halaman About

1.1 Pada cuilan tag <style> sampai 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 bila ditemukan dengan jumlah 4. silahkan tambahkan id kotak4 pada posisi yang sama dipisahkan dengan tanda koma ( , )

2.1. Pada cuilan HTML, copy arahan 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 sempurna dibawah arahan yang keterangannya "Tambahkan arahan 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 menyerupai 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 arahan 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 Praktis Membuat Halaman About/Tentang ala Chatting yang Responsive di Blog. Ditunggu komentar kece kalian 👻💬

Bagikan Artikel ini