2015/04/22

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

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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