Rabu, 04 Juni 2014

Membuat Tooltips Profil Sosial Media

Artikel Membuat Tooltips Profil Sosial Media ini saya buat berdasarkan tampilan dari link profil Google plus yang jika di sorot dengan mouse akan muncul keteranagn dari profil user di Google Plus dan saya membuat tooltips profil sosial media ini dikarenakan tidak hanya link dari Google plus tapi juga link dari sosial media lainnya seperti Facebook dan Twitter

Membuat Tooltips Profil Sosial Media

Seperti apa tampilan tooltips profil sosial media ini? Untuk tampilannya, coba Anda perhatikan kedua gambar diatas, yang sebelah kiri merupakan tampilan dari profil Google plus teman saya dan yang sebelah kanan merupakan tampilan profil saya sendiri yang dilengkapi dengan link dari sosial media. Dari kedua tampilan gambar diatas memang sangat berbeda namun untuk cara kerjanya adalah sama yaitu jika kita menyorot Nama maka akan muncul tampilan seperti kedua gambar diatas

Masih bingung dengan penjelasan diatas? Kalau iya, arahkan mouse ke Nama saya berikut ini


Bagaimana sudah tidak bingung lagi kan? Menarik bukan? Dan untuk membuat tooltips profil sosial media ini juga tidak terlalu sulit dan tidak menggunakan kode Javascript dan juga tidak mempengaruhi loading blog

Cara Membuat Tooltips Profil Sosial Media

