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

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

Ana Sriwahyuni TIM Panduan Template Blog

Ana Sriwahyuni
Blogger Indonesia
Bekerja di RSUD Waluyo Jati
Kraksaan - Probolinggo
Google+
Facebook
Twitter
www.panduantemplateblog.com
Blogger: Juni 4, 2014

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