Skip to content Skip to sidebar Skip to footer

Cara Membuat About Me Yang Tersambung Dengan Whatsapps




BAHASTUTORIAL.COM - Tutorial kali ini kita bakal bahas tentang "Cara Membuat About Me Di Blog Terbaru".
Kita akan membahas about me yang tersambung dengan whatsapps. Dimana didalam about me terdapat contact form yang tersambung langsung menuju whatsapp. Tentu sangat memudahkan pengujung blog untuk langsung menghubungi kita . kode yang digunakan hanya 2 kode saja yaitu css dan html.

Langsung saja ke tutorial ya ..

1. Masuk ke edit html
2. Kode pada table css simpan di atas kode </b:skin> atau </style>
3. Kode pada table html simpan di halaman page pada mode HTML
4. Lalu Simpan



 
 
<main class='card'>


  <aside class='avatar'></aside>


  <section class='info'>

    <div>
      <h1>CONTACT ME</h1>
      <h2>bahastutorial.com</h2>
      <hr>
      <p>Text About Me</p>

      <button class="cta-btn contact-me"><a href="http://https://api.whatsapp.com/send?phone=6283XXXXXXX&text=%0A%0ACONTACT%ME">CONTACT ME</a></button>
      <button class="cta-btn">KEMBALI</button>

      
    </div>
    <div>
      <p>Follow me on popular social media sites.</p>
      <ul>
        <li>
          <a href="https://www.facebook.com/bahastutorial/?ref=br_rs" target="_blank" class="social-icon"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
        </li>
        <li>
          <a href="#" class="social-icon"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        </li>
        <li>
          <a href="#" class="social-icon"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        </li>
      </ul>
    </div>
  </section>

</main>



/* Start About Me By : bahastutorial.com */

.card {
  margin: auto;
 background: #FEFEFE;
 width: 768px;
  min-width: 320px;
 height: 550px;
 display: flex;
  box-shadow: 5px 5px 5px #A2A2A2;
  border-radius: 7px;
}

.avatar, .info {
  flex: 1;
}

.avatar.contact-active, .info.contact-active {
  display: none;
}

/* AVATAR */
.avatar {
  background: url('https://1.bp.blogspot.com/-2f9TiWCNf68/XG9ikgdrzDI/AAAAAAAAAXc/ZSXkfVEsF3Y16cQNSppIk-DHUSDRsgvAgCLcBGAs/s1600/Tampilan%2BTemplate%2BAmp%2BBlogger.jpeg') center center;
  background-size: cover;
  border-radius: 7px 0px 0px 7px;
   }

/* INFO */
.info {
  padding: 40px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info h1, .info  h2 {
  margin: 0;
}

.info h1 {
  font-size: 2.5em;
  font-family: Comic Sans MS;
}


.info h2 {
  font-size: 1.5em;
  color: #C35362;
  font-family: monospace;
}

.info hr {
  border-top: 1px solid #e3e3e3;
}

.info p {
  font-size: .7em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
}

.info .cta-btn {
  height: 40px;
  cursor: pointer;
  padding: 6px 18px;
  margin: 40px 0;
  border: 2px solid #888;
  font-weight: 500;
  text-align: center;
  font-size: 16px;
}


.info .cta-btn.contact-me{
  background-color: #C35362;
  color: white;
  border: none;
  margin-right: 10;
  border: 2px solid #e60000
}

.info ul {
  padding: 0;  
}

.info a {
  color: gray;
}

.info li {
  display: inline-block;
  line-height: 0;
  font-size: 35px;
  margin-right: 5px;
}

 
a:hover{
  color: #1a75ff;
}

.cta-btn:hover{
  background: black;
  color: white; 
}

.cta-btn.contact-me:hover {
  background: #ffcccc;
  color: black;
}
/* End About Me Bahas Tutorial*/ 


Notes

- Semua tutorial yang ada di website bahastutorial.com sudah di coba dan hasilnya berjalan dengan baik.
- Kalian bisa sesuaikan sendiri dari segi gambar, judul, text abou dan nomor whatsapps.
Bagaimana tutorial diatas apakah sudah jelas atau masih ada yang kurang jelas.
Jika ada yang masih kurang paham kalian bisa tanyakan langsung di kolom komentar.
Admin akan merespon dan memberikan solusi agar kalian bisa menjalankanya dengan benar.

Jangan lupa share artikel ini ke media sosial kalian yah. Semoga Bermanfaat ..

BAHASTUTORIAL.COM
BAHASTUTORIAL.COM Selamat Datang Di Situs Bahastutorial.com Di Situs Ini Anda Akan Mendapatkan Tutorial Yang Sangat Bermanfaat Dan Jangan Lupa Untuk Share Tutorial Ini Ke Media Sosial Kalian.

Post a Comment for "Cara Membuat About Me Yang Tersambung Dengan Whatsapps "