How to Make an ID Card on Blog

 At the request of one of the blog visitors, he wanted to make a tutorial on 'How to Make an ID Card on a Blog', and previously someone asked me to make a tutorial about widgets or looks like my blog. :

salam, this identification card can be applied to many platforms, other than just blogger, for example wordpress.

as long as your website uses fontawesome there is no problem, because this tutorial for the icon uses fontawesome, but if you are an SVG user, please change it yourself.

Alright, enough with the small talk, maybe we can just go straight to the tutorial.

1. Login to your blog account.

2. Select Themes > Edit HTML

3. Enter the CSS below, and place it above </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>

<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>

<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/AVvXsEgtcVfUjB2kp14tfUDy4O1r5tbsO2P8qNKYCXAZXJFotk1MNVorazHR_Xy03gU6AWU-pHvvR_rCSBdkSgvCdfwbu8_oTLABJPOic13sirRTyOdliJvfBlzt9a_0rbEew5j3BtvLyTKIGOc/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://www.facebook.com/people/Irfan-Shah/100068640972678/'><i class='fa fa-facebook-square' id='iconme'></i></a>
<a href='https://twitter.com/IRFANSH27706743' target='_blank'><i class='fa fa-twitter' id='iconme'></i></a>
<a href='https://www.instagram.com/accounts/login/' target='_blank'><i class='fa fa-instagram' id='iconme'></i></a>
<a href='https://www.youtube.com/channel/UCMMXVNQ2daIY8v3SdLfC5Cg' target='_blank'><i class='fa fa-youtube-play' id='iconme'></i></a>
<a href='https://api.whatsapp.com/send?phone=923123371594&text=Halo%20miusm-tech.com,' target='_blank'><i class='fa fa-whatsapp' id='iconme'></i></a></span></p>
</div>
</div>
</div>
</div>

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

And don't forget, please change the image URL, with your image URL, my Image URL marked GREEN . Then also replace the social media link with your social media, I marked the social media link in BLUE . As for the red color , replace it with your cellphone number.