W dzisiejszy blogowy poniedziałek dodamy do blogów smaczek jakim jest wizytówka/ informacja o autorze pod każdym postem wraz z ikonkami społecznościowymi. W moim odczuciu warto ją dodać dla czytelników, którzy pierwszy raz do nas trafiają. Jeśli nowa osoba szukając czegoś za pomocą np. wyszukiwarki google trafi nasz artykuł to bezpośrednio po jego przeczytaniu zobaczy nasze urocze lico, kilka słów o nas i bez dodatkowego szukania będzie mogła zacząć nas obserwować. To bardzo ważne, aby ułatwiać nowym czytelnikom śledzenie nas, a wręcz podpowiedzieć im ten pomysł. Jeśli w ciągu kilku sekund nie znajdzie sposobu, aby zasubskrybować Twój blog, zamknie stronę i do nas nie wróci nawet jeśli się jej u nas spodobało.
Jeśli zdecydujesz się dodać taką wizytówkę z ikonkami według mojej instrukcji to będzie ona wygląda mnie więcej tak:
Jak wygląda działająca wersja mojej wizytówki możesz zobaczyć poniżej tego wpisu. Nie zaszkodzi jeśli klikniesz w jakąś ikonkę i zaczniesz mnie obserwować, jeśli jeszcze tego nie robisz:)
Jak zatrzymać czytelnika?
Wizytówka pod każdym postem + ikonki społecznościowe
KROK 1: W bloggerze przejdź do SZABLON. Pobierz kopię szablonu (jeśli nie wiesz jak to zrobić kliknij TU). Następnie kliknij EDYTUJ KOD HTML. Kliknij w dowolny fragment kodu i wciśnij jednocześnie CTRL i F. W okienku, które się pojawi wklej: <b:includable id='post' var='post'>
Szukamy w niej fragment: <div class='post-footer-line post-footer-line-1'> i bezpośrednio pod nim wklejamy zawartość poniższego pliku, uprzednio zastępując tekst wyróżniony na czerwono odpowiednimi wartościami.
Do uzupełnia będziesz potrzebowała:
- swojego zdjęcia o szerokości min 150px (zdjęcie umieść np. w albumie google i pobierz adres URL - jak to zrobić zerknij TU)
- opisu
- linków do profili społecznościowych
Jeśli nie masz konta na którymś z profilów usuń linię, w której znajduje się dana ikonka. Np. jeśli nia masz własnego sklepu to usuwasz ten fragment:
<div class='social'><a href='link do Twojego sklepu'><img src='https://lh4.googleusercontent.com/-V2DsgcmlmrE/VQ_txt1V2WI/AAAAAAAAZ6M/9AHuAGUnmRI/s32-no/cart.png' alt='sklep'/></a> </div>
KROK 2: Za pomocą ctrl + f w kodzie odnajdujemy:
]]>i powyżej wklejamy zawartość poniższego pliku. Później wystarczy, że zapiszesz zmiany.
***
Jeśli macie pytania, bądź chcecie zmodyfikować wygląd wizytówki piszcie w komentarzach.
Ładny design. Wizytówka prosta i stylowa. Zawiera wszystkie niezbędne elementy;)
OdpowiedzUsuńDziękuję:)
OdpowiedzUsuńCiekawy wpis i ciekawe czy uda mi się to zrobić :))) jakby co, wiem gdzie szukać pomocy..:))) pozdrawiam serdecznie Kasia
OdpowiedzUsuńBardzo ładna wizytówka.
OdpowiedzUsuńI przydatna treść. Dzięki!
Daj znać jak poszło!
OdpowiedzUsuńProszę :) Lubię, kiedy poruszasz tego typu tematykę :d
OdpowiedzUsuńBardzo przydatne, chcę wdrożyć w życie-bloga. Ale próbując kliknąć w pliki z ikonką WORD, automatycznie ląduję na pinterest :( Smuteczek, proszę o pomoc:)
OdpowiedzUsuńSliczna wizytowka. Pozdrawiam serdecznie beata
OdpowiedzUsuńŚwietna wizytówka. Podoba mi się o wiele bardziej niż ta która jest ustawiona z automatu w moim szablonie. Mam nadzieję, że uda mi się pobrać jakoś te pliki bo na razie wyskakuje mi tylko opcja "pin it"
OdpowiedzUsuńKarolinko - zauważyłam, że się ostatnio ozłociłaś :) Pasuje Ci to :) Jesteś Złotym Człowiekiem - nie ze względu na złote literki - dziękuję za czas, który nam poświęciłaś i za cenne rady. A jak przeczytałam ten wpis .... to wiem że muszę się zmobilizować aby dodać taką wizytówkę. Dziękuję serdecznie i pozdrawiamy z Arki :)
OdpowiedzUsuńRady jak zawsze świetne. Muszę znaleźć w końcu czas żeby to ogarnąć. Wizytówką świetna. Muszę coś w końcu przygotować
OdpowiedzUsuńO tym nie pomyślałam:) Powiększyłam ikony - powinno być łatwiej.
OdpowiedzUsuńPowiększyłam ikonki - już powinno być łatwiej.
OdpowiedzUsuńKobieta potrzebuje zmian:) Pozdrawiam Was serdecznie!
OdpowiedzUsuńJak zrobisz to pokaż jak wyszło!
OdpowiedzUsuńSenkju:)
OdpowiedzUsuńNiestety idzie mi jak po grudzie:( Pierwszy problem, który wyskoczył to "&container", już kiedyś miałam z tym do czynienia, i znalazłam dobrą poradę iż kod woła o zapis "&". Dwukrotnie system poprosił i poprawiłam, po czym przesunął mnie jeszcze niżej kodu i chciał ingerować w następne elementy, pouczając, że każdy musi się kończyć itp. Anulowałam zmiany bo nie chcę grzebać w każdej linijce szablonu, jako laik zapewne coś zepsuję. Czy mogę prosić o pomoc?
OdpowiedzUsuńPost jak zawsze bardzo przydatny, ale skupić za bardzo się nie mogę bo podziwiam nowe kolory i nowy nagłówek! Piękne!
OdpowiedzUsuńDobrze zrobiłaś wycofując zmiany. Na moje oko wkleiłaś kod wewnątrz innego elementu. Wkleiłaś go bezpośrednio pod frazą, którą wskazałam czy było coś pomiędzy?
OdpowiedzUsuńDziękuję, że odpisałaś, po KROK.1, za wyszukaną frazą jest coś takiego ,wklejałam, jak napisałaś bezpośrednio pod (..)footer-line1'> przesuwając to, co za nią w dół, czy to błąd? Zaś fraza w KROKU 2. "]]>" wyskakuje przy użyciu okienka ctrl+F w czterech miejscach, może wybierałam źle? Przepraszam jeśli to kłopot :(
OdpowiedzUsuńMotywujesz, dziewczyno! Ostatnio dzięki Tobie zmieniłam w końcu nazwę, a teraz kolejne bardzo przydatne treści! Super! :) No i rzecz jasna po prostu MUSIAŁAM Cię polecićw ramach Share Week :D
OdpowiedzUsuńPowiedz mi najpierw czy linię z kroku 1 wyszukałaś tak pisałam czy przez ctrl+f.Pytam bo występuje w kilku miejscach, a chodzi o jedną konkretną. Jeśli tak to czy po wykonaniu Kroku1 udaje zapisać się szablon?
OdpowiedzUsuńJeśli chodzi o krok 2 to ważne, aby wkleić w aruszu stylów - nie musi to być konkretne miejsce. Możesz np wyszukać /* Posts
i wkleić zawartość poniżej
/* Posts----------------------------------------------- */
Dziękuję ogromnie!:)
OdpowiedzUsuńNie ma sprawy
OdpowiedzUsuńTak dokładnie, ale ta u mnie występuję w jednym miejscu:
OdpowiedzUsuńPróbuję zapisać szablon po kroku 1, ale wyskakuje "The reference to entity "container" must end with the ';' delimiter"
OdpowiedzUsuńWyszło mi :)
OdpowiedzUsuńZrobiłam to na razie na blogu testowym i jest tylko jeden problem.
Wyszło mi wszystko w pionie.
Najpierw słowo: Autorka, poniżej zdjęcie, pod nim opis, a potem ikonki, też ustawione w pionie.
Wydaję mi się, że wszystko zrobiłam według instrukcji.
Jakoś nie mogę się przekonać do wizytówki pod postem. Choć u Ciebie lubię, u innych też, jeśli z pomysłem. Muszę jeszcze "dojrzeć" :)
OdpowiedzUsuńBardzo żałuję, że pracujesz na blogerze, a nie na wordpressie:( Może jednak nas samotnych przytulisz jakoś, wesprzesz, przygarniesz?
OdpowiedzUsuńSzkoda, że trafiłam na ten wpis już po tym, jak sama się męczyłam, żeby coś takiego zrobić. Gdybyś napisała ten wpis wcześniej, to nie męczyłabym się tak :D
OdpowiedzUsuńPrzesiadka na wordoressa to u mnie bliska perspektywa wiec pewnie wówczas i o nim będę pisac:)
OdpowiedzUsuńMyślę, aby udostępnić opcję zamawiania wpisow- jak czytam taki komentarz jak Twój to myślę ze mogloby się przyjąć (?)
OdpowiedzUsuńDobry pomysł!:)
OdpowiedzUsuńA całą zawartosc drugiego pliku wkleiłaś? To ona jest odpowiedzialna za odpowiednie ustawienie wszystkiego.
OdpowiedzUsuńA jeszcze spytam. Od czasu "ozłocenia" nie pojawia się przycisk "czytaj dalej" pod postami. Aby przejść do posta, klikam w tytuł. To zamierzony efekt? Trochę mniej wygodny, bo po przeczytaniu wstępu muszę cofać się do tytułu, podczas gdy wcześniej dalsza treść była na odległość kliknięcia..
OdpowiedzUsuńdodaje do listy rzeczy do zrobienia przy odswiezaniu bloga, bedzie jak znalazl :)
OdpowiedzUsuńustawiłam sobie, ale jak mam nie pełna linijkę tekstu ikonki wchodzą mi w tekst :/
OdpowiedzUsuńHmm...u mnie się tak nie dzieje. Spróbuj dodać
OdpowiedzUsuńprzed
oraz
za
Chodzi o część z pierwszego pliku.
Miałam taką wizytówkę, ale dodałam same ikonki. Zobaczę czy coś pomoże :)
OdpowiedzUsuńJak na Twoim blogu wyświetlam źródło to widzę frazę w 4 miejscach,
OdpowiedzUsuńCiekawy sposób :)
OdpowiedzUsuńJa jednak nie lubię mieć czegoś nawalonego pod postem, więc zostanę przy standardowym gadżecie obserwuj :)
Dziękuję za przydatne rady. Jakoś tak do tej pory nie zastanawiałam się, jak bardzo ważna jest wizytówka pod postem, a teraz dzięki tym radom już mam własną.
OdpowiedzUsuńUsunęłam przypadkowo i nie mogę się zabrać za przywrócenie;)
OdpowiedzUsuńJa coś nabroiłam i mi nie wyszło....
OdpowiedzUsuńA co się porobiło?
OdpowiedzUsuńTeraz już nie pamiętam co za alert mi się pokazał, bo to było wczoraj. Ale zaraz zrobię drugie podejście do tematu :) mam nadzieję, że tym razem się uda zrobić tę wizytówkę. Jeśli nie - będę Ci marudzić :) Pozdrawiam, super projekt, super strona :)
OdpowiedzUsuńJak Ci się ta sztuka udała....??? Może to proste tylko ja jestem wyjątkowo odporna na html'a.....
OdpowiedzUsuńNajważniejsze to znaleźć odpowiednie miejsce do wklejania kodu - dokładnie z instrukcją i nie pousuwać za dużo podczas uzupełniania swoich danych. Pisz w razie czego:)
OdpowiedzUsuńMasz ten sam problem?
OdpowiedzUsuńTen sam problem... zawartość pliku wstawiam pod wyszukanym fragmentem.... czyli... robię enter i wklejam na dole treść worda....? czy tak? i w kroku drugim... nad wyszukanymi "nawiasami"... Próbowałam dziś jeszcze w inny sposób wstawiać podpis, zgodnie z tutorialem Beaty... tez bezskutecznie... :) boję się, że może to blogger nie ogarnia mojej tępoty......
OdpowiedzUsuńJak chcesz odezwij się to pomogę
OdpowiedzUsuńJuz wiem jaka będzie nastepna zmiana na moim blogu :) mam nadziję, że się uda :)
OdpowiedzUsuńUrocze lico, rozbroiłaś mnie tym! ;) Tak, to jest bardzo potrzebne. Teraz, jak już jestem na wordpressie, do pełni szczęścia brakuje mi tylko porządnego zdjęcia profilowego ;)
OdpowiedzUsuńSwoją drogą, Twój blog wygląda świetnie i czasem się zastanawiam, czy aby nie przeszłaś już na wp ;)
A masz pomysł na jakim etapie coś poszło nie tak?
OdpowiedzUsuńZ bloggera można sporo wycisnąć. Jeszcze nie przeszłam, ale jestem w trakcie. W zasadzie głównie dostosowuję szablon, aby był w podobnym stylu do obecnego.
OdpowiedzUsuńBardzo fajna wizytówka, niestety nasz blog nie jest na blogerze, a na wordpressie
OdpowiedzUsuńŚwietne, praktyczne, życiowe - tyle porad że zacznę je zaraz wdrażać, dziękuję i oczywiście Twoje lico, ikonki oraz opis natychmiast zmotywowały mnie do subskrypcji bloga na FB:) pozdrawiam
OdpowiedzUsuńHmmm, a mnie zawsze te mini biografki denerwowały... Muszę przemyśleć czy jednak nie dodać tego z powrotem u siebie ;)
OdpowiedzUsuńPozdrawiam z grupy Uli :)
Dziś zrobię jeszcze jedno podejście. Może dodaję niechcący jakąś spację, bądź enter nie tu, gdzie trzeba...? Nie poddam się raczej. Narazie "wrzuciłam" blogerową wizytówkę, ale ona jest, taka jakaś.... dla lamerów... :D
OdpowiedzUsuńudało się :) dziękuję za wyłożenie kawa na ławę :)
OdpowiedzUsuńNie każdy musi wszystko miec, ale warto rozwazyc chociaż same ikonki społecznościowe:) Dzieki ze wizytę:)
OdpowiedzUsuńMiło mi ogromnie! Jesli FB uzna, że moje posty Cię nie interesują to pozwolę sobie nadmienić, ze cos nowego pojawia się w każdy poniedziałek, środę i piatek:)
OdpowiedzUsuńSuper, ze się udalo. Kilka osób pisało, że coś im nie wyszło i juz bałam się że cos poknociłam w instrukcji:)
OdpowiedzUsuńHmmm... DZIĘKI! Zaraz zabieram się do roboty :) I obawiam się, że znajdę tu dużo więcej przydatnych wskazówek. Nie wiem, jak się na tej stronie znalazłam, ale chyba tu zostanę na dłużej.
OdpowiedzUsuńhmm... coś nie działa. Niby wszystko wstawiłam, jak opisałaś, ale jednak nic się nie pokazuje pod postami. Obawiam się, że coś skopałam ;)
OdpowiedzUsuńMiałam ten sam problem, ale okazało się, że wkleiłam nie w tym miejscu :)
OdpowiedzUsuńPrawie mi się udało. Nie wiem tylko jak pozbyć się szarego tła (nie widać dzięki niemu ikonek) i jak usunąć etykiety :) Będę wdzięczna jeśli znajdziesz chwilę na udzielenie mi rady :D
OdpowiedzUsuńNo dobra, ogarnęłam i to ;)
OdpowiedzUsuńJeszcze tylko myślę o powiększeniu czcionki. Jak to zrobić?
Poddaję się :D
OdpowiedzUsuńbardzo często z chęcią bym coś zastosowała, jednak wszystkie blogowe rady tyczą się głównie blogów na bloggerze
OdpowiedzUsuńNo właśnie właśnie ;)
OdpowiedzUsuńZrobiłam! :) Dziękuję :) Tylko jeszcze chciałabym zmienić kolory słowa 'Autorka' i ikonek społecznościowych, bo ich nie widać... I przesunąć gadżet 'read more' pod wizytówkę... ale to już wyższa szkoła jazdy ;)
OdpowiedzUsuń