CARA MEMBUAT IMAGE PROFILE BLOGGER MENGHILANG SAAT DI SENTUH? | editblogtema editblogtema: CARA MEMBUAT IMAGE PROFILE BLOGGER MENGHILANG SAAT DI SENTUH?

Logtema

×
tutorial dan teknik

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 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.

Bagikan (share):

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

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan