Help you by sincere

October 21, 2018

CARA MEMBUAT IMAGE PROFILE BLOGGER MENGHILANG SAAT DI SENTUH?

4
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 ini:


<center><div class="container">
  <img src="https://1.bp.blogspot.com/-jMEwEZGim5I/W8wcU8MIGqI/AAAAAAAAgw8/MPjgmQdG1G4OpAmqXG2bbHkUdY2MY5hCQCLcBGAs/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.

4 comments:

  1. waduh
    kode-kode yang membingungkan mas

    ReplyDelete
    Replies
    1. Tinggal meletakannya pada tempatnya kok. 😊

      Delete
  2. mas dulu belajar kode gini dmn ?

    ReplyDelete
    Replies
    1. Hanya belajar dari google terutama w3shool.cobalah paling 3 bulan sudah mengerti dasar dasarnya

      Delete

Follow