Membuat Google Business Card

Sebuah identitas dalam dunia Blogger sering kali diterapkan dalam bentuk Navigasi ABOUT ME Banyak pilihan untuk memodifikasi Navigasi/halaman ini, nah kali ini ane gak mau ketinggalan untuk ngepos yang berkaitan dengan beginian, hehheh.

Tutorial kali ini ane kasih nama "Membuat Google Business Card" namun Cartu Nama ini sangat sederhana sekali, tapi sobat blogger bisa Edit ulang untuk hasil yang lebih baik dan menarik.
Untuk previewnya kurang lebih seperti ini :

VIEW A DEMO

Cara Ke-1:-

Seperti biasa sobat Login ke akun Blogger sobat
Klik Buat Entri Baru Klik >>>> HTML Dan Kopas Kode dibawah ini.

Cara Ke-2:-

Seperti biasa sobat Login ke akun Blogger sobat
Klik Laman Klik >>> Laman Baru Klik >>> laman Kosong >>>> Klilk HTML
Kopipaste Kode Dibawah ini.

UNTUK KODE CSS NYA

 <style type='text/css'>

#card {
  background: #fff;
  width: 450px;
  height: 185px;
  margin: 15% auto;
  padding: 20px 30px;
  border: 1px solid white;
  -webkit-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -o-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -khtml-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
  text-align: center; }
  #card h1 {
    color: #dc152c;
    font-weight: normal;
    font-size: 48px;
    margin: 0 0 10px 0; }
    #card h1::first-letter {
      color: #194ff7; }
    #card h1 b {
      color: #f1840b;
      font-weight: normal; }
    #card h1 b + b {
      color: #194ff7; }
    #card h1 b + b + b {
      color: #00940e; }

.content {
  text-align: left;
  /* Pure CSS3 typing animation with steps() :
     http://joens-tutorial.blogspot.com/2013/04/membuat-google-business-card.html */ }
  .content ul {
    padding: 0;
    margin: 0;
    font: 16px Arial; }
    .content ul li {
      list-style: none; }
      .content ul li a {
        color: #12C; }
      .content ul li span {
        display: block;
        width: 100%;
        margin-bottom: 2px; }
        .content ul li span:nth-child(2) {
          margin-bottom: 10px; }
          .content ul li span:nth-child(2) a {
            color: #093;
            text-decoration: none; }
        .content ul li span:nth-child(3), .content ul li span:nth-child(4) {
          font-size: 14px; }
  .content .text {
    border: 1px solid #7ec6fd;
    float: left;
    width: 100%;
    margin-bottom: 10px; }
    .content .text h2 {
      position: relative;
      float: left;
      font-size: 100%;
      font-weight: normal;
      padding: 0;
      margin: 5px 10px; }
      .content .text h2 span {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        background: white;
        /* same as background */
        border-left: 0.1em solid black;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite;
        -moz-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite; }


.animated {
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -khtml-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.4s;
  -o-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  -khtml-animation-duration: 0.4s;
  -ms-animation-duration: 0.4s;
  animation-duration: 0.4s; }

.fadeIn {
  -webkit-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -khtml-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  animation-name: fadeIn; }

/* Typing keyframes */
@-webkit-keyframes typing {
  0% {
    width: 100%; }

  100% {
    width: 0; } }

@-moz-keyframes typing {
  0% {
    width: 100%; }

  100% {
    width: 0; } }

@-o-keyframes typing {
  0% {
    width: 100%; }

  100% {
    width: 0; } }

@keyframes typing {
  0% {
    width: 100%; }

  100% {
    width: 0; } }

/* FadeIn keyframes */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-o-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }
</style>

UNTUK KODE JAVASCRIPT NYA


<script type='text/javascript'>
 $(function() {
  $('ul').hide();
 });
 setInterval(function() {
      $('ul').show().addClass("animated fadeIn");
}, 1100);
</script>

UNTUK KODE HTML NYA


<!-- Google Business Card-->
<div id="card">
 <h1>Go<b>o</b><b>g</b><b>l</b>e</h1>
 <div class="content">
  <span class="text">
  <h2>M. Alex Junaedi<span>&nbsp;</span></h2>
  </span>
  <ul>
   <li>
    <span><a href="http://joens-tutorial.blogspot.com/"><b>M. Alex Junaedi</b> ( Blogger &amp; Developer )</a></span>
    <span ><a href="http://joens-tutorial.blogspot.com/">http://joens-tutorial.blogspot.com</a></span>
    <span>Telp. : 0266 620278</span>
    <span>Email: <b>alex.jd.tea</b>@gmail.com</span>
   </li>
  </ul>
 </div>
</div>

Demikian artikel tentang cara pembuatan Google Business Card, semoga artikel ini bisa membantu sobat Blogger.

Sumber Referensi :