Cara membuat kartu Profile blogspot keren dalam bentuk kartu animasi

gambar kartu profile anissa
Gambar kartu profile blogspot baru
Halooo guys,
Aku Anissa, sudah lama vacum gak menulis, barusan dapat undangan menulis di editblogtema. 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:
Dcoder image Android application

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:
https://play.google.com/store/apps/details?id=com.paprbit.dcoder
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://1.bp.blogspot.com/-XqdFpHFx8Vc/XPmXOUYz-nI/AAAAAAAAmVk/u7_NPPE1WzkDYEf2HnWmurUNPaCUdVsuACLcBGAs/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:
profile kita pada komentar blog
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 blogger
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
image URL
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.


Comments

  1. Saya senang ketemu atikel ini. Akan saya bookmark dulu , karena saya pengen mencobanya.
    Terima kasih sudah berbagi..
    Hello admin


    Woow Nice article I am like your post. "Perfect"
    Good job Tanks For sharing
    Please follow me back and Good luck


    Youtube Vs book What's On Your Mind Most assume No ...

    ReplyDelete
  2. Sepertinya harus dicoba nih,..karena foto profil saya kecil sekali , mungkin karena templete bawaannya ya 😀

    ReplyDelete
    Replies
    1. Bukan karena templat bawaan, viomagz itu dinamis, yang bikin image kecil itu karena aba aba atau perintah cssnya.

      Delete
    2. Kalau mau diperbesar dengan kode di atas bisa tidak mas 😀

      Delete
    3. Saya membuat sample viomagz melalui inspect elemen browser tapi tentu saja jadi lebih baik karena saya sempurnakan.
      Membesarkan gambar profile cukup masuk ke halaman editor HTML, cari kode berikut:

      /* AUTHOR POST PROFILE */
      .author-profile {
      overflow: hidden;
      margin: 30px 0;
      line-height: 1.5;
      }
      .author-profile img {
      border: none;
      float: left;
      margin-right: 15px;
      border-radius: 46px;

      Dibawah >border-radius: 46px;

      Tambahkan saja kode berikut:
      width:280px;
      height: auto;
      }

      Save template

      Lihat contoh viomagz yang saya buat pada link dibawah:

      https://jesika23.blogspot.com/2017/10/ai-artificial-inteligent-4-kemungkinan.html

      Delete
    4. Enggak ada contohnya mas ya,..he-he,.karena di blog percobaannya belum ada foto profil,...kalau bagus saya coba otak-atik juga ,..he-he 😀😁😂

      Delete
    5. Baik, coba lihat kembali pada bagian bawah blog template kloning itu sekarang, tadinya niat mau saya kloning juga isi blognya (becanda ha ha ha) itu gede sampai gak muat kontainer widgetnya sekarang...

      Delete
    6. Dan jangan lupa setelah kartu terbalik menampilkan gambar klik gambar tersebut.

      Delete
    7. Jadi blog jesika23.blogspot itu kloning mas ya,..saya sangka asli dari mas sugeng kemudian di edit lagi,..saya coba lihat dulu mas

      Delete
    8. Wah,..setelah saya lihat ternyata keren mas hasilnya,..bisa mengalahkan mas sugeng ni,..bahkan kompi ajaib pun bisa kalah ni,..mantap mas editannya,..sepertinya saya harus mrngorbankan blog saya yang lain nih untuk bahan percobaan,..ha-ha 😂

      Delete
    9. Mas ada buka jasa edit templete juga mas ya,..seperti mas timon,..he-he, bisa jadi referensi nih untuk rombak templete, karna rombak templete itu enggak mudah,..saya aja dari awal beli sampai sekarang enggak pernah edit 😂😂😂

      Delete
    10. Tapi kalau mau ditampilkan di sidebar itu bisa tidak mas ya

      Delete
    11. aduh gimana jawabnya, pertama benar saya sempat kloning tapi karena merasa bersalah saya sudah beli aslinya. Sama saja kok dengan kloningan gak ada bedanya orang kita inspek secara detail dan teliti melalui trik yang diajarkan di forum forum.

      Kedua: Saya tidak mungkin mengalahkan Mas Sugeng apalagi Kompi Ajaib mereka ini skill serius. Sedang sy hanya hobi dan karena suka mendesain, satu lagi sy tidak akan bisa menyaingi mas Timon dan itu tidak akan terjadi.

      Tentu saja bisa tapi harus dirobah dulu ukurannya ( disesuaikan dengan ukuran sidebar template viomagz dari mas sugeng.

      Viomagz sekarang sudah masuk ke versi baru, sudah dapat update belum?

      Delete
    12. Wah pada belom kenal nama nama blogger diatas, om😁😁😁 tadi barusan browsing orang lama rupanya..

      Delete
    13. Belum ada pantau lagi mas di dashboardnya,.selain itu bagi saya templetenya udah lebih dari cukup 😀

      Delete
  3. Artikelnya sangat membantu... terimakasih... :) :)

    ReplyDelete
  4. Wah kreatif & kekinian template-nya. Nice info...Oh ya, saya follower baru blog ini. Thx

    ReplyDelete
  5. Aku suka cara membahasnya , rileks dan ngga bosenin.
    Belajar editing blog jadi terasa mudah.

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar. Terimakasih!

pilih pola label berikut:

Show more