Untuk membuat blog kamu dikenal oleh semua orang, sosial media merupakan hal utama yang perlu kamu pertimbangkan. Selain banyak pengguna yang memakai sosial media, ternyata cara itu cukup efektif untuk mencari pengunjung.
Kamu harus memanfaatkan sosial media untuk ajang mempromosikan blog kamu supaya lebih banyak yang mengenal blog kamu. Trafik yang kamu dapatkan pun cukup tinggi dari sosial media.
Supaya pengunjung blog menyimpan linknya di sosial media tanpa harus copas link yang panjang dan ribet, kamu bisa memberikan fasilitas sosial media share untuk para pengunjung. Ini akan memudahkan para pengunjung untuk share link ke akun sosial medianya.
Oleh karena itu kita membutuhkan tombol sosial share supaya blog lebih banyak fiturnya. Seperti judulnya, disini saya mau berbagi cara membuat "Sosial Media Share Button Di Blogger", untuk lebih jelas silahkan ikuti langkah-langkah berikut ya.
Berikut ini adalah Sosial Media Share Button yang saya kumpulkan dari berbagai sumber di google, kamu bisa menempatkannya di bawah judul posting atau di akhir artikel.
Style Pertama
Cara pemasangannya:
1. Silahkan Ke menu Tema > Edit HTML
2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>
3. Setelah ketemu silahkan pastekan kode dibawah ini:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == "item"'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div> </b:if>
Style Kedua
Cara pemasangannya:
1. Silahkan Ke menu Tema > Edit HTML
2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>
3. Setelah ketemu silahkan pastekan kode dibawah ini:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<div class="don-share" data-bubbles="top" data-limit="3">
<div class="don-share-total"></div>
<div class="don-share-facebook"></div>
<div class="don-share-twitter"></div>
<div class="don-share-google"></div>
<div class="don-share-pinterest"></div>
<div class="don-share-linkedin"></div>
<div class="don-share-tumblr"></div>
<div class="don-share-stumbleupon"></div>
<div class="don-share-reddit"></div>
<div class="don-share-hackernews"></div>
<div class="don-share-buffer"></div>
<div class="don-share-xing"></div>
<div class="don-share-pocket"></div>
<div class="don-share-fancy"></div>
<div class="don-share-yummly"></div>
<div class="don-share-scoopit"></div>
<div class="don-share-weibo"></div>
<div class="don-share-vk"></div>
<div class="don-share-mailru"></div>
<div class="don-share-odnoklassniki"></div>
<div class="don-share-hatena"></div>
</div>
<script type="text/javascript">
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();
</script>
<style>
.don-share .don-share-total {
line-height: 18px;
margin-right: 30px;
display: none !important;
position: static;
}
.don-share .don-share-expand {
color: #333;
display: none !important;
background-color: #fff;
border-color: #ccc;
}
</style>
Style Ketiga (Pop-up)
Cara pemasangannya:
1. Silahkan Ke menu Tata Letak > Tambah HTML
2. Lalu pilih HTML/Javascrip
3. Setelah itu silahkan pastekan kode dibawah ini:
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58748ec649faba2e"></script>
5. Kemudian simpan widget nya, lalu lihat hasilnya.
Note: Untuk style pop-up ini ada yang perlu kamu ketahui, yaitu kode diatas merupakan dari pihak ketiga yaitu dari AddThis.com. Jika kamu ingin membuat sosial media share pop-up sendiri kamu tinggal daftar di website tersebut. Karena saya disini hanya memperpudahnya saja, jadi kamu hanya memakai sosial media pop-up yang sudah saya buatkan.
Tidak ada dampak buruk jika kamu menggunakan kode pop-up diatas, tapi alangkah baiknya kamu daftar dan membuat sendiri di AddThis.com ya.
Style Ke Empat:
1. Silahkan Ke menu Tema > Edit HTML
2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>
3. Setelah ketemu silahkan pastekan kode dibawah ini:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
* {
box-sizing: border-box;
}
#bhero-cssanime:hover li {
opacity: 0.2;
}
#bhero-cssanime li {
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity;
-moz-transition-duration: 500ms;
}
#bhero-cssanime li a strong {
opacity: 0;
-webkit-transition-property: opacity, top;
-webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top;
-moz-transition-duration: 300ms;
}
#bhero-cssanime li:hover {
opacity: 1;
}
#bhero-cssanime li:hover a strong {
opacity: 1;
top: -10px;
}
/* Mobile Responsive */
@media only screen and (max-width: 900px) {
ul.bhero-s1-social {
margin: 6% 5%;
float: none;
padding: 0!important;
}
li.bhero-s1 {
width: 50px;
height: 50px;
margin: 5px;
list-style: none;
display: inline-block;
}
li.bhero-s1 {
width: 55px;
height: 55px;
}
}
@media only screen and (min-width: 900px) {
li.bhero-s1 {
list-style-type: none;
width: 50px;
height: 50px;
list-style: none;
display: inline-block;
margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
position: relative;
/* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
text-transform: none;
/* opinion 2 */
font-size: 14px;
/* opinion 3 */
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent;
/* opinion 4 */
z-index: 1001;
/* absurdity 1 */
}
[tooltip]::after {
content: attr(tooltip);
/* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000;
/* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: calc(100% + 30px);
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
left: 50%;
transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em - 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
right: calc(0em - 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<br />
<div id="social-1">
<ul class="bhero-s1-social" id="bhero-cssanime">
<li class="bhero-s1">
<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel="nofollow" target="_blank"><span tooltip="Share on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBM8fAF1WCZnShSWkWL4FSaZveJYf1RF4_7d0vzW1HwQT0Tr4gvZDufSkkWhUjDhA65FYKVwPpKE_2gvnExdFtLwH142ylfdMYWiZKFLPhVgLPS1Nf1i0p1mcYzNDPpUNE9xRqbPDr2Fg/s200/033-google-plus.png" /></span></a>
</li>
<li class="bhero-s1">
<a expr:href='"http://twitter.com/share?url=" + data:post.url' rel="nofollow" target="_blank"><span tooltip="Share on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTqjyjbdroBVVa4yPF89XL7qrP3L-jWE-UYeDFNjbFgznFetSUYPry2JCJgbF4daWrWQmJQsK_hsNOIhEljtjtvuJUFFi-mB5J-qpLobAVWUTvkdLOgo2l-rfkeKQKJph0UCh-6KHkiU/s200/008-twitter.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" target="_blank"><span tooltip="Subsribe on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMehMwXyfbReL6E_-rwVr0_-Zp9PsSXZRvWcE_6tPv88ysCzg0s8UBl8CgHZfKLImWk8EzD38Lve7Rw1zwG31PduIRswK6qkP4MzgyFMxCeTUL-hIe82kabIYRjo0Yr1HYh5DgFyY5rUM/s200/036-facebook.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjM1UT_dMLo3VcGp9S5QeyckjAYb5Bl9-RG5nxMfLoVFbzLGAhd_PvH0XNVDGFlNu-HMYA9686BdpqcOgJlV8f0lpsijP23_VBY5Lr3DeczVwD8_-EpRx_rCmcqntncNU1waUVoBU5B5c/s200/029-instagram.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect on WhatsApp"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8-LWl_pQZm2wRRUGWTEaDLsDjhFYadCF8c2unYEGavwpwm_9LLCMRPHWQag5tcvJlkswiZkAqmf5qYub1eBBSnfn0fc1n0rJlc0tmL3nB77e75uMMoBL57Lr3yYVYkNJal72OCGzDhO4/s200/005-whatsapp.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirb9x7OSULv7-dfx1-22JCjTJedPp_lNuShgKXzcL3gbf_N7YNmzjdwJEJSW6hvCrWQjZ6OYtKfrJRg_D7inN0m8jhmWiUEdPMHcyVYAg5Z72ynvUbOzRyofpcun7M-sUEKdMCTgY1fQM/s200/009-tumblr.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe on Youtube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7MsX8PMM5gHvKxI4E-NPYbNXrSUy5ywXxGwiiUejL_YK2S3XPiP_JtjD4cD9_AkwLuNZf3118kfBkJB_l7GMSEKLSyMmArF95-ENdOZk_j8fb9QTQshgAdSKPyAZk9yRvZ6eUOlUKsw/s200/001-youtube.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect with LinkedIn"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHWlexMyr8gQn3qt7Hws5VQfOabWYv62F7qO6PJf8OywV292xFY8gaOzfYglgN6mvkdoEmJsGYhahBzy8UjwLMi0U3vrre5uOZ8XfkFMmqEuMGPzD_btEU7FXZFGNf2cPiaybMSTGlqY/s200/027-linkedin.png" /></span></a>
</li>
</ul>
</div>
Style Kelima
1. Silahkan Ke menu Tema > Edit HTML
2. Untuk lebih memudahkan, pencet CTRL+F dan cari kode <head>
3. Setelah ketemu silahkan pastekan kode dibawah ini:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
* {
box-sizing: border-box;
}
#bhero-cssanime:hover li {
opacity: 0.2;
}
#bhero-cssanime li {
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity;
-moz-transition-duration: 500ms;
}
#bhero-cssanime li a strong {
opacity: 0;
-webkit-transition-property: opacity, top;
-webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top;
-moz-transition-duration: 300ms;
}
#bhero-cssanime li:hover {
opacity: 1;
}
#bhero-cssanime li:hover a strong {
opacity: 1;
top: -10px;
}
/* Mobile Responsive */
@media only screen and (max-width: 900px) {
ul.bhero-s1-social {
margin: 6% 5%;
float: none;
padding: 0!important;
}
li.bhero-s1 {
width: 50px;
height: 50px;
margin: 5px;
list-style: none;
display: inline-block;
}
li.bhero-s1 {
width: 55px;
height: 55px;
}
}
@media only screen and (min-width: 900px) {
li.bhero-s1 {
list-style-type: none;
width: 50px;
height: 50px;
list-style: none;
display: inline-block;
margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
position: relative;
/* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
text-transform: none;
/* opinion 2 */
font-size: 14px;
/* opinion 3 */
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent;
/* opinion 4 */
z-index: 1001;
/* absurdity 1 */
}
[tooltip]::after {
content: attr(tooltip);
/* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000;
/* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: calc(100% + 30px);
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
left: 50%;
transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em - 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
right: calc(0em - 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<br />
<div id="social-1">
<ul class="bhero-s1-social" id="bhero-cssanime">
<li class="bhero-s1">
<a href="Your-Link-Here#" target="_blank"><span tooltip="Subsribe on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQ0WIMFYO3qq2DudntRrizoc1TUcrpHVz1ELKuiyHM9jj04TxnqrOcYUpaiAgPipArmIGr8BcPYklh1r7U2D6eJPdqVx_86er_e_6qJmtA8b4Pzk4zD7A4Ay7vtxrumxOakWNWS7dTyU/s1600/facebook.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXDK9csxLZDX_0w8pCzbTpBsABpa8kHsEoumWDv-eGsGzDpKYZXZ4vzs7LdPuu4r_g3hoz0hQ1ezMJ5xZvnJ9bD5krljwmnSf6nge1TdZnEbR77mA6VHv-1tUaWIJrIfTiYEJUBgwMP7g/s1600/twitter.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQgwrQN3nmVp90C8tZTr1Vyumkk5sysHmOdjUFFkP-Q3DzbeNZn6Hac20UtpoXHseD-iaZv72dDs50fu31n0c24EhTf2a-RhxUZX5TVVwlMlQXznZm3C7W4M7JS8PIUxWUhNVomW1KtI/s320/google-plus.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdqGBDCZ6Uu9GJv-IDbwt0ZREP_WT4At9S_JlkOJ7Lml-WN225HqPevYtJW6wndXuMCAJwwQQtFWjfu9ZK36XfjGb3vtnxoC2MzOcRSxgxgHfRZJfsKrj2ElGgTG6iSOmRHm87lKtdgw/s1600/instagram.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Connect on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgcQz_xkvyDxUtmKLKTrUfM2lan2hZxKM-_CyOlwpi9IaxSEXJg-NrinJjNr0zrcMSv15T3mop8U1Zt1ZPU9VKAQ_zHrHTIgvDuKd5ZdkeqJhSkVZKJYx_IWh3EEwHvB189BoWcdzNtG0/s1600/linkedin.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="
#" rel="nofollow" target="_blank"><span tooltip="Follow on Tumblr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFIsBbZ9NqP53OSW2_38eraSKveLJewU5GRvB5XWivk7WhT6GYDt5wTgg3pHK6XIQSkQ1jeARC1WQdxSX__ro07TmbvzWRRVWni8bJWp8VX3pSvCZMDKhwGmDZknR-4oho_e0ZCd2n6Oc/s1600/tumblr.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Find on Flickr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtkFZi-wGDcUBAOMwt3xes6XaAmFWIf746Yd4bXQ6Id8F86qK8tZG0RWqmFl4SBI7P0Kl3uat-Ol2qQE9HTfwE486zXC9eLE52w9ChyNKx3VAXNpWJZ9-bVYgegFEJ9oqVdAwv1deP770/s1600/flickr.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="Your-Link-Here#" rel="nofollow" target="_blank"><span tooltip="Follow on Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuXPHMdkXa9oqXX63mWoCDPGmyTRDrZLw7d0bl0Yrau4JRB8_jDZEmZTROMChotcIRM1L4_6px1DJTG-IFTFB5D0KCCVyqcvsfiuBbmQMrfcbiziRIQkaEyAuimq-i_aBuBfp43do6uA/s1600/pinterest.png" /></span></a>
</li>
</ul>
</div>
Style Keenam
<style>
* {
box-sizing: border-box;
}
#bhero-cssanime:hover li {
opacity: 0.2;
}
#bhero-cssanime li {
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity;
-moz-transition-duration: 500ms;
}
#bhero-cssanime li a strong {
opacity: 0;
-webkit-transition-property: opacity, top;
-webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top;
-moz-transition-duration: 300ms;
}
#bhero-cssanime li:hover {
opacity: 1;
}
#bhero-cssanime li:hover a strong {
opacity: 1;
top: -10px;
}
/* Mobile Responsive */
@media only screen and (max-width: 900px) {
ul.bhero-s1-social {
margin: 6% 5%;
float: none;
padding: 0!important;
}
li.bhero-s1 {
width: 50px;
height: 50px;
margin: 5px;
list-style: none;
display: inline-block;
}
li.bhero-s1 {
width: 55px;
height: 55px;
}
}
@media only screen and (min-width: 900px) {
li.bhero-s1 {
list-style-type: none;
width: 50px;
height: 50px;
list-style: none;
display: inline-block;
margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
position: relative;
/* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
text-transform: none;
/* opinion 2 */
font-size: 14px;
/* opinion 3 */
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent;
/* opinion 4 */
z-index: 1001;
/* absurdity 1 */
}
[tooltip]::after {
content: attr(tooltip);
/* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000;
/* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: calc(100% + 30px);
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
left: 50%;
transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em - 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
right: calc(0em - 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<div id="social-1">
<ul class='bhero-s1-social' id='bhero-cssanime'>
<li class='bhero-s1'>
<a href='#' target='_blank'><span tooltip="Subsribe on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKPpsP9KWbZV96jSxEavZ48rppD2xx6GUWvQDoym2yHWK4ZRyAniyeGdS_JwvVxzu3KmyKPSJS6tSZImAnNLBj5lsTYSngo4Eqf9w_-nnXMLN50DmbtWbpCD2EwreD5yF1FgW9_b7GR4/s320/051-facebook.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJD7YV_wICXzAb2SCrj8CncnYGqXeInBFxKtwalWpG-Ocfa1bjja-PL8UmsS5P5J2yv_a-Mx5_BpGePoTtRpoCV3MtY_pL9FAUOlKwqMzi9DncwfEMPLSrtzhobzNZKnqUkLaa6PtAMAg/s320/051-twitter.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_mhn2A0ddl-jTCn0GmvaQXCfgTGzPH1EJdx05JMOIdqI7vAIrB5grOi7Xbky5DORx50bsOoBSjbwX-0kTViCuEvA3eyq0aP0rlqsNQNMjqprXnPdGJd2tzjJKdo1b6TB__Q2pKOqSLDI/s1600/051-google-plus.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAW2XOLZUcM4y4UrruU5caHn4GZdcZr1UPY6QP8salD5q8TVcWlSvSp436OUjxOVpoIhExCid82gLzi2bfVl4wUPuy7pASlks12RLL5UrA7GJmiMlZpQ4d-j24ia3OB9TuhM1L_oy6cFg/s320/051-instagram.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Connect on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQPbVwWQEor9TKB3WQ62dLgvXDFz48gv44hYqjfoc_L52YgrOrbsnfts4Xss4VShxz7NRFkrB4yCJ3A51h7Elv96c29A3Xuk8ZJs3Lg_tB_ZMCujQusTaDDW1Z_iGmLxIbHhGz50L4dI/s320/051-linkedin.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Tumblr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6-HB__83ip-4dyRC09ABd9UUT61MKWcOTJluz7RFI-F6p5_Mv_ROQBRKuDtr7w3ZdCj3f9fxS8zG3nSBCFpczkGSL7A1WwHCqfK3BXBufRJE81_ITi_pWEJcHHIxaQceTuP4MuABc_v0/s320/051-tumblr.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPBh3Cb7HNM5K4ZfV0GCjIHm1jt08iG4BZhGVrH4u9eT_haTbg3_2IXdN55dcGa_Qt561bRV0Ar1tUiH-vZQr_14Pb0qKIbMblT6KHZOD3o7vnyiWwlIDY_MDFlI1mU74lH5qUqgX8Zuk/s320/051-path.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe to RSS"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI7tRIQBgi34plzvRGYh8o-zOmS-bSc65vkXO6RJwNea1tU1LCLS1OE_IHvwSbhPtV_-haiWgJXlCrfZKsfq_gqXmdckfLNhIK8bhyphenhyphenHK0L-vtbOHgl6wwDTZjfAZWad8Ytdz94ACfEO7c/s320/051-rss.png" /></span></a>
</li>
</ul>
</div>
Style Ke tujuh
<style>
* {
box-sizing: border-box;
}
#bhero-cssanime:hover li {
opacity: 0.2;
}
#bhero-cssanime li {
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity;
-moz-transition-duration: 500ms;
}
#bhero-cssanime li a strong {
opacity: 0;
-webkit-transition-property: opacity, top;
-webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top;
-moz-transition-duration: 300ms;
}
#bhero-cssanime li:hover {
opacity: 1;
}
#bhero-cssanime li:hover a strong {
opacity: 1;
top: -10px;
}
/* Mobile Responsive */
@media only screen and (max-width: 900px) {
ul.bhero-s1-social {
margin: 6% 5%;
float: none;
padding: 0!important;
}
li.bhero-s1 {
width: 50px;
height: 50px;
margin: 5px;
list-style: none;
display: inline-block;
}
li.bhero-s1 {
width: 55px;
height: 55px;
}
}
@media only screen and (min-width: 900px) {
li.bhero-s1 {
list-style-type: none;
width: 50px;
height: 50px;
list-style: none;
display: inline-block;
margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
position: relative;
/* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
text-transform: none;
/* opinion 2 */
font-size: 14px;
/* opinion 3 */
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent;
/* opinion 4 */
z-index: 1001;
/* absurdity 1 */
}
[tooltip]::after {
content: attr(tooltip);
/* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000;
/* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: calc(100% + 30px);
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
left: 50%;
transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em - 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
right: calc(0em - 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<div id="social-1">
<ul class='bhero-s1-social' id='bhero-cssanime'>
<li class='bhero-s1'>
<a href='#' target='_blank'><span tooltip="Subsribe on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiW3XENMbcHL-hkz21EkCFgLiGcno073Lbk-pZSfQtAw-RCp1QdmcdJTIWQ1316LdnPMmzzpSKwN9ZHQ_g6OBwW_NZjOVi_OJsWKIcpn_JGBZssK3SwTT3HhmNQ73gwt3qGpwCDOHFCA/s320/021-facebook.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDVJIkOQJdCNT7oW75mwAeqt3Ykgh_sFHkRJJnKqswrQN9gp_nTHHREZLEPMO8gw8orBqkqEryBf8uASLIpA74qsAnvAXN1DP2TOKS51eIllB_DgDYFW3NgNjeCLTqgd7IetJcu3yplU/s320/021-twitter.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCMHL7sJt1oAJLdk0N4pOKdC0auQelCZDmhynfQLP-w9z04Jgxk5UORNK7PXNwSMXUDxe7LIH8UFcw_a6YuH3DABAUIad2iEVkJtl8I8I0w9_OicHZlA1Tui5dJYKbCcq2ucjpsZtoq5E/s320/021-google-plus.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGOpX2XL-mRkyGFxc9RbkHO06ruMVlsXrAZ58cPx9ZfQaYhiSXx2uVt65bCu3VEujDH1WLpad9cthAySetYNvZ2SRvKsvQGp5iEVSrW_DRneEku1IomkrCBCc-OTdf3AMUCHUbK5XIbTs/s320/021-instagram.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Connect on WhatsApp"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdxAjPu62sSTtrENQIpcczdIW-36Gzukr6BZVjiBtWuwjAYc0zw6loEcAHHAi5gEAcVrOTEaLsBTBQ1O1Gu5YOmR6XoNWJ04Kj7wisrOUrq7GSy3plmcqdnV6uX-5mKNcC7BTiRPpeNBA/s320/021-whatsapp.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Follow on Tumblr"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56WFg7aYrtx-60pXrrA0k7zQkmm2SFT8wr33HJbKWsqgFZO1HP75xtvEiJmvv67AgpqT7_ZM2DBD0FAjNCCJLKs8T-5aOzQo0uG31iXg6UvZQfKJp_vrCTemYdHIS2rbroMZ0RbXFuzY/s320/021-tumblr.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe on Youtube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlVJItsMS8zEfWfPSADwTUKZJPQvwuUtGKT06afQdHeG29jb7aaIYvdWBJrUA-qHBctSb3nKb4Cz3nH6G409dg-zVjbglsbWHuSh9Fn_CTbRk1wCsLYs9ic4kTSi6MYRh2QHHDTCIvMRQ/s320/021-youtube.png" /></span></a>
</li>
<li class='bhero-s1'>
<a href='#' rel='nofollow' target='_blank'><span tooltip="Subscribe to RSS"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju21uzMNwqJrydTdeJgb29U00M1AxasO0kpsh20WKcA_TmtP3c_svMyuBqtv5tBkcrkUTGf5UrE80hgkaO6Mu1r-ibbUPyCgxCbJh5s0MAUJ__4m2EsxLz9d5wTPhXVuyCoH_u0ajgItk/s320/021-rss.png" /></span></a>
</li>
</ul>
</div>
Style ke delapan
<style>
* {
box-sizing: border-box;
}
#bhero-cssanime:hover li { opacity:0.2; }
#bhero-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#bhero-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#bhero-cssanime li:hover { opacity:1; }
#bhero-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Mobile Responsive */
@media only screen and (max-width : 900px) {
ul.bhero-s1-social {
margin: 6% 5%;
float: none;
padding: 0!important;}
li.bhero-s1 {
width: 50px;
height: 50px;
margin: 5px;
list-style: none;
display: inline-block;
}
li.bhero-s1 {
width: 55px;
height: 55px;
}
}
@media only screen and (min-width : 900px) {
li.bhero-s1 {
list-style-type: none;
width: 50px;
height: 50px;
list-style: none;
display: inline-block;
margin: 2px;
}
}
/* START TOOLTIP STYLES */
[tooltip] {
position: relative; /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
text-transform: none; /* opinion 2 */
font-size: 14px; /* opinion 3 */
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent; /* opinion 4 */
z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
content: attr(tooltip); /* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000; /* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: calc(100% + 30px);
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 35px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -20px);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
left: 50%;
transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em - 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
right: calc(0em - 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease-out forwards;
}
</style>
<br />
<div id="social-1">
<ul class="bhero-s1-social" id="bhero-cssanime">
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Like On Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabI8agT3z4s8YFmhuE0eLcE2MwVhdIrzyMo5m-vSeKHGDBHGdWyI1drM_QjBk8__XceRrREFV9qPo_iYgdp3JuKWgwl7kL0-s4dQG-V8AnUUYEzIxVJYDh3Bf8dUCFbzG-dJ8D5b-pEM/s200/facebook.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qvhkZaNtjjYrLc04F2b-icEeeWxOzN-NRRGJITphsbGMU2_geu_B-WtiTJai7fAiXztXNm9xdAi9SVUJ2bLL_h9uXRmO8CsWmhT8u7yzk0lxOhUUzUU_MWPFgE1FVRr10MMP9HrVOcc/s200/google-plus.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" target="_blank"><span tooltip="Follow on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZRwU_CMSmjT94pM8Y1M8ZGNbiWK5fxg9KPEGoQj32yXjBz7XKsLTkD3PVqf61qzqJMRYiR4cclB_117Sy9uhNLU1nsoH43MKJpok-AC0Zkj4GIeNEXdnzoluuujIkxwD9mX-_-cF9HQ/s1600/twitter.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Follow on Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAXMw7JG1AIBwJVuXhwpfIaruIyE0lvMB7MlAk8PBBhV8VeLPOC56l7r7Nh8K2D-VQ1_-lJlBAoMam65jGQoXUITjuM7BDIVPCYnR5kR4NpMEgUJNMdzyOmjpVPXkBBmYaZh_z8FcULXw/s200/instagram.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect on WhatsApp"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1v90bZynGyVDWHMIbPUn8BMcWj0WxwEzyp6oyyx27xQcPX5orVT-h3EfAJToPCbGrIWuQOELGal7d7fqk5NW5MuNCoo3nFdOqOL7PbY_G1ES4O_cKvkGCiSmuObNE8ug5YEqbtFX6Q4U/s1600/whatsapp.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe on Youtube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXspsHXnLUVefIuflmp9cYoZuPDUw8QBtDukjba2fkCQjSkrsnTJWjtEfuhKpgp17_JASjBH82MlYocxd15jiomec7N1qxymETVPHf7n3YYKJ-886f_eEMzIiB4Blwoy4hkbP4G7XwTtY/s1600/youtube.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Connect with LinkedIn"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7GFavDNhvY3NWUYvnyzwcXOgCq5jYt1Ux0MJpD03YHX2lbN25E1MGxVh3zXkK0H4tTL3XqDQ7ZHybsNjO-qwkZjHVOTSCHAV8ix5P4jUIVFiCLndhoAdiwxIwq8U-l_M0bsX4ChSf6fc/s1600/linkedin.png" /></span></a>
</li>
<li class="bhero-s1">
<a href="#" rel="nofollow" target="_blank"><span tooltip="Subscribe to RSS"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8QeP6QMMKdcfbTORLjGKsxz_d2xEfCLU08HJiJTdKATMUUVw9d7GTnPFy_8U4ku7nwuHoeNT2Btip8lV2qffBZQYiZs4gHe16iN1NvaVfv17RNk-SkaiaVLG8hd_Kr-PVyKGebCE54I/s1600/rss.png" /></span></a>
</li>
</ul>
</div>
Keterangan: Silahkan ganti <a href="#" rel="nofollow" target="_blank"> dengan link share atau link social media kamu sendiri.
Hanya delapan style yang saya bagikan, kenapa? karena yang menurut saya bagus akan saya share, nanti akan saya tambahkan kembali jika menemukan tombol sosial media share lagi. Jadi silahkan berlangganan ya.
Comments
Post a Comment