How to Make an Identity Card on a Blog
At the request of one of the blog visitors, I wanted to make a tutorial on 'How to Make an ID Card on a Blog', and previously there was also someone who asked me to make a tutor about widgets or views like this blog.
oh yeah, this identification card can be applied to many platforms, other than just bloggers, for example wordpress.
as long as your website uses fontawesome there is no problem, because in this tutorial the icon uses fontawesome, but if you are SVG users, you can change it yourself.
as long as your website uses fontawesome there is no problem, because in this tutorial the icon uses fontawesome, but if you are SVG users, you can change it yourself.
Alright enough pleasantries, maybe we can just go to the tutorial.
1. Login to your blog account.
2. Select Themes / Themes> Edit HTML
3. Enter CSS below, and place it above </head>
1. Login to your blog account.
2. Select Themes / Themes> Edit HTML
3. Enter CSS below, and place it above </head>
4. Then Add JavaScript below, and place it on </body><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>
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'>×</span> <div class='myar-card'> <div class='image'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCD_VC6hlXwmwcnA8vYp80THDRuiyFeoAHIiLgxpWbvLlFaaQdArlJ6iVZOg0XNkZ1DnTuNQcp58foCM4nkVI29c46z9QKr1Tv4EtOB06K8i7lcHkmwDWrAs-9BiaaPNCnQjsYQHrZcPI/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'>Top Blog Pk</author> <p> <span><a href='https://fb.com/topblogpk'><i class='fa fa-facebook-square' id='iconme'></i></a> <a href='https://twitter.com/' target='_blank'><i class='fa fa-twitter' id='iconme'></i></a> <a href='https://instagram.com/' target='_blank'><i class='fa fa-instagram' id='iconme'></i></a> <a href='https://www.youtube.com/charaghtech' target='_blank'><i class='fa fa-youtube-play' id='iconme'></i></a> <a href='https://api.whatsapp.com/send?phone=92306********&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 place it anywhere as long as it is still in <body> ... </body>. Example you can do it after the <body> tag.
so for you other platform users, you can adjust it.
For the time being I applied it under the </footer> tag.
so for you other platform users, you can adjust it.
For the time being I applied it under the </footer> tag.
6. Save the template, and see your blog
If the icon does not appear / broken, it means your blog is not installed fontawesome, please add the 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 replace the image URL, with your image URL, I marked the URL URL GREEN . Then also replace the social media link with your Social Media, my social media link is marked in BLUE . As for the red color , replace it with your cellphone number.