Skip to main content

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 untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

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

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

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

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisa…

BENANG MERAH CINTA SANG PENCIPTA

Andy Weir menulis sebuah cerpen pada tahun 2009, cerpen yang sangat menarik, indah sekaligus menakutkan jika dia bercerita perihal ide realitas hidup kita, semacam multiverse dalam fiksi sains dan fisika.
Aku adalah Tuhan dan Kamu sedang dalam perjalanan pulang ke rumah ketika kamu meninggal... Sebuah kecelakaan mobil, sebenarnya bukan peristiwa luarbiasa tetapi kematian tidak pernah memberikanmu pilihan. Kamu meninggalkan seorang isteri dan dua orang anak. Kematianmu itu tidak terlalu menyakitkan, paramedis telah berusaha menyelamatkan hidupmu, tetapi tidak ada harapan, tubuhmu telah hancur, dan itu lebih baik, percayalah kepadaku....
Dan disana, kamu akhirnya bertemu dengan Aku.

"Apa yang terjadi? " kamu bertanya. " Dimanakah aku kini ? " 
"Kamu sudah meninggal," Jawabku dengan suara datar. Bukan seperti nada yang menarik seperti yang kamu harapkan. 
"Apakah tadi aku ditabrak truk?...Sebuah tanjakan.." 
"Benar" Jawabku 
"Aku....…

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Sudah lama saya tidak menulis di halaman blog ini, karena lebih banyak terfokus pada pekerjaan sehari hari. Sampai akhirnya saya tergelitik untuk ikutan menulis tentang UAS, setelah membaca berita yang bertebaran di internet.
Menulis menurut sudut pandang saya sendiri. Atau lebih spesifiknya sebagai seorang blogger.

Fakta 1. Ustad Abdul Somad - Mellya Juniarti Resmi bercerai.
Peristiwa ini menarik perhatian saya apalagi tentang hubungan dua insan yang pernah bertekad memilih hidup bersama selamanya. Siapa sih yang ingin berpisah? Gambar di atas sudah bertebaran di internet, di medsos dan tidak akan dapat di hapus lagi dari dunia maya karena jalin menjalin sangat kuat di dalam library di dunia website.

Saya tahu itu karena saya peminat web dan mengerti segala impikasinya terhadap kehidupan dan privasi manusia pada saat ini. Dunia sekarang telah hampir kepada dimana dinding, lantai dan langit dapat mendengarkan setiap perkataan dan bahkan helaan nafas kita.

Ya, photo itu telah di postin…

PANDUAN LENGKAP MENGEDIT TEMPLATE EMPORIO

Untuk template blogger default versi 3 Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara defau…

ALASAN MENGAPA MENGGANTI SISTEM ANDROID KE SISTEM OPERASI BARU NYARIS MUSTAHIL AKAN SUKSES

Huawei jelas sedang mencoba dan itu pasti akan ada harganya: Akan hadir sebuah sistem baru yang akan membuat kita panasaran seperti apa bentuk dan performanya jika dibanding dengan Android yang selama ini telah memberikannya "nyawa" untuk hidup dan menjadi sebesar sekarang.
Karena kita tahu sehebat apapun sebuah mesin gagdet tiada akan ada artinya tanpa sistem operasi, software dan aplikasi, maka suatu gadget  itu ibarat raga tanpa nyawa. Dilatari nasibnya yang ter"aniaya" oleh Trump (baca:Amerika)  tentu sangat menarik untuk mengikuti perkembangan nasib dari Huawei. Akankah Huawei tetap menjadi besar setelah menggunakan sistem operasinya sendiri?

Baca juga:
Siapa pemenang, siapa pacundang Amerika atau Cina? bagian pertamaSiapa pemenang, siapa pacundang Amerika atau Cina? bagian Kedua Oke mari kita simak penjelasan yang saya simpulkan dari pendapat para ahli mengapa hal itu sulit menjadi kenyataan:
1. Terlihat sederhana Platform mobile beserta ekosistemnya itu sanga…
Copyright © Editblogtema. All rights reserved.