Kolorowe, boczne kafelki społecznościowe w stylu Windows Metro

przez - kwietnia 22, 2015

Demo

Jak umieścić widżet na Bloggerze?

Zaloguj się na swoje konto i przejdź do menu Szablon => Edytuj kod HTML.
Kliknij w okno edytora i wciśnij kombinację klawiszy Ctrl+F. Używając wyszukiwarki znajdź:
</head>
Tuż nad znalezionym znacznikiem wklej kod:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Teraz wyszukaj:
]]></b:skin>
I tuż nad nim wklej kod:
/* Boczne kafelki społecznościowe
----------------------------------------------- */
nav {
  position: absolute;
  top: 20%;
  left: 0;
  font-family: Arial;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  margin: 0;
  padding: 0;
  height: 80px;
  width: 80px;
}
nav a {
  position: relative;
  z-index: 100;
  color: white;
  text-decoration: none;
  font-size: 40px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-perspective-origin: center top;
          perspective-origin: center top;
}
nav a:after {
  content: "";
  font-size: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  -webkit-transform: rotateY(180deg) translateX(80px);
          transform: rotateY(180deg) translateX(80px);
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: -webkit-transform .5s ease-out;
          transition: transform .5s ease-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
nav a:hover:after {
  -webkit-transform: rotateY(0) translateX(80px);
          transform: rotateY(0) translateX(80px);
}
nav .facebook a {
  background: #3598DB;
}
nav .facebook a:hover:after {
  border-left: 2px solid #3598DB;
}
nav .facebook a:after {
  background: #3598db;
  content: "Facebook";
}
nav .twitter a {
  background: #1dd1ae;
}
nav .twitter a:hover:after {
  border-left: 2px solid #1dd1ae;
}
nav .twitter a:after {
  background: #1dd1ae;
  content: "Twitter";
}
nav .googleplus a {
  background: #e84c3d;
}
nav .googleplus a:hover:after {
  border-left: 2px solid #e84c3d;
}
nav .googleplus a:after {
  background: #e84c3d;
  content: "Google+";
}
nav .instagram a {
  background: #f5c700;
}
nav .instagram a:hover:after {
  border-left: 2px solid #f5c700;
}
nav .instagram a:after {
  background: #f5c700;
  content: "Instagram";
}
Teraz wyszukaj znacznik:
</body>
I tuż nad nim wklej poniższy kod:
<nav>
  <ul>
    <li class='facebook'>
      <a href='http://www.facebook.com/blokotek'>
        <i class='fa fa-facebook'></i>
      </a>
    </li>
    <li class='twitter'>
      <a href='http://twitter.com/Blokotek'>
        <i class='fa fa-twitter'></i>
      </a>
    </li>
    <li class='googleplus'>
      <a href='https://plus.google.com/+BlokotekPlDodatki'>
        <i class='fa fa-google-plus'></i>
      </a>
    </li>
    <li class='instagram'>
      <a href='http://instagram.com/Blokotek.pl'>
        <i class='fa fa-instagram'></i>
      </a>
    </li>
  </ul>
</nav>
Następnie Zapisz szablon.
Linki zaznaczone na turkusowo zamień na własne adresy do profili społecznościowych.

Zobacz również

0 komentarzy