Untuk memasang tooltips profil sosial media ini, silahkan ikuti langkah-langkah berikut ini:
  • Login ke akun blogger Anda
  • Pilih menu Template >> Edit HTML >> Klik area kode template >> tekan CTRL+F pada keyboard
  • cari kode </head> dan salin kode berikut sebelum kode </head>
    <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
    * Kode diatas merupakan link font Awesome, jika di template blog sudah terpasang link tersebut, abaikan pemasangan ini
  • Cari kode ]]></b:skin> atau </style> dan salin kode berikut sebelum ]]></b:skin> atau </style>
    .user-profile {
      position: relative;
      width:220px;
      height: 32px;
      padding: 8px;
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      clear:both;
    }
    .user-profile span {
      color: #444;
      float: left;
      line-height: 10px;
      font-size: 12px;
      font-weight: bold;
      text-shadow: 0 1px rgba(0, 0, 0, 0.4);
    }
    .user-profile small {
      display: block;
      font-size: 9px;
      font-weight: bold;
      text-transform: uppercase;
      color: #444;
      color: rgba(0, 0, 0, 0.6);
      text-shadow: 0 1px rgba(255, 255, 255, 0.3);
    }
    .user-profile .teks {
      text-align: center;
      padding: 0px;
      color: #444;
      margin: 0px auto;
      font-size: 12px;
      list-style:none;
    }
    .user-profile .teks current {
      font-size: 20px;
      color: #000;
    }
    .user-profile:hover ul {
      padding: 4px 0 6px;
      visibility: visible;
      opacity: 1;
    }
    .user-profile ul {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      background: #eef0f4;
      border: 1px solid #ddd;
      border-radius: 5px;
      -webkit-transition: 0.2s ease-out;
      -moz-transition: 0.2s ease-out;
      -o-transition: 0.2s ease-out;
      transition: 0.2s ease-out;
      -webkit-transition-property: opacity, padding, visibility;
      -moz-transition-property: opacity, padding, visibility;
      -o-transition-property: opacity, padding, visibility;
      transition-property: opacity, padding, visibility;
      background-image: -webkit-linear-gradient(top, #dadfe9, #eef0f4);
      background-image: -moz-linear-gradient(top, #dadfe9, #eef0f4);
      background-image: -o-linear-gradient(top, #dadfe9, #eef0f4);
      background-image: linear-gradient(to bottom, #dadfe9, #eef0f4);
      -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    .user-profile ul:before, .user-profile ul:after, .user-profile li:first-child:after {
      content: '';
      display: block;
      position: absolute;
      left: 15px;
      width: 0;
      height: 0;
      border: 7px outset transparent;
    }
    .user-profile ul:before {
      bottom: -14px;
      border-top: 7px solid #555;
    }
    .user-profile li:first-child:after {
      bottom: -13px;
      border-top: 7px solid #fff;
    }
    .user-profile ul:after {
      bottom: -12px;
      border-top: 7px solid #eef0f4a;
    }
    .user-profile li {
      padding: 0 12px;
      font-size: 11px;
      color: #838ca2;
      text-shadow: 0 1px #fff;
    }
    .user-profile .gplus,.user-profile li.fb,.user-profile li.twt,.user-profile .globe {
      position: relative;
    }
    .user-profile .gplus:before {
      content: "\f0d5";
      font-family: FontAwesome;
      padding: 0px;
      margin-right:10px;
      font-size: 11px;
      color: #d14836;
      text-decoration: inherit;
      position: relative;
      text-shadow: 0 1px #fff;
    }
    .user-profile .fb:before {
      content: "\f09a";
      font-family: FontAwesome;
      padding: 0px;
      margin-right:10px;
      font-size: 11px;
      color: #3b5998;
      text-decoration: inherit;
      position: relative;
      text-shadow: 0 1px #fff;
    }
    .user-profile .twt:before {
      content: "\f099";
      font-family: FontAwesome;
      padding: 0px;
      margin-right:10px;
      font-size: 11px;
      color: #55acee;
      text-decoration: inherit;
      position: relative;
      text-shadow: 0 1px #fff;
    }
    .user-profile .globe:before {
      content: "\f0ac";
      font-family: FontAwesome;
      padding: 0px;
      margin-right:10px;
      font-size: 11px;
      color: #f9760b;
      text-decoration: inherit;
      position: relative;
      text-shadow: 0 1px #fff;
    }
    .user-profile li.date {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px solid #b4bbce;
      -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
    }
    .user-profile li.ico {
      text-align: center;
      border-bottom: 1px inset #b4bbce;
      list-style:none;
    }
    .user-profile li img {
      text-align: center;
      width: 100px;
      height: 100px;
      margin: 5px auto;
      border-radius:80%;
      -moz-border-radius: 80px;
      -webkit-border-radius: 80px;
      background:#ddd;
      list-style:none;
    }
    .user-profile li a {
      display: block;
      position: relative;
      margin: 0 -13px;
      padding: 0 20px 0 12px;
      color: #313a4f;
      text-decoration: none;
      border: 1px solid transparent;
    }
    .user-profile li a:hover {
      color: #000;
      background: #bebfc0;
      border-color: #bebfc0 #90939c #898c95;
      background-image: -webkit-linear-gradient(top, #c0c2c9, #bfc5d4);
      background-image: -moz-linear-gradient(top, #c0c2c9, #bfc5d4);
      background-image: -o-linear-gradient(top, #c0c2c9, #bfc5d4);
      background-image: linear-gradient(to bottom, #c0c2c9, #bfc5d4);
    }
    .user-profile li a:hover:after {
      display: block;
    }
    .user-profile li a:after {
      content: '';
      display: none;
      position: absolute;
      top: 30%;
      right: 5px;
      margin-top: -1px;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-left-color: #eef0f4;
    }
  • Simpan template
  • Salin kode html berikut ini kedalam blog Anda. Terserah, letak yang diinginkan
    <div class="user-profile">
    <span>Ana Sriwahyuni <small>TIM Panduan Template Blog</small></span>
    <ul>
    <li class="ico"><img alt="Ana Sriwahyuni" src="https://lh4.googleusercontent.com/--ZR4TRLpksw/AAAAAAAAAAI/AAAAAAAACGo/H6Ad3Um9u9U/s120-c/photo.jpg" title="Ana Sriwahyuni"></li>
    <li class="teks">
    <current>Ana Sriwahyuni</current>
    Blogger Indonesia
    Bekerja di RSUD Waluyo Jati
    Kraksaan - Probolinggo</li>
    <li><a href="https://plus.google.com/u/0/113748039543292949277" class="gplus" rel="nofollow">Google+</a></li>
    <li><a href="https://www.facebook.com/profil.sriwahyuni" class="fb" rel="nofollow">Facebook</a></li>
    <li><a href="https://twitter.com/Ana_Sriwahyuni" class="twt" rel="nofollow">Twitter</a></li>
    <li><a href="http://www.panduantemplateblog.com" class="globe">www.panduantemplateblog.com</a></li>
    <li class="date">Blogger: Juni 4, 2014</li>
    </ul>
    </div>
    Keterangan:
    Silahkan sesuaikan dengan profil Anda :)
  • Selesai

Jika mengalami kesulitan, silahkan tinggalkan komentar untuk artikel blog ini, Membuat Tooltips Profil Sosial Media

Membuat Tooltips Profil Sosial Media Rating: 4.5 Diposkan Oleh: ana sriwahyuni

1 komentar:

  1. lumayan banyak juga ya buk kode nya, tapi keren juga tampilan tooltip nya untuk social media ;)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia