CARA MEMBUAT IMAGE PROFILE BLOGGER MENGHILANG SAAT DI SENTUH?

Sering dalam desain orang ingin tampilan bloggernya nampak keren misalnya bagaimana membuat image profile penulisnya terlihat beda, salah satunya kami cobakan disini seperti terlihat pada contoh bagian bawah sidebar kanan  blog ini.Cara membuatnya adalah:

1. Masuk ke pengaturan Blogger
2. Pilih "Tataletak" atau "layout" kalau setting blog menggunakan bahasa Inggris
3. Tambahkan gagdet, lalu pilih Add HTML/JavaScript

Pada kotak dialog kosong (tidak usah dikasih judul) kopi-pastekan kode berikut Dbawah ini:

<center><div class="container">

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnbxncS2Y5SjqHkOCg7sWdDorHSbY0N1XF4l8GzXu3IE0aMN4DSDgStEm_1w61CarhpeSmJ-phXJGFwWhs-Qo0GU1t4bItLESggxPannbY0HuM3Ju3-fSU98OjJbvShOe6wGV4E1czLg6/s1600/20181021_132649.jpg" alt="Avatar" class="image" />

  <div class="overlay">

    <div class="text">sofyan</div>

  </div>

</div></center>

<center><div class="card">

  

  <h1></h1>

  <p class="title">Penulis konten</p>Sofyan

  <p></p>

  <a href="#"><i class="fa fa-dribbble"></i></a> 

  <a href="#"><i class="fa fa-twitter"></i></a> 

  <a href="#"><i class="fa fa-linkedin"></i></a> 

  <a href="#"><i class="fa fa-facebook"></i></a> 

  <p><button><a href="https://api.whatsapp.com/send?phone=6281274011304">Contact</a></button></p>

</div></center>

Keterangan: Rubah/ganti link yang disorot warna kuning dengan link gambar anda sendiri. Rubah/ganti juga Nama saya menjadi nama anda sendiri.

Save Tema. Namun belum selesai untuk membentuk animasi "fade in overlay" atau gambar menghilang dan muncul nama anda, kita perlu menambahkan kode css berikut dan letakan sebelum atau diatas kode </style>:

.container {

  position: relative;

  width: 100%;

}

.image {

  display: block;

  width: 100%;

  height: auto;

}

.overlay {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 100%;

  width: 100%;

  opacity: 0;

  transition: .5s ease;

  background-color: #008CBA;

}

.container:hover .overlay {

  opacity: 1;

}

.text {

  color: white;

  font-size: 20px;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  text-align: center;

}

Save Tema dan selesai.