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:
Sofyan_yaan
Penulis dan pemilik editblogweb desainer di digitalcrafts
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 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>
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)
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.
Hyeeeee horeeee jadi tahu rumus/skrip-nya. Terimakasih.
BalasHapuspakai transition, dulu saya sempat juga eksperimen pakai ransition css 3 kalau ga salah
BalasHapus@Sabda Awal: Bukan, itu hanya manipulasi elemen html standard saja
HapusApakah 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?
BalasHapusKurang tau mas, saya cuma fokus manipulasi kode karena itu sekarang pekerjaan saya hehehe.
HapusGak berani duga duga...
Tapi bisa diterapkan di amp mantap dah.
HapusSayang lagi puasa edit template sampai semua valid AMP
Klo pakai puasa pahalanya gede ha ha ha
HapusHa ha bisa aja pak,
HapusAmiiin!!
Hapus