2014/12/31

Widżet z informacją o autorze z opisem nasuwającym się na zdjęcie

Demo - najedź myszą na zdjęcie


Jak umieścić widżet na Bloggerze?

Kod można umieścić w bocznym sidebarze (o ile jest dość szeroki) lub też w poście lub na stronie. Wystarczy przełączyć edytor posta do trybu HTML, wkleić kod i opublikować.

    <div id="container-about-author">
<h1>
O autorce
</h1>
<div class="author">
<img src="http://3.bp.blogspot.com/-FG3UOCpYoAg/VKMA7MfNSTI/AAAAAAAAHos/b4oCwfZWTZA/s1600/Lindsay%2BLohan.png"/>
<div class="author-testo-hover">
<h3>Lindsay Lohan</h3>
<h4>Aktorka</h4>
<p>Znana między innymi z filmu : "Wredne dziewczyny", w którym to dołącza do paczki "plastikowych" panienek, żeby dać im nauczkę, za złośliwość.</p>
</div>
<div class="author-sfondo author-testo">
<p>Lindsay Lohan</p>
<a href="https://twitter.com/blokotek">@lindsaylohan</a>
</div>

</div>
</div>

<style>
#container-about-author {
max-width:500px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
}

#container-about-author h1 {
font-family: "Verdana", sans;
font-weight:300;
text-align:center;
color:#000;
}

#container-about-author h2 {
color:#2c3e52;
font-family: "Verdana", sans;
font-size: 14px;
text-align:center;
font-weight:700;
margin-bottom:50px;

}

.author {
/*width: 460px;*/
height: 250px;
/*height: 230px;*/
overflow: hidden;
position: relative;
}

.author img {
position: absolute;
top: 0;
left: 0;
height: inherit;
width: auto;
height: 100%;
float: left;
transition: all 0.8s;
-moz-transition: all 0.8s;
cursor: pointer;

}

.author:hover img {
/*opacity: 0.4 !important;*/
}

.author .author-testo-hover h3 {
padding: 0px;
margin: 0px;
font-size: 25px;
font-weight:300;
font-family: "Verdana";
}

.author .author-testo-hover h4 {
padding: 0px;
padding-bottom: 13px;
margin: 0px;
font-size: 14px;
letter-spacing: 3px;
width: 90%;
font-family: "Verdana";
text-transform:uppercase;
border-bottom: 2px solid #000;
}

.author .author-testo-hover p {
padding-top: 13px;
font-size: 14px;
line-height: 20px;
font-family: "Verdana";
}


.author .author-testo-hover{
width: 42%;
height: 89%;
position: absolute;
top: 0%;
left: 50%;
padding: 3% 4%;
background: #D90E0E;
color: rgba(255,255,255,1);
/* display: none;*/
transition: all 0.5s ease-in-out;
-moz-transition: all 0.4s;
cursor: pointer;
}

.author:hover .author-testo-hover {
display: block !important;
color: rgba(255,255,255,1);
background:rgba(217,14,14,0.85);
left: 0px;
top: 0px;
}


.author .author-testo {
width: 50%;
height: inherit;
background: #000;
float: left;
position: absolute;
left: 50%;
}

.author .author-testo p {
padding:100px 0px 0px 20px;
font-size: 24px;
font-family: "Verdana";
font-weight:700;
color: #fff;
}

.author .author-testo p span {
font-family: "Verdana" !important;
}

.author .author-testo a , .author-sfondo .author-testo {
padding: 0px 0px 0px 20px;
font-size: 14px !important;
color:#FF5A22 !important;
font-family: "Verdana" !important;
text-decoration: none !important;
}

.author .author-testo {
float: left;
}

.author-sfondo {
background: #eee !important;
width: 50% !important;
height: inherit !important;
}

.author-sfondo p {
color: #000 !important;
}
</style>

Jak dostosować widżet?


  • Teksty zaznaczone na zielono zamień na własne: imię, opis itp.
  • Link zaznaczony na różowo zamień na bezpośredni link do swojego zdjęcia.
  • Tekst zaznaczony na turkusowo zamień na nazwę użytkownika swojego profilu na Twitterze.
  • Tekst zaznaczony na pomarańczowo zamień również na nazwę profilu na Twitterze.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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