MEMBUAT DESAIN IMAGE GAMBAR PROFILE SEPERTI KARTU BOLAK BALIK DI WEB

Banyak cara untuk menarik perhatian dalam web desain, gunanya tentu saja untuk menaikan rating bisnis. Kali ini saya ingin memberikan contoh bagaimana caranya kita bisa membuat image atau photo profile yang bisa di bolak balik pada website atau blog. Perhatikan dan sentuh gambar saya dibawah ini:

APA GUNANYA?
Dengan rekayasa ini saya berharap akan memudahkan untuk menyimpan, memeriksa dokumen yang mempunyai dua sisi bolak balik secara online. Di zaman dimana kebutuhan seperti ini telah menjadi keharusan saya berharap ini adalah terobosan. Misalnya jika anda memiliki Serifikat yang harus di periksa bolak balik depan dan belakangnya, atau KTP dengan keterengan dibelakangnya.

Kartu profile bisa dibolak balik

Tap atau sentuh gambar dibawah ini:

Avatar

Sofyan_yaan

Penulis dan pemilik editblog
web desainer di digitalcrafts
Kodenya adalah:
Sebelumnya klik bar dibawah untuk mengembalikan posisi gambar:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

font-family: Arial, Helvetica, sans-serif;

}

.flip-card {

background-color: transparent;

width: 300px;

height: 300px;

perspective: 1000px;

}

.flip-card-inner {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.6s;

transform-style: preserve-3d;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.flip-card:hover .flip-card-inner {

transform: rotateY(180deg);

}

.flip-card-front, .flip-card-back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

}

.flip-card-front {

background-color: #bbb;

color: black;

z-index: 2;

}

.flip-card-back {

background-color: #2980b9;

color: white;

transform: rotateY(180deg);

z-index: 1;

}

</style>

</head>

<body>

<h1>kartu gambar bolak balik</h1>

<h3>Tap atau sentuh photo:</h3>

<div class="flip-card">

<div class="flip-card-inner">

<div class="flip-card-front">

<img src="isi dengan link gambar anda" alt="Avatar" style="width:300px;height:300px;">

</div>

<div class="flip-card-back">

<h1>Sofyan-Yaan</h1>

<p>Pemilik dan Penulis</p>

<p>desainer di digitalcraft</p>

</div>

</div>

</div>

</body>

</html
>

CARA MENERAPKANNYA PADA BLOG:
Anda bisa menerapkannya pada blog letakan kode CSS diatas ]]></b:skin>, dan kode HTMLnya cukup dimasukan kepengaturan melalu widget  add HTML/JavaScript. Misalnya: Jadi tampilannya bisa diatus disamping sidebar blog pada tampilan ponsel atau dibawah blog

Letakan kode dibawah ini dengan cara masuk ke pengaturan blog>tataletak>tambahkan widget>pilih HTML/JavaScript:

KODE HTML:
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="Link photo anda" alt="Avatar"style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Mr. Anu</h1>
<p>Tukang Ledeng</p>
<p>bla bla bla</p>
</div>
</div>
</div>

KODE CSS:
Lalu masuk kepengaturan blog pilih TEMA kemudian masuk kepada opsi "EditHTML" dan cari kode ]]></b:skin> letakan kode CSS dibawah ini tepat diatasnya (atau anda bisa memasukannya melalui opsi form tambahkan css pada opsi blog desainer)

.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Abaikan kode ini jika anda tidak ingin efek 3D */
}

/* */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* posisi font pada bagian belakang */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.flip-card-front {
background-color: #bbb;
color: black;
}

/* gaya bagian belakang */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}


Uji dulu sebelum di SAVE dengan cara "preview" melalui tool pengaturan blog.
Selamat bersenang senang, karena anda sangat berharga.


Comments

  1. Hyeeeee horeeee jadi tahu rumus/skrip-nya. Terimakasih.

    ReplyDelete
  2. pakai transition, dulu saya sempat juga eksperimen pakai ransition css 3 kalau ga salah

    ReplyDelete
    Replies
    1. @Sabda Awal: Bukan, itu hanya manipulasi elemen html standard saja

      Delete
  3. Apakah ket atau text di flip card back dapat di rayapi google sehingga berpotensi menjadi keyword ? Kemarin ada pertanyaan teman kenapa gambar di amp tak bisa di klik ( tak ada image lightbox) seperti di template biasa, mungkinkah ini jawabannya?

    ReplyDelete
    Replies
    1. Kurang tau mas, saya cuma fokus manipulasi kode karena itu sekarang pekerjaan saya hehehe.

      Gak berani duga duga...

      Delete
    2. Tapi bisa diterapkan di amp mantap dah.

      Sayang lagi puasa edit template sampai semua valid AMP

      Delete
    3. Klo pakai puasa pahalanya gede ha ha ha

      Delete

Post a Comment

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

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP