2015/04/30

Stwórz animowany efekt podkreślenia linku za pomocą CSS

Z pewnością nie raz już zobaczyłeś na wielu stronach, czy blogach takie cudo, że po najechaniu myszką na odnośnik, płynnie pojawiała się i znikała taka fajna dolna kreseczka. Sprawiało to wrażenie, jakby płynęła. Od dziś, możesz mieć u siebie nawet tysiąc takich kreseczek :) W tym poradniku zamieszczam gotowy kod CSS, za którego pomocą wyczarujesz niesamowity efekt przesuwającego się podkreślenia linku, po najechaniu na niego kursorem. Najważniejsze deklaracje posiadają opis - podpowiedź bezpośrednio w kodzie, dzięki czemu będziesz mógł dostosować wygląd linii według własnego uznania.

Demo - najedź kursorem na link poniżej




<a href="http://www.blokotek.pl">Jakiś dłuższy Link na Blokotku</a>


a, a:visited {
text-decoration: none;
position: relative;
color: #069; /* kolor czcionki */
}
a:after, a:visited:after {
content: '';
height: 3px; /* grubość podkreślenia */
position: absolute;
bottom: 0;
left: 0;
width: 0%;
background: #069; /* kolor podkreślenia */
transition: 0.2s; /* szybkość animacji podkreślenia */
}
a:hover:after, a:visited:hover:after {
width: 100%;
}

A jak dodać pływającą kreskę na Bloggerze?

Po prostu w menu Szablon => Edytuj kod HTML, tuż nad:
]]></b:skin>
Wklej kod CSS z ramki na powyżej i Zapisz szablon.
Spowoduje to animację wszystkich linków na blogu.
Czytaj dalej

2015/04/29

15 metod reklamy twojego bloga


Reklama - informacja połączona z komunikatem perswazyjnym. Zazwyczaj ma na celu skłonienie do nabycia lub korzystania z określonych towarów czy usług, popierania określonych spraw lub idei (np. promowanie marki).
Wikipedia.org

   Zapewne każdy bloger chciałby nabyć ogrom czytelników , lecz jak wszyscy wiedzą trudno jest uzyskać taki efekt.Zgodnie z tą prostą definicją musimy skłonić potencjalne osoby do korzystania z naszych towarów, czyli publikowanej treści.Możemy wprost powiedzieć , że to co wkładamy w bloga , sprzedajemy innym użytkownikom internetu.I niekoniecznie zwrot "sprzedajemy" wiąże się z korzyściami materialnymi , ale oznacza zwyczajnie "udostępniać" .Właśnie w tym poradniku opiszę wszystkie formy reklamy , z których początkujący jak i doświadczony bloger mógłby skorzystać.
   Skoro chcemy cokolwiek zapromować , musimy znaleźć strony o tej samej lub podobnej tematyce.Mogą to być portale , fora , różne społeczności (typu Facebook,Twitter) albo również inne blogi, strony.Zanim przeczytasz poniższe sposoby marketingu internetowego , zastanów się jaki towar (treść) posiadasz na blogu i komu mógłbyś sprzedać (udostępnić).


1. Link

   Tak zwany odsyłacz , jest podstawową formą reklamy naszego bloga.Odpowiednio nazwany , pozwala nam uzyskać minimalne efekty.Wprawdzie nie są on wielkie , lecz także stworzenie linku nie wymaga od nas dużego nakładu sił.Taką rzecz możemy umieścić na czatach, forach , społecznościach lub niekiedy w komentarzach na stronach. Najprostszy kod do umieszczenia linku:
<a href="http://www.blokotek.pl" alt="Blokotek-dodatki na bloga">Dodatki na bloga</a>

2. Reklama Graficzna

   Wszelkiego rodzaju odsyłacze graficzne przedstawiane jako banery, loga , buttony są już znacznie lepsze niż jakikolwiek link.Zamieszczenie je np. w sygnaturach na forum , daje nam rzeczywiste szanse uzyskania prawdziwej reklamy.Ponadto tą formą marketingu możemy się wymieniać z innymi blogami,stronami.Oto przykład reklamy oraz kod :

<a href="http://www.blokotek.pl" alt="Blokotek-dodatki na bloga"><img src="https://pbs.twimg.com/profile_images/559689372790837249/Vl_I9A0v.png" alt="blokotek"></a>



3. Tekstowa prezentacja bloga na forum 

  Na niektórych forach internetowych możemy przedstawić swoją stronę.Wystarczy zamieścić post, lub temat o swoim blogu.Aby tam opisać go , również można dodać reklamę graficzną lub linka.Warto z tej opcji skorzystać , ponieważ  ludzie chętnie oglądają czyjeś blogi ,a to umożliwia nam pozyskanie czytelników.


