Beauty

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.

Instagram