2015/03/20

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.