Beauty

Wyskakujące okienko wizytówka z przyciskami społecznościowymi


Zobacz demo na blogu

Jak umieścić widżet na Bloggerze?

1. Zaloguj się do panelu admina na Bloggerze.
2. Wejdź w menu Układ.
3. Dodaj gadżet HTML/JavaScript.
4. Skopiuj kod widżetu:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

<button class="show-card">
  <img src="http://2.bp.blogspot.com/-7QoO7ago8rg/VMYk0cvMaEI/AAAAAAAAIRU/P4lGV4NOBXE/s1600/Aurove_vector_badges_blokotek.png" />
  Profil autora
</button>
<article class="card">
  <section class="close"><i class="fa fa-remove"></i></section>
  <section class="details">
    <h2 class="name">Blokotek</h2>
    <p class="description">Darmowe zdjęcia, dodatki, szablony i poradniki blogowe.</p>
  </section>
  <section class="headshot">
    <img src="http://2.bp.blogspot.com/-7QoO7ago8rg/VMYk0cvMaEI/AAAAAAAAIRU/P4lGV4NOBXE/s1600/Aurove_vector_badges_blokotek.png" />
  </section>
  <section class="icon-bar">
    <ul>
      <li><a href="http://www.facebook.com/blokotek"><i class="fa fa-facebook"></i></a></li>
      <li><a href="http://twitter.com/Blokotek"><i class="fa fa-twitter"></i></a></li>
      <li><a href="https://plus.google.com/+BlokotekPlDodatki"><i class="fa fa-google-plus"></i></a></li>
  </ul></section>
</article>
  
<style>
/* Button styles */
.show-card {
  background: #fff;
  border-radius: 4em;
  border: 0.25em solid #BA8894;
  color: #BA8894;
  font-family: Arial;
  font-size: 18px;
  line-height: 1.5;
  padding: 1em 1em 1em 4em;
  position: relative;
}
/* Image on the button */
.show-card img {
  border-radius: 50%;
  left: 0.3em;
  position: absolute;
  top: 0.25em;
  width: 3em;
}

.card {
  bottom: calc(50% - 8em);
  display: none;
  height: 16em;
  left: calc(50% - 10em);
  position: absolute;
  transition: all 0.4s 0.4s cubic-bezier(.5,.2,.43,1.33);
  width: 20em;
  border: 0.25em solid #BA8894;
  background: #fff;
  z-index: 999;
}

.close {
  color: #aaa;
  cursor: pointer;
  height: 1em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
  z-index: 10;
}

.details {
  position: absolute;
  bottom: 2.5em;
  background: #fff;
  border-radius: 0.25em;
  height: 12em;
  overflow: hidden;
  text-align: center;
  width: 20em;
}

.name {
  color: #333;
  font-weight: bold;
  margin: 3em 0 0;
}

.description {
  color: #666;
  font-size: 1em;
  font-weight: 200;
  line-height: 1.5;
  margin: 0.75em 2em 2em;
}

.headshot img {
  border-radius: 50%;
  border: 0.5em solid #fff;
  display: block;
  height: 6em;
  margin: -3em auto 0.5em;
  width: 6em;
  transform: translateZ(0);
  border: 0.25em solid #BA8894;
  background: #fff;
}

.icon-bar {
  background: #BA8894;
  border-radius: 0.25em;
  height: 4.5em;
  left: -1em;
  position: absolute;
  right: -1em;
  top: 13em;
}

.icon-bar ul {
  display: flex;
  flex-display: column;
  flex-wrap: nowrap;
  padding: 0;
  margin: 15px auto;
  text-align: center;
}

.icon-bar li {
  display: inline-block;
  font-size: 2em;
  padding: 0 1em;
  width: 33%;
}

.icon-bar a {
  color: #fff;
  text-decoration: none;
}
</style>
  
<script type="text/javascript">
  $('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

$('.card .close').click(function(e) {
  $('.card').css('display', 'none');
});
</script>
5. Do treści gadżetu wklej skopiowany kod.
6. Zapisz gadżet.

Jak dostosować przyciski?

  • Linki zaznaczone na pomarańczowo zamień na adresy do profili społecznościowych. 
  • Linki zaznaczone na zielono zamień na bezpośrednie adresy do zdjęcia.
  • Tekst zaznaczony na żółto zamień na swoje imię.
  • Tekst zaznaczony na turkusowo zamień na opis swojej osoby.

Instagram