Cara membuat kartu Profile blogspot keren dalam bentuk kartu animasi

Gambar kartu profile blogspot baru

Halooo guys,
Aku Anissa, sudah lama vacum gak menulis,  awalnya bingung mau nulis apa ya soalnya blog ini tutor dan teknis. Namun setelah baca baca akhirnya kutemukan bahannya, sederhana saja. Cara membuat kartu profile beda dengan efek animasi. Kebetulan aku kan suka utak atik HTML CSS dan JavaScript juga. Jadi cucoklah :D.

Ini sebenarnya hanyalah manipulasi daripada link profile asli  profile kita namun dibuat agar lebih keren dan beda. Seperti yang telah kita ketahui blogger itu telah menyediakan gadget profile atau widget bawaan (default) yang tinggal dipasang saja disidebar atau dimana saja yang kita inginkan (tinggal di geser, drag pake mouse).

Nah berdasarkan kode yang telah dibuat oleh pemilik blog ini (editblogtema) yang ditulisnya dengan judul:

MEMBUAT KARTU PROFILE: PERANAN CSS DAN HTML DALAM DESAIN WEB 

Aku mencoba memodifikasi agar tampilannya tampak lebih keren, diantara hal hal yang aku edit adalah:

1. Warna CSS-nya
2. Link URL dan image profile ke profile asli blogspot kita
3. Manipulasi border-dash untuk membentuk kartu (persegi, bundar, bulat dll)

Ini hanyalah bentuk kreasi, anggap saja teman teman sedang menggambar dengan bentuk dan warna warni, begitu juga dengan memodifikasi tampilan visual suatu objek melalui HTML.

Mari kita lanjutkan. Aku menggunakan tablet dan sering melakukan pengeditan kode yang telah ada tersebut melalui aplikasi Android Dcoder. Kalau teman teman mau mendownloadnya silahkan ikut link berikut resmi kok dari Play Store Android klik saja gambar dibawah ini:

Zaman serba mudah ya teman teman, belajar saja sudah bisa dan mudah melalui mobile. Dari sana aku mengedit seluruh kode scriptnya, jangan kuatir kode kodenya sudah dalam bentuk jadi kok, teman teman tinggal menggunakannya saja.
Namun sebenarnnya aku juga memanfaat CodePen untuk belajar utak atik script dan koding.

Langkah pertama Menambahkan blanko widget HTML/JavaScript

1. Masuk kepengaturan blog
2. Pilih Lay out atau tataletak
3. Pilih tambahkan gagdet/widget
4. klik widget HTML JavaScript

Akan muncul kotak widget dalam bentuk blanko kosong dengan kolom judul diatasnya, oke tulis saja misalnya "My Profile" sebagai judul, contohnya:

widget blanko kosong HTML/JavaScript

Langkah kedua menambahkan kode modifikasi HTML/Java Script

Nah pada blanko kosong diatas pastekan kode yang telah aku modifikasi diabawah ini:

<style>body { font-family: Arial, Helvetica, sans-serif;}.flip-card { background-color: transparent; width: 150px; height: 150px; 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);
border: solid; border-radius:180px;color: #E9967A; background: #E9967A;}
.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: transparent; color: white;}.flip-card-front { background-color: #E9967A; color: blue; transform: rotateY(180deg);}</style>

<div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <a href="https://www.blogger.com/profile/01675010269156057449"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiun3K0h7Yh4xYgmdiMDB2MIbNg1sZJH-W7NnOgh996YGQP3Ilq-aY4ha0CqgZVPot-Vy5iss6as8MdYDYXWFzFVXxUpuKH3mBJNM2jfjAKOw8jOoCoBBkCzI05zOakDLsBjTOk2UnVB-ID/s113/Screenshot_20190607-054314.jpg" alt="Avatar" style="width:150px;height:auto;" /></a> </div> <div class="flip-card-back"> <p>Touch me</p> <p>If you want to see</p> <p>My Profile</p> </div> </div></div>

Tunggu, jangan di save dulu! Teman teman perhatikan untaian kode yang aku sorot (highlight) warna warni:

• Hijau itu kode warna background border-dash dan background muka kartu
• Ganti kode yang disorot Kuning itu dengan link URLprofile blogger milik teman teman sendiri
• Sedangkan yang aku sorot merah harus di ganti dengan link URL  image atau gambar profile profile blogger milik teman teman sendiri.

Kita abaikan yang disorot warna hijau. Mari mari kita bahas link URL profile dan link gambarnya saja.

Langkah ketiga Cara menambahkan URL atau link profile blogger milik sendiri:

1.  Langsung saja akses halaman blog teman teman, pada bagian bawah konten atau artikel lihat kebagian komentar. 
2. Klik profile teman teman sendiri

contoh:

Image profile kita pada komentar blog.

Begitu profile di klik, teman teman akan masuk ke URL atau link profile milik sendiri copy alamat pada bar, contoh milik aku:

URL profile blogspot

Hapus kode yang aku sorot pada langkah kedua diatas ganti dengan alamat URL profile blogger teman teman sendiri.

Langkah keempat menambahkan URL atau Link image/gambar blogspot ke kartu

Selanjutnya adalah cara  mengambil link atau URL image/gambar dari profile blogspot diri kita sendiri agar kartu yang kita buat memiliki gambar profile asli blogspot.

Masih melalui edit profile pada bagian bawah image atau gambar profile klik tampilkan layar ukuran penuh

Maka akan muncul tab atau halaman baru perhatikan bagian atas bar alamat URL copy link tersebut

URL link gambar atau image disorot kuning

Perhatikan baik baik link gambar formatnya harus diawali https://1.bp.blogspot.com/...dst.... gunanya ya untuk menampilkan image profile
Ganti link yang aku sorot merah diatas  pada langkah kedua dengan link teman teman sendiri melalui cara ini.

Save template

Untuk melengkapi tutorial aku telah buatkan contoh pada video berikut:

Contoh profile aku ada dibawah konten artikel ini.

Contoh di atas juga telah aku "CodePen" di CodePen, jadi jangan kuatir up to date banget guyssss....Dibawah ini adalah CdePen aku:

Selamat mencoba teman teman....sampai jumpa lagi.

See the Pen Profile blogger blogspot alternative by Anissa Auliasari (@anissa-auliasari) on CodePen.