5. Artykuł sponsorowany

Artykuł płatny umieszczany na innej stronie o podobnej tematyce , w celu wypromowania strony lub bloga.

4. Reklama multimedialna - kodowana

   Są one jednymi z reklam najbardziej popularnymi , a przy tym bardzo efektownymi.Wykorzystuje się do nich różne skrypty bądź są to multimedia flashowe. Otóż głównym celem tej treści jest wyświetlanie obrazu wraz z różnymi efektami , takimi jak np. powiększenie,zmiana koloru czcionki w czasie najechania na reklamę.Krótko podsumowując ma to zachęcić odbiorców do zobaczenia strony , choć może ona nie być interesującą.

5. Reklama multimedialna - wideo   

   Ruchomy obraz i dźwięk jest tym co człowiek może potrzebować , więc takie typu reklamy wzbudzają respekt u widza.Profesjonalne strony te rzeczy używają , ale wy także możecie z tego skorzystać.Naszą produkcję możemy opublikować za darmo na Youtube (większe strony wykupują reklamy w telewizji).

6. Znak wodny

 Umieszczany na wielu obrazach efektownie reklamuje bloga.Przydaje się także , w zachowaniu praw autorskich np. gdy jest kopiowany.Jak zrobić znak wodny ?

7. Reklama Kontekstowa

Jest to sposób prezentowania reklam użytkownikom rozmaitych usług internetowych (stron internetowychE-mailiczatówforów dyskusyjnychkomunikatorów itd.), który zakłada dopasowanie treści reklam do treści stron, na których są one umieszczone. Ideą reklamy kontekstowej jest założenie, że osoba wystawiona na jej działanie chętniej na nią pozytywnie zareaguje, gdy będzie ona związana z poszukiwaną przez tę osobą informacją niż gdyby nie miała ona z nią związku.Taką formę wykorzystuje dobrze nam znane Google Adwords. My również możemy wykorzystać to (np. do pokazywania naszej reklamy na stronach o tej samej tematyce), lecz oczywiście jest to płatna opcja. Zgodnie z informacjami na Adwords obliczyłem , że za 100 kliknięć musielibyśmy zapłacić 58 złotych.Ale jak działa ?

  1. Wycena: kontakt, poznanie oczekiwań klienta, pomoc w doborze słów kluczoych, wycena pozycjonowania
  2. Umowa: podpisanie umowy na pozycjonowanie.
  3. Optymalizacja: poprawiamy kod Twojej witryny, aby był bardziej przyjazny wyszukiwarce
  4. Pozycjonowanie: podejmujemy działania mające na celu podyższenie pozycji strony w rankingu Gooogle
  5. Raporty: z końcem każdego miesiąca przesyłamy klientowi raport z pozycjonowania. Rozlicza się tylko za efekty.

8. Materiały drukowane , prasa

Mogą to być ulotki , plakaty , banery , reklamy w prasie lub też wizytówki.Nie jest to złym pomysłem jeśli nasz blog, strona ma tematykę poruszaną w ogóle społeczności np. ostatnio w mojej lokalnej gazecie był krótki artykuł o młodej projektantce mody oraz o jej blogu.Najczęściej jednak swoje strony uwzględnia coraz więcej firm , właśnie w tego typu rzeczach.   




9. Funkcja udostępniania na portalach społecznościowych

Ta metoda na ogół , jeśli mamy dużą liczbę fanów na naszym blogowym fanepage , kanale czy też koncie pozwala nam w krótkim czasie uzyskać znaczny wzrost oglądalności strony.Z tej metody korzystają wielkie portale jak i małe blogi , i sprawdza ona się w stu procentach.

10. SEO

Jest to pozycjonowanie strony na potrzeby wyszukiwarek , dzięki temu wpisywana fraza wiążąca się z tematyką strony , może wyświetlić twojego bloga na liście stron w wyszukiwarce Google (w zależności od trafności sformułowania bądź wypozycjonowania bloga). Weźmy przykład : Niewypozycjonowany blog o ciastkach.Jeśli wpiszemy "blog o ciastkach" , wyszukiwarka na pewno nie pokaże tej strony , lecz wiele innych.Natomiast jeśli wyszukamy swojego adresu strony np. "www.przykladoweciasteczko.pl" to pierwszą z wyników wyszukiwarki może być właśnie ten blog o ciastkach.Więcej o SEO dowiesz się tu.


11. Mailing

Za pomocą tej rzeczy możemy udostępniać nasze blogi , wysyłając wiadomości do naszych znajomych.Jeśli mamy spore grono osób , to tym łatwiej będzie nam pisać do nich.Z pewnościa myślę , że to również dobra reklama. 


12. Content marketing

Doświadczeni blogerzy mogą wiedzieć co to jest.Otóż jest to reklamowanie się z wykorzystaniem wielu rzeczy w celach marketingowych np. w internecie - pisanie artykułów , evideo , formy graficzne itd.W szerszym rozumieniu content marketing obejmuje również treści tworzone poza Internetem: w prasie branżowej, gazetkach, folderach, ulotkach, katalogach, poradnikach drukowanych, książkach itd. I właśnie w tych wymienionych rzeczach możemy zareklamować bloga.Popularne są ostatnio książki , a wskazuje na to , że coraz więcej blogerów udostępnia takie publikacje.Odnoszą podwójną korzyść z tego: Reklamują bloga i mogą zarobić na sprzedaży swojego dzieła.

13. Toplisty

Znane nam dobrze listy stron lub rankingi , są coraz bardziej popularyzowane w internecie.Pozwalają każdemu zapromować własnego bloga .Warto to zrobić , szczególnie kiedy mamy do czynienia z profesjonalnymi toplistami.

14. Przekaz ustny

Nic nie działa tak bardzo na ludzi jak rozmowa i tą rzecz powinniśmy wykorzystać w marketingu.Polecać blogi możemy swoim znajomy.Krótko opisać oraz przedstawić stronę i podać jej adres.

15. Inne Formy reklamy

Oprócz wszystkich wymienionych tu form , są jeszcze inne ,lecz bardziej otwarte na społeczność. 

Bilboard - są to plakaty , tablice reklamowe wystawiane w ulicach miast.

Outdoor - reklama zewnętrzna , pojawiające się na ulicach czy też w miejscach publicznych.

Reklama tranzytowa – rodzaj reklamy outdoorowej (zewnętrznej), której nośnikami są środki komunikacji: autobusybusytaksówkisamochody prywatne czy też specjalne samochody reklamowe

Reklama ambientowa – wszelkie formy reklamy niestandardowej. Reklama na środkach komunikacji miejskiej lub w lokalach publicznych np. w restauracjach , szkołach , kawiarniach itd. 

Czytaj dalej

2015/04/28

Umieść na blogu własny system pytań i odpowiedzi używając Dilmot

Dilmot - to anglojęzyczny, darmowy serwis, który umożliwia stworzenie własnego systemu pytań i odpowiedzi, głosowania na nie oraz umieszczenie widżetu na blogu. Wpisy mogą być prywatne lub publiczne. Istnieje również opcja ich moderacji. Niestety wersja darmowa udostępnia jedynie prywatny system wpisów. W tym poradniku opiszę, w jaki sposób założyć konto, stworzyć widżet i umieścić go na Bloggerze.

Wejdź na stronę Dilmot i kliknij Sign Up.
W formularz wpisz nazwę użytkownika, e-mail i hasło, po czym kliknij Create account. Ja skorzystam z konta Twittera.
Jeśli ty również, autoryzuj aplikację wciskając Sign In, by zalogować się na konto Twittera.
Nazwa użytkownika uzupełni się automatycznie (w tym przypadku). Wystarczy podać e-mail i wcisnąć Create account.
Sprawdź skrzynkę mailową, na którą został wysłany link aktywacyjny.
Kliknij w łącze Confirm my account.
Konto zostanie zweryfikowane.
Możesz się już zalogować. Wpisz e-mail, hasło i wciśnij login, lub - tak jak ja - kliknij Login with Twitter.
Znajdziesz się w panelu admina. By wejść w ustawienia, kliknij Account.
Tu możesz zmienić wygląd widżetu. Change background - zmiana tła, Change bubbles - zmiana kształtu dymków. Na koniec kliknij Save.
Wróć do zakładki Streams i wciśnij Create new Stream, by utworzyć nowy strumień.
Wpisz tytuł i kliknij Create Stream.
Wpisz opis lub po prostu wciśnij Next.
Możesz dostosować uprawnienia odpowiedzi na pytania gościom. Kliknij Next.
Jeśli chcesz otrzymywać powiadomienia mailowe o nowych wpisach zaznacz Notifications - Notify new questions by e-mail. Na koniec wciśnij Save.
By pobrać kod widżetu wciśnij Share / Embed.
Skopiuj kod wybranego widżetu:
1. Pełny strumień wpisów / pytań.
2. Tylko formularz do umieszczenia wpisu / pytania.
Tak wygląda widżet z kodem pełnego strumienia. Pojawia się formularz i pod spodem wpisy / pytania, które zostały już zamieszczone. Ja na razie jeszcze żadnych nie mam.
Teraz przejdź do edycji nowego posta lub strony.
Edytor przełącz do trybu HTML i w jego treści wklej skopiowany kod. Na koniec Opublikuj.
Czytaj dalej

