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 :

Membuat Google Business Card, Card Name, Business card, Kartu Nama



Cara Ke-1:-

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

Cara Ke-2:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Laman Klik >>> Laman Baru Klik >>> laman Kosong >>>> Klilk HTML
  3. 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 : 

20 Responses to "Membuat Google Business Card"

  1. langsung di copy?? gak ada yang di editkah.

    ReplyDelete
    Replies
    1. Silakan di edit aja sesuai data mis, thank atas kunjungannya mis

      Delete
  2. salut banget deh, mas joen kreatif banget. byk ide2 segar yg keluar.

    ReplyDelete
  3. Replies
    1. terimakasih banyak mas, dan terimakasih juda sudah nyempetin berkunjung

      Delete
  4. mantepp mas tutorialnya, bikin sangat ingin mencoba
    terimakasih mas

    ReplyDelete
    Replies
    1. Sama2 mas, terimakasih banyak atas kunjungannya.

      Delete
  5. trus, scriptyang harus diganti dg nama saya yang mana gan?

    ReplyDelete
    Replies
    1. <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>

      Delete
  6. aku juga mau ikutan nyoba ah hehehe... :)

    ReplyDelete
  7. wah keren nie, pastenya harus di entry baru ya?? klo di widget bisa nda mas??
    oh iy ada sbeuah award untuk mas Alex, di bungkus ya mas, terima kasih

    ReplyDelete
    Replies
    1. wah terimakasih banyak ya mas, hehhehhehh
      terimakasih juga sudah berkunjung.

      Delete
  8. terima kasih sudah berbagi sob...:)

    ReplyDelete
    Replies
    1. sama2 mis, terimakasih kembali atas kunjungannya.

      Delete
  9. wew. boleh juga nih d coba maz !!

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat