JAK ZROBIĆ WŁASNE IKONKI UDOSTĘPNIANIA POD POSTEM?

  Od wakacji szukam jakiegoś kodu CSS lub HTML na ten temat. Ile straconych godzin szukania tego po internetach! Jednak ostatniego wieczora coś we mnie pękło i postanowiłam, że nie zasne, póki nie uzyskam odpowiedniego efektu. Oczywiście nie znalazłam odpowiedniego kodu, tylko jego część, więc musiałam się męczyć sama z wymyślaniem go. Tak o to spędziłam sześć godzin przed komputerem, mniej więcej od 21 do 3 w nocy...

  Najważniejsze, że się udało! A teraz przejdźmy już do dodawania gadżetu własnych ikonek udostępniania pod każdym postem. Niestety będzie trzeba grzebać (Nie, nie człowieka) trochę w kodzie HTML naszego bloga. Chyba każdy wie gdzie to się znajduje, ale podam jeszcze raz odpowiednie karty. Przy okazji podam także frazę w której będziemy wklejać kod:

Szablon → Edytuj kod HTML  →  CTRL+F → <div class='post-footer'> 

  W kodzie HTML wprawdzie są dwa miejca w której ta fraza się znajduje, ale nas interesuje tylko jedna z nich. U mnie działa ta druga, jednak na każdym blogu może działać to inaczej, więc radziłabym kod wkleić raz w jednym, a potem ewentualnie w drugim. Kod wklejamy pod daną <div class='post-footer'> lub w środku tego DIVa. To się w ogóle odmienia? 😜

<div style='position: absolute; inline-block; right: -230px; width: 400px; height: 150px; bottom: -126px; '><div class='post-share'><ul><li><a class='hi-icon hi-icon-chat' href='http://www.facebook.com/sharer.php?u=http://tajemnicze--drzwi.blogspot.com/&apos; + posturl + &apos;'><i class='fa fa-facebook'/></a></li></ul></div></div>
<div style='position: absolute; inline-block; right: -280px; width: 400px; height: 150px; bottom: -126px; '><div class='post-share'><ul><li><a class='hi-icon hi-icon-chat' href='http://twitter.com/share?url=http://tajemnicze--drzwi.blogspot.com/'><i class='fa fa-twitter'/></a></li></ul></div></div>
<div style='position: absolute; inline-block; right: -330px; width: 400px; height: 150px; bottom: -126px; '><div class='post-share'><ul><li><a class='hi-icon hi-icon-chat' href='https://plus.google.com/u/0/share?url=http://tajemnicze--drzwi.blogspot.com/'><i class='fa fa-google-plus'/></a></li></ul></div></div>
<div style='position: absolute; inline-block; right: -380px; width: 400px; height: 150px; bottom: -126px; '><div class='post-share'><ul><li><a class='hi-icon hi-icon-chat' href='http://pinterest.com/pin/create/button/?url=http://tajemnicze--drzwi.blogspot.com/' target='_blank'><i class='fa fa-pinterest'/></a></li></ul></div></div>

Right -230px; - Długość (można zamienić na left w razie potrzeby)
Width 400px; - Szerokość. Parametry są zmienne
Height: 150px; - Wysokość. Parametry są zmienne
Bottom: -126px; - Odległość od górnej krwędzi stopki nposta. Paramaty są zmienne
http://tajemnicze--drzwi.blogspot.com/ - Adres bloga, najlepiej własnego 😜
fa-fa-facebook - Ikonka udostępniania posta

  Po wklejonym kodzie wystarczy zapisać szablon i podziwiać efekty! 😁 Dodam jeszcze, że inne ikonki można znaleźć na stronie font awesome. Potrzebny nam dany element wyszukiwania wklejamy w "search icons" i klikamy enter. Mam nadzieję, że wyjśniłam dość dobrze, jednak w razie jakich kolwiek problemów czy dodatkowych pytań zapraszam do komentowania tego posta lub skontaktowania się ze mną przez e-mail podany w kontakcie lub przez jedną ze stron społecznościowych 😊