Friday, 4 September 2020

How to Make an Identity Card on a Blog

How to Make an Identity Card on a Blog

How to Make an Identity Card on a Blog
Friday, 4 September 2020

At the request of one of the blog visitors, I wanted to make a tutorial 'How to Make an ID Card on a Blog', and before that someone asked me to make a tutor about widgets or a look like my blog. : 3

oh yeah, this identification card can be applied to many platforms, apart from blogger, for example wordpress.
as long as your web uses fontawesome there is no problem, because in this tutorial for the icon it uses fontawesome, but if you are an SVG user, please change it yourself.

Alright enough ado, maybe we can just go straight to the tutorial.
1. Login to your blog account.
2. Select Themes / 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>

4. Then Add JavaScript below, and place it above </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. Next, add this HTML tag, and place it under </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="//3.bp.blogspot.com/-VEhi2ELkehY/XFwAkdRDhmI/AAAAAAAABOc/T5hsIStIoRAxDGjhgNM4zcHwdY0hgC9twCK4BGAYYCw/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>

For this HTML tag you are free to put it anywhere as long as it is still inside <body> ... </body>. For example you can paste it after the <body> tag.
so for you other platform users, you can customize it.

For now I implement it under the </footer> tag.

6. Save the template, and view your blog.

If the icon is not displayed / broken, it means that your blog has not installed fontawesome, please add fontawesome below to your blog.
<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 URL of the image, with the URL of your image, I mark the Image URL in GREEN . Then also replace the social media link with your Social Media, I mark the social media link in BLUE color As for the red color , replace it with your cellphone number.
For the Demos, click the button below.
Ok, that's all for my short article, if you are confused about the explanation of the article above, please leave your confusion in the comments column below. : v
How to Make an Identity Card on a Blog
4/ 5
Oleh

Comments