Wstaw kod programowania do treści posta z Pastebin

W tym poradniku opiszę prosty sposób, w jaki można umieszczać kody programowania w treści postów tak, by czytelnicy mogli je zobaczyć i skopiować, a przeglądarka nie będzie ich interpretować.

Wejdź na stronę Pastebin

1. Wpisz kod programowania.
2. Wybierz składnię kodu, np. HTML, CSS, itp.
3. Określ czas usunięcia kodu: never - nigdy.
4. Wybierz opcję prywatności kodu: public - publiczny (by czytelnicy mogli go zobaczyć).
5. Wpisz tytuł (opcjonalnie).
6. Wyślij kod.

By móc zarządzać utworzonymi kodami, zarejestruj się, a będą one przyporządkowywane do twojego konta.
Kiedy kod jest już zapisany wciśnij EMBED.
Skopiuj kod iframe z punktu 2.
Teraz przejdź do edycji nowego posta.
Edytor posta przełącz do trybu HTML i w jego treści wklej skopiowany kod. Na koniec Opublikuj.
Czytaj dalej

Stwórz 5 rodzajów widżetów ze zdjęciami Instagrama przy pomocy SnapWidget

Zobacz demo na blogu w stopce

Widżet składający się z mini galerii zdjęć Instagrama jest teraz bardzo popularny, szczególnie na anglojęzycznych blogach, jednak w Polsce też możemy obserwować narastanie tego trendu. Jeśli lubisz być na topie, zamieść taki również u siebie. Snap Widget oferuje aż 5 różnych typów galerii!

Wejdź na stronę Snap Widget i wypełnij pola formularza:

1. Nazwa użytkownika na Instagramie.
2. Słowo kluczowe (opcjonalnie).
3. Typ widżetu:
4. Rozmiar miniaturki.
5. Ilość miniaturek w pionie i poziomie.
6. Obramowanie miniatur: yes - tak, no - nie.
7. Kod hex koloru tła widżetu.
8. Odległość między miniaturkami.
9. Efekt po najechaniu kursorem na miniatury.
10. Przyciski udostępniania: yes - tak, no - nie.
11. Układ responsywny - widżet dostosowuje się do różnych rozmiarów wyświetlaczy - yes - tak, no - nie.
12. Podgląd widżetu.
13. Wygeneruj kod widżetu.

Jak umieścić widżet na Bloggerze?

Zaloguj się do panelu administracyjnego na Bloggerze. Przejdź do menu Układ i Dodaj gadżet.
Wybierz HTML/JavaScript.
W tytuł możesz wpisać, np. Instagram. W treść wklej skopiowany kod widżetu. Na koniec Zapisz.
Czytaj dalej

2015/04/27

Jak usunąć pasek nawigacyjny z bloga na Bloggerze? - 3 sposoby

Jedną z irytujących funkcji, podstawowych szablonów Bloggera jest pasek nawigacyjny. Ma on za zadanie usprawnić logowanie do panelu, wyświetla wyszukiwarkę oraz opcję udostępniania bloga, a także możliwość przejścia do kolejnych blogów założonych na tej platformie według ich ID. Jednak zamiast przyspieszyć pracę z blogiem, po prostu on irytuje, przeszkadza i najzwyczajniej jest już niemodny. Designerzy szablonów usuwają go, by nie psuł widoku bloga nawet adminowi. 

Ja opisałam 3 sposoby, dzięki którym samodzielnie wyłączysz pasek nawigacyjny i nie będziesz już musiał dłużej się z nim męczyć. Najlepiej wybierz metodę dostosowaną do twoich umiejętności webmasterskich.

I. Wyłączenie paska w panelu admina

1. Wejdź do menu Układ.
2. Przy gadżecie Pasek nawigacyjny kliknij Edytuj.
3. Zaznacz Wyłączone i Zapisz.

II. Wyłączenie paska poprzez usunięcie jego kodu w szablonie.

1. Wejdź do menu Szablon.
2. Z rozwijanej listy Przejdź do widżetu wybierz Navbar1.
3. Usuń całą sekcję kodu paska (może on się nieco różnić w zależności od szablonu).
4. Na koniec Zapisz szablon.

III. Wyłączenie paska poprzez dodanie reguły css blokady jego wyświetlania.

1. W menu Szablon, kliknij boczną strzałkę i rozwiń kod:
<b:skin>...</b:skin>
2. Nad:
]]></b:skin>
Wklej:
#Navbar1{display:none}
3. Na koniec Zapisz szablon.
To wszystko! Jeśli udało ci się wyłączyć nachalny pasek, daj znać w komentarzu, a w miarę możliwości udostępnij ten post innym, by i oni mogli uporać się z tym problemem.
Czytaj dalej
Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.