Cara Membuat Kartu Pengenal di Blog

Atas permintaan salah satu pengunjung blog, ingin dibuatkan tutorial 'Cara Membuat ID Card di Blog', dan sebelumnya ada juga yang meminta saya untuk dibuatkan tutor tentang widget ataupun tampilan seperti blog saya ini. :3

oh iy, kartu pengenal ini bisa diterapkan ke banyak platform, selain blogger saja, misalnya wordpress.
selama web kalian menggunakan fontawesome itu tidak ada masalah, karena ditutor ini untuk iconnya menggunakan fontawesome, tapi jika kalian pengguna SVG silahkan kalian ganti sendiri ya.

Baiklah cukup basa-basinya, mungkin kita bisa langsung saja ke tutorialnya.
1. Login ke akun blog kalian.
2. Pilih Tema / Themes > Edit HTML
3. Masukkan CSS dibawah ini, dan letakkan diatas </head>

<style type="text/css">
/* Kartu Blog www.myabdurrahim.com*/
.modal{z-index: 7;position:fixed;left:0;top:0;width: 100%;height:100%;background-color:rgba(0, 0, 0, 0.5);opacity:0;    visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s,transform 0.25s;}
.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:.5rem}.close-button{z-index:8;position:absolute;top:10px;right:10px;width:1.5rem;line-height:1.5rem;text-align:center;cursor:pointer;border-radius:50%;background-color:rgba(255,255,255,.36)}.close-button:hover{background-color:rgba(255,255,255,.81)}.show-modal{z-index:7;opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s,opacity .25s 0s,transform .25s}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.myar-card{border-radius:6px;background:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);box-shadow:0 0 10px rgba(0,0,0,.4);overflow:hidden;position:relative;width:300px;height:500px}
.myar-card > .image img{position:absolute;z-index:1;opacity:.3;height:300px;width:300px}
.myar-card > .image:after {height:100px;content:'';top:200px;position:absolute;width:100%;z-index:1;background:-webkit-gradient(linear,left top,left bottom,from(rgba(221,65,127,0)),to(#DD417F));background:linear-gradient(rgba(221,65,127,0),#DD417F)}
.myar-card > .wave {position:absolute;height:735px;width:750px;opacity:.6;left:0;top:0;margin-left:-70%;margin-top:-130%;border-radius:40%;background:radial-gradient(#B01DE8,#F34235);-webkit-animation:spin 3s infinite linear;animation:spin 3s infinite linear}
.myar-card > .wave:nth-child(2) {
  top: 0;
  -webkit-animation: spin 4000ms infinite linear;
          animation: spin 4000ms infinite linear;
}
.myar-card > .wave:nth-child(3) {
  top: 0;
  -webkit-animation: spin 5000ms infinite linear;
          animation: spin 5000ms infinite linear;
}
.myar-card > .info {position:absolute;bottom:25px;left:0;right:0;text-align:center}
.myar-card > .info > .title {font-size:1.3em;font-weight:400;font-family:'Playfair display';color:#333;margin-bottom:8px}
.myar-card > .info > .artist {font-family:'Source sans pro';color:#cfcfcf;font-size:.8em;letter-spacing:.08em;text-transform:uppercase}
.info p{margin:0.5em 0;}
.info span a{margin:0 10px;color:rgba(19, 139, 230, 0.53)}
.info span a:hover{color:#138be6}
  #loncengkartu{position:fixed;top:2%;right:2%;z-index:6;font-size:25px;
  animation: shake 0.5s;
  animation-iteration-count: infinite;}
@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-12.5deg); }
  50% { transform: rotate(-25deg); }
  75% { transform: rotate(12.5deg); }
  100% { transform: rotate(25deg); }
}
</style>

4. Lalu Tambah JavaScript dibawah ini, dan letakkan diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Kartu www.myabdurrahim.com
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
//]]>
</script>

5. Selanjutnya, tambahkan tag HTML ini, dan letakkan dibawah </footer>

<a class='trigger' href='javascript:void(0);' id='loncengkartu'><i class='fa fa-bell'></i></a>
<div class='modal'>
<div class='modal-content'>
<span class='close-button'>&#215;</span>
<div class='myar-card'>
<div class='image'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVI-3az2LnPK6ULCt1Heb34TToXv0w5wg3mwjZdgEhPL9VEFoj0TiKaQPlseC0pQR283vz9JGuTaoTKMkTvuwMRh1VOiGoDa1Lhrnb2KHPH23k7jxHPxeKY3O-wksTLfL-XLR4UllRjc/s1600/hijab.png">
</div>
<div class='wave'></div>
<div class='wave'></div>
<div class='wave'></div>
<div class='info'>
<h2 class='title'>Personal Blogger</h2>
<author class='artist'>Abdurrahim ID</author>
<p>
<span><a href='https://fb.com/myabdurrahim.id'><i class='fa fa-facebook-square' id='iconme'></i></a>
<a href='https://twitter.com/abdurrahim_id' target='_blank'><i class='fa fa-twitter' id='iconme'></i></a>
<a href='https://instagram.com/abdurrahim_id' target='_blank'><i class='fa fa-instagram' id='iconme'></i></a>
<a href='https://www.youtube.com/TopAmazingID' target='_blank'><i class='fa fa-youtube-play' id='iconme'></i></a>
<a href='https://api.whatsapp.com/send?phone=6289617081945&text=Halo%20myabdurrahim.com,' target='_blank'><i class='fa fa-whatsapp' id='iconme'></i></a></span></p>
</div>
</div>
</div>
</div>

Untuk tag HTML ini kalian bebas meletakkannya dimana saja selama masih didalam <body> ... </body>. Contoh kalian bisa meletekkannya setelah tag <body>.
jadi buat kalian pengguna platform lain, kalian bisa menyesuaikannya.
Untuk saat ini saya menerapkanny dibawah tag </footer>.

6. Simpan Template, dan lihat blog kalian

Jika icon tidak tampil/rusak, itu berarti blog kalian belum terpasang fontawesome, silahkan tambahkan fontawesome dibawah ini ke blog kalian.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Dan jangan lupa, silahkan kalian ganti URL gambar, dengan URL gambar kalian, URL Gambar saya tandai warna HIJAU. Lalu Ganti juga link sosial media tersebut dengan Sosial Media kalian, link sosial media saya tandai dengan warna BIRU. Sedangkan untuk warna Merah, ganti dengan nomor Hp kalian.

Untuk Demonya, Klik Tombol dibawah ini.

• DEMO

Ok, sekian artikel singkat saya ini, jika bingung terkait penjelasan artikel diatas silahkan tinggalkan kebingungan kalian dikolom komen bawah. :v