Membuat Widget Social Media Dengan Tooltip Di Blog | Ghiyats Blogs - Halo, Pada Kesempatan Hari ini akan saya bagikan Sebuah sosial media Dengan efek Tooltip, Widget ini dengan gambar icon sosial tersebut dan tampilan keren dan menarik.
Kalau begitu langsung, saja kita coba dan membuat widget ini, Tutorial Seperti di bawah ini :
Membuat Widget Social Media Dengan Tooltip Di Blog :
- Login ke Blogger.com
- Terus, Kita ke menu ''Template'' >> Edit HTML
- Dan cari kode ]]></b:skin> , Setelah itu Copy kode dibawah ini dan taruhlah di atas kode Tadi
#social_profiles-wrap{
width: 450px;
height: 80px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzYQtxjmwJr3hMCmc00qoRkaYNRhnR9XRjv4ijWq3ijmpePFikq-OkZXi4t3so-mjqml4UiRCo1TFwo5Iv9VHPT6RWE6Wh7aknNEY6HOJ6t89BlPEmMop9S0OSqPuCJ_rgOmIaqI0q4qx/s1600/Bg.png") no-repeat 15px 10px;
padding:22px 0px 15px 100px;
margin: 14px auto;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.social_profiles{
height: auto;
margin: 0 auto;
}
.social_profiles li{
float: left;
list-style: none;
}
.social_profiles li a {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
outline: none;
position: relative;
z-index: 2;
text-indent: -9000px;
text-decoration: none;
}
.social_profiles li .facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat;
}
.social_profiles li .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -45px;
}
.social_profiles li .gplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -90px;
}
.social_profiles li .pinterest {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -135px;
}
.social_profiles li .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -180px;
}
.social_profiles li .linkedin {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -225px;
}
.social_profiles li .tumblr {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -270px;
}
.social_profiles li .youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -315px;
}
.social_profiles li .mail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -360px;
}
.social_profiles li a span {
width: 80px;
height: 20px;
line-height: 20px;
padding: 5px;
left: 50%;
margin-left: -52px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #446cb3;
background: #446cb3;
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 5%;
opacity: 0;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
-moz-transform: translate(35px) rotate(25deg) scale(1.5);
-o-transform: translate(35px) rotate(25deg) scale(1.5);
-ms-transform: translate(35px) rotate(25deg) scale(1.5);
transform: translate(35px) rotate(25deg) scale(1.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social_profiles li a span:before,
.social_profiles li a span:after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 11px solid rgba(0,0,0,0.1);
}
.social_profiles li a span:after {
bottom: -15px;
margin-top: 6px;
margin-left: -12px;
border-top: 10px solid #446cb3;
}
.social_profiles li a:hover span {
opacity: 0.9;
bottom: 50px;
-webkit-transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-o-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
}
- Setelah selesai, Klik Simpan
Selanjutnya..
- Sekarang ke menu ''Tata letak'' >> ''Tambah Gagdet'' >> ''HTML/JavaScript''
- Setelah itu, Masukan kode di bawah ini, di dalamnya
- Atau.. Dengan Cara Kedua, ''Template'' >> ''Edit HTML''
- Terus cari kode <data:post.body> Setelah ketemu masukan kode dibawah ini, di dalamnya
<div id="social_profiles-wrap">
<ul class="social_profiles">
<li><a class="facebook" href=http://www.facebook.com/Usernametarget="_blank"><span>Facebook</span></a></li>
<li><a class="twitter" href=http://twitter.com/Username target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href=https://plus.google.com/b/Usernametarget="_blank"><span>Google Plus</span></a></li>
<li><a class="pinterest" href=http://www.pinterest.com/Usernametarget="_blank"><span>Pinterest</span></a></li>
<li><a class="rss" href=http://feeds.feedburner.com/Usernametarget="_blank"><span>RSS</span></a></li>
<li><a class="linkedin"href=http://www.linkedin.com/in/Usernametarget="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href=http://www.thumblr.comUsernametarget="_blank"><span>Tumblr</span></a></li>
<li><a class="youtube" href=http://www.youtube.com/Usernametarget="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href=Mailto: target="_blank"><span>Mail</span></a></li>
</ul></div>
- Ganti Username Dengan Id dari masing masing Sosial media tersebut.
- Setelah selesai, Klik Simpan
Demikianlah artikel ini semoga artikel yang saya bagikan ini bermanfaat dan mudah untuk di pratekkan, Beri pendapat tentang artikel ini dan kalau sobat masih bingung silakan kasih pertanyaan anda, di kolom komentar di bawah ini, Terima Kasih..
Keep Blogging
