2014/12/22

Świąteczne ikony udostępniania pod tytułem każdego posta na Bloggerze


Demo

W tym poradniku pokażę ci, w jaki sposób umieścić świąteczne ikony udostępniania, które będą wyświetlać się automatycznie pod każdym tytułem posta na Bloggerze.

Umieszczanie widżetu na Bloggerze

W panelu Admina wejdź w Szablon => Edytuj kod HTML szablonu.
Kliknij w okno edytora, wciśnij kombinację klawiszy Ctrl + F, wpisz poniższy kod i wciśnij Enter.
]]></b:skin>
Nad wyszukaną frazą wklej poniższy kod:
.STT-Share img {
width: 42px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.STT-Share img:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}

Teraz wyszukaj znacznik:
<data:post.body/>
Będzie to drugi z kolei taki znacznik (w kodzie znajduje się ich kilka!).
Nad wyszukanym znacznikiem wklej poniższy kod:
<div class='STT-Share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'><img src='http://1.bp.blogspot.com/-cqfE9SGErbU/VJcm1OM5shI/AAAAAAAAGys/RgL0rApZprQ/s1600/facebook.png'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img src='http://1.bp.blogspot.com/-6-fWkciN6nI/VJcm1tJMjyI/AAAAAAAAGyw/6jFohLpqZlE/s1600/twitter.png'/></a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img src='http://2.bp.blogspot.com/-kkcpBUP8Qu8/VJcm2Yjn0xI/AAAAAAAAGy8/wYaKSUAWP4U/s1600/google.png'/></a>
</div>
Na koniec Zapisz szablon.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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