 |
| web design |
HTML dan CSS sangat berperan dalam hal desain, contoh template editblogtema ini dibuat dengan HTML dan CSS, pembuatannya sangat sederhana dan mudah namun mampu menghasilkan efek efek warna, bentuk border dan animasi yang memukau. Saya akan memberikan contoh pembuatan kartu hanya dengan dua elemen ini.
1. CSS
Tambahkan kode CSS berikut, kalau mau menerapkannya langsung ke halaman blog setiap untaian kode CSS yang dibuka dengan <style> dan kemudian ditutup dengan </style> ya letakan diatas </head><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-outer { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}.flip-card-back { background-color: red; color: white;}.flip-card-front { background-color: red; color: blue; transform: rotateY(180deg);}</style>
2. HTML
Tambahkan saja HTML dibawah ini kalau menerapkannya keblogspot setiap kode HTML yang dibuka atau diawali tag <duv> dan kemudian ditutup dengan </div> ya letakan dibawah kode <body> atau dibawah kode </head><h1>Kartu Tanda Pengenal</h1><h3>Sentuh dengan jari atau kursor mouse:</h3>
<div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhztKlJLOYutnpZenaLTjOyfbLrjmE9__k0wZjewSqzCZ6GPIMSChB6fRTG1dK4T-L-zB1A34azMrFcOVXLPoj0sMEc4A6BQtsqyVy-uBNq6MGioQpr8WUtbDu7KZmVDy0bzWyGzhFz9Vul/s1600/collage_1556976585604+%25281%2529.jpg" alt="Avatar" style="width:300px;height:300px;"> </div> <div class="flip-card-back"> <h1>Edit Blogtema</h1> <p>Writer & Constributor</p> <p>at www.editblogtema.net</p> </div> </div></div>
3. Itu saja semuanya dan selesai.
Perhatikan kode yang saya sorot kuning adalah link sumber photo yang telah saya save terlebih dahulu di halaman blog atau di google drive, dan google photo juga boleh. Sedangkan tulisan warna merah bisa sobat robah sesuai dengan keperluan, misalnya jika ingin menjadikan kartu ini sebagai profile unik blogspot.
Sobat bisa mengkopi dan menggabungkannya semua kode diatas lalu masuk ke setting blogspot tambahkan widget/gadget, pilih HTML/JavaScript kemudian pada kotak blanko kosong yang muncul pastekan seluruh kodenya dan SAVE. Dalam bentuk widget kita dapat menempatkan posisinya dimana kita suka.
Atau lihat ihat hasilnya dibawah artikel ini (profile Anissa):
www.editblogtema.net
hasilnya lumayan bagus Mas, ada efek rotasinya lagi....cocok untuk pesan perkenalan ke sesama teman blogger
BalasHapusSebenarnya itu hanya contoh, dengan memodifikasi material CSS-nya, akan dapat dibuat jauh lebih indah he he he...murni CSS HTML sangat ringan
HapusKereeeennn.. itu buat sendiri mas kode-kodenya? :D
BalasHapusKode kode ya ditulis dari contoh contoh yang pernah kita pelajari, itu kan sudah pernah diajarkan di bangku sekolah dasar dasar koding, hanya saja ternyata Google mengajarkan lebih banyak he he he..
Hapus