Jak dodać na bloga gadżet Instagram?

Instagram – fotograficzny serwis społecznościowy hostingu zdjęć, połączony z aplikacją o tej samej nazwie (dostępną obecnie na systemy operacyjne Windows Phone, iOS oraz Android), który umożliwia użytkownikom robienie zdjęć, stosowanie do nich filtrów cyfrowych oraz udostępnianie ich w różnych serwisach społecznościowych. Żródło - Wikipedia

Gdzie mogę stworzyć gadżet Instagram?

• http://instagme.com/ (na tej stronie w dalszej części będzie się opierać moja instrukcja)
• http://www.instagram24.pl/instagram-na-twoim-blogu.html
• http://snapwidget.com/
• http://instansive.com/
• https://instagram.com/accounts/badges/

Uwaga! Tworzenie gadżetu na powyższych stronach odbywa się na podobnej zasadzie, dlatego zdecydowałam się instrukcję przedstawić w oparciu o stronę Instagme.com oraz o stronę Instagram.com

Jak stworzyć gadżet instagram i wstawić go na bloga?
1. W pierwszej kolejności w chodzimy na jedną z powyższych stron, w moim przypadku Instagme.com
2. Dostosowujemy formularz wg naszych potrzeb

Username - nazwa użytkownika, czyli nick, którzy wybraliśmy sobie podczas tworzenia konta w aplikacji Instagram 

Hashtag - jest pojedynczym słowem lub wyrażeniem bez spacji poprzedzonym symbolem #

Typ widgetu:

• Slideshow - pokaz slajdów, czyli zdjęcia, które kolejno po sobie występują
• Glid - kilka wyświetlających się obrazków

Thumbnail Size - rozmiar każdego z poszczególnych zdjęć. Nie trzeba martwić się o ustawianie szerokości i długości, ponieważ obrazki są kwadratowe, toteż wymiar musi być identyczny.

Photo Border - granica między obrazkami, zaznaczając "yes" zgadzamy się na występowanie ramki między obrazkami, a w przeciwnym wypadku sprzeciwiamy się, wybiejąc "no"

Background Color - kolor tła naszego gadżetu. Należy w to pole wpisać odpowiedni kod html hex, który możemy znaleźć chociażby tutaj: http://www.kurshtml.edu.pl/html/wykaz_kolorow,kolory.html

Ikony udostępniania - są to najczęściej ikony serwisu społecznościowego Twitter.com oraz Facebook.com

3. Przykład uzupełnionego formularza + dodatkowe dane, które będziemy musieli uzupełnić1. 

• Ponieważ wybrałam opcję "Glid" wyświetliła mi się również komórka "Layout". W tym polu musimy uzupełnić ile chcemy mieć obrazków w gadżecie. Tutaj możemy wpisać dwie odmienne cyfry w zależności, czy chcemy więcej obrazków na szerokość lub na długość.
• Photo Padding - jest to wielkość odstępu między poszczególnymi obrazkami

4. Teraz, kiedy mamy już wszystko uzupełnione możemy zobaczyć podgląd naszego gadżetu po na kliknięciu na przycisk "Preview" lub na wygenerowanie odpowiedniego po naciśnięciu na "Get Code".

5. Kopiujemy kod HTML (zaznaczamy kod HTML i klikamy prawy przycisk myszki).

6. Logujemy się na blogger.com i wchodzimy w układ naszego bloga, a tam wybieramy "Dodaj gadżet" w miejscu, gdzie chcemy umieścić gadżet Instagram.
7. Gadżet, który nas głównie interesuje to oczywiście: "HTML/JavaScript"

8. Wklejamy kod HTML i zapisujemy!

Podgląd gadżetu Instagram na blogu

Wizytkówki Instagrama na blogu
1. Wchodzimy na stronę Instagram.com i logujemy się na naszym koncie.
2. Następnie naciskamy nasz profil i klikamy napis "Wizytówki", bądź od razu chodzimy w niniejszy link: https://instagram.com/accounts/badges/

3. Wybieramy wygląd i rozmiar naszej wizytówki (punkt pierwszy na powyższym obrazku)
4. Kopiujemy kod html i wklejamy go również do gadżetu: "HTML/JavaScript". Zapisujemy!

Wygląd Instagram'a na komputerze

Mam nadzieję kochani, że instrukcja przydatna. Może macie ochotę na coś nowego, czego tu jeszcze nie było? Pomysły mile widziane w komentarzach.

Jak dodać gadżet ask.fm na bloga?

Hello! Ostatnio na blogu pojawia się bardzo mało poradników mojego autorstwa, więc wreszcie nadszedł czas, aby się ruszyć i coś zrobić. Niezwykłą popularnością, szczególnie wśród dzieci i młodzieży, cieszy się serwis ask.fm. Polega on głównie na zadawaniu pytań i opowiadaniu na nie. 

Zakładanie konta na ask.fm  jest proste i mało skomplikowane. Wystarczy uzupełnić jedynie krótki formularz, który wygląda następująco:

Gadżet ask.fm na blogu/stronie

1. Na samym początku musimy się zalogować. Oczywiście musimy być zarejestrowanymi użytkownikami. 

2. Wchodzimy w "Ustawienia", a następnie klikamy napis "widżet".

3. Dostosowujemy ustawienia, tj. rozmiar i kolor.

4. Kopiujemy wygenerowany kod HTML.

 5. Wchodzimy w "UKŁAD" naszego bloga i klikamy gadżet "HTML/JavaScript".

 6. Jeżeli chcemy mieć niestandardowy rozmiar gadżetu, wystarczy że:

• wpiszemy inną wartość liczbową w nawiasie po napisie wight - szerokość
• wpiszemy inną wartość liczbową w nawiasie po napisie height - wysokość

7. Zapisujemy i gotowe!

Przykład gadżetu ask.fm na blogu

Jak wstawić ankietę bloggera na bloga?

Czeeeść :) Jestem nowym redaktorem tego bloga. Postanowiłem robić ciekawe poradniki. To jest mój pierwszy. Dzis pokażę wam,w jak wstawić ankietę na bloga (blogger.com)

1. Na początek logujemy się na bloggerze i wchodzimy w swojego bloga.

2. Po prawej stronie kliknijcie Układ i Dodaj Gadżet
3. Potem klikacie Ankiety

4. Uzupełniamy odpowiednie okienka

Przykładowo po opublikowaniu będzie to wyglądało tak:

Do zobaczenia - luutek321 ;)

Jak wstawić grę na bloga? (w poście lub gadżecie)

Cześć! Gry to świetny sposób na zabawę, rozrywkę oraz naukę. Moim zdaniem ta instrukcja z pewnością nie jednemu się przyda, więc zapraszam do lektury!
Strony z darmowymi grami na bloga:

• http://dodatki.net/
• http://404bajery.pl/
• http://www.mojegry.pl/

1. Jak wstawić grę na bloga w poście?

(Post wykonałam na przykładzie strony http://dodatki.net/)
1. Najpierw musimy wejść na stronę http://dodatki.net/gry.php

2. Pod każdą grą znajduje się napis "Kod HTML" - naciskamy na niego, a potem kopiujemy zawartość okna, które nam się pojawi.

3. Kiedy jesteśmy już zalogowani na blogger.com, tworzymy "Nowy post". Jednak na pasku ponad postem zaznaczamy "HTML" i wklejamy wcześniej skopiowany kod. Na koniec publikujemy!

Końcowy efekt:

2. Jak wstawić grę jako gadżet?

1. Podobnie jak wcześniej wchodzimy na stronę dodatki.net, wyszukujemy kod odpowiedniej gry i kopiujemy.
2. Następnie otwieramy "Układ" naszego bloga na blogger.com oraz dodajemy gadżet "HTML/JavaScript". Wklejamy kod i zapisujemy.

Końcowy efekt:

Aby uruchomić grę, klikamy przycisk "Zagraj". Nowa karta, która nam się wyświetli będzie wyglądać następująco:

Uwagi:

• wstawianie gier na bloga opiera się najczęściej na kopiowaniu kodu HTML, dlatego też ta instrukcja jest uniwersalna
• polecamy również notkę: Jak zrobić i wstawić puzzle na bloga?

Pomysłodawczyni niniejszej notki -

Jak wstawić baner na bloga?

Dziś chciałabym wam pokazać jak upiększyć blog, wstawiając na niego wyjątkowy gadżet - baner. Myślę, że sposoby, które wam zaprezentuje, przypadną wam do gustu!

Baner - w Internecie banner to graficzna forma przekazania treści informacyjnych bądź reklamowych, często będąca odnośnikiem do strony promowanego produktu. Najczęściej jest wykonany w technologii Adobe Flash, wcześniej były to głównie animowane pliki graficzne w formacie GIF, czasami stosowane są pliki JPEG.

Baner ze strony http://404bajery.pl/
1. Na początku wchodzimy na http://404bajery.pl/. Na pasku bocznym naciskamy "Baner LED" lub "Baner LED 2" (Ja będę się opierać na mniejszym - Baner LED 2)
2. Wpisujemy tekst, który ma nam się wyświetlić, np. Każdy kocha MovieStarPlanet.pl i wszyscy to wiedzą!. W zależności od tematyki bloga napisy mogą być naprawdę różnorodne: One Direction - najlepszy zespół, Violetta jest najlepsza, itd.

3. Teraz generujemy kod. 

4. Kopiujemy go i wstawiamy w układzie do gadżetu "HTML/JavaScript"

5. Wklejamy kod i zapisujemy. Gotowe!

Przykład:

Baner z obrazka
1. Wybieramy w układzie gadżet "Obraz".

2. Następnie dostosowujemy ustawienia, czyli podajemy tytuł, podpis, obraz oraz koniecznie LINK, dzięki któremu, gdy naciśniemy obrazek zostaniemy przeniesieni do innej karty.

 3. Zapisujemy. Przykład:

Baner z kodu html
Kopiujemy poniższy kod html, wklejamy do gadżetu "HTML/JavaScript", uzupełniamy wg własnych potrzeb i zapisujemy.

<a href="Link do strony, która ma być otwarta w nowej karcie" rel="nofollow"><img alt="Komunikat, np. Odwiedź" height="wysokość, np. 250" id="Image3_img" src="Link do banera" width="szerokość, np.240" /></a>

Przykład:

Nowa redaktorka bloga - Niallerkowa

Ikony społecznościowe

Ikony społecznościowe - ikony, służące głównie jako odsyłacze do portali społecznościowych (stąd ich nazwa), stron internetowych, komunikatorów, itp. Przeważnie mają podobne wymiary jak favicony, czyli 16x16 lub 32x32, jednak usytuowane są w gadżetach na blogach.

Skąd wziąć ikony społecznościowe?

• http://www.iconfinder.com/
• http://icondock.com/free
• http://webhelp.pl/blog/darmowe-ikony-spolecznosciowe-30-oryginalnych-zestawow/
• http://www.iconsdb.com/
• http://iconarchive.com
• grafika google

Jak wstawić ikony społecznościowe na bloga? (blogger.com)

1. Wybieramy jeden z poniższych kodów html:

• Ikona + odsyłacz

<a href="Link do strony, np. http://facebook.com/, http://ask.fm/" target="_blank"><img src="Link do ikony społecznościowej"border="0" alt="Nazwa" /></a>

Przykład zastosowania i użycia:

• Ikona + odsyłacz + wyświetlona nazwa po najechaniu na ikonę

<a href="Link do strony, np. http://facebook.com/, http://ask.fm/
" target="_blank"><img alt="Nazwa" src="Link do ikony społecznościowej" title="Nazwa" />  

Przykład zastosowania u użycia: 

2. Kopiujemy wybrany kod html i wklejamy go do gadżetu HTML/JavaScript tyle razy ile chcemy mieć ikon.

3. Dostosowujemy dowolny kod wg własnych potrzeb. (Ja osobiście częściej wybieram ten, gdzie po najechaniu wyświetla się nazwa) 

4. Aby wyśrodkować ikony używamy znacznika <center>. Przed kodem wpisujemy <center> , a z kolei za </center>. Zapisujemy i gotowe!

Własny pokaz slajdów na blogu

Hej :) Dzisiejsza instrukcja będzie na pewno bardzo przydatna, a w szczególności dla osób, które nie za bardzo potrafią edytować kod HTML pobranych z Internetu szablonów. Na początek chciałabym jednak dodać, że niektóre treści, tj. moje dane google czy moje albumy zostały zamazane.

Co jest potrzebne, by utworzyć własny pokaz slajdów?

• obrazki - najlepiej dowolnych, ale tych samych wymiarów
• konto google

Gotowy pokaz slajdów:

Jak stworzyć własny pokaz slajdów i wstawić go na bloga?

1. Logujemy się na stronie: Picasa Web Albums. Jeżeli wcześniej mieliśmy już stworzone konto na blogger.com to wystarczy jedynie, że zalogujemy się tym samym loginem i podamy to samo hasło 

2. Kiedy zostaniemy już zalogowani, zobaczymy z pewnością wszystkie albumy z przesłanymi przez nas obrazami. Teraz naciskamy: "Prześlij" (na pasku tuż obok: Strona główna, Moje zdjęcia, Eksportuj)

3. Wybieramy pliki z komputera, które mają tworzyć nasz pokaz slajdów. Odczekujemy do momentu, kiedy zostaną załadowane u zapisujemy przyciskiem "OK"

4. Podgląd zapisanego albumu:

Na szarym pasku, koło okładki albumu (w tym przypadku niebieski obrazek), klikamy "edytuj". Ustawiamy informacje o albumie tak, aby był on publiczny w Internecie, po czym zapisujemy.

5. W zaktualizowanym albumie wybieramy dowolne zdjęcie. Pod nim widnieje napis "Dodaj podpis" - naciskamy go i wpisujemy opis obrazka, i ponownie zapisujemy

Tę samą czynność powtarzamy z również innymi obrazkami, przesuwając strzałkami.

6. Kiedy podpisy będą już gotowe, wracamy do podglądu całego albumu, naciskając na nazwę albumu, umieszczoną koło napisu "Moje zdjęcia"

7. Rozwijamy "Link do tego albumu" i wchodzimy w "Umieść pokaz slajdów"

8. Dostosowujemy ustawienia i kopiujemy wygenerowany kod HTML

9. Wchodzimy na blogger.com, potem w układ szablonu, na którym ma być umieszczony nasz pokaz slajdów i dodajemy gadżet HTML/JAVASCRIPT i wklejamy do niego kod HTML pokazu slajdów, po czym zapisujemy. Gadżet ustawiamy (najlepiej, ale nie koniecznie) nad postami.

10. Zapisujemy i gotowe! Jednakże, jeżeli wymiary naszego pokazu slajdów, nie będą pokrywać się z szerokością postów na blogu lub wielkością poszczególnych obrazów, edytujemy gadżet zmieniając wymiary szerokości - width i wysokości - height, podając inne wartości liczbowe.

11. Natomiast, jeśli chcemy pozbyć się dwóch zbędnych napisów pod pokazem slajdów (Wyświetl wszystkie i Uzyskaj własny) ponownie wchodzimy w gadżet z pokazem slajdów i usuwamy z niego ten fragment kodu:

12. Tym wszystkim, którym udało się zrobić pokaz slajdów, serdecznie gratuluję! Jednak w razie wszelkich nie dociągnięć proszę pytać w komentarzach do tego postu - postaram się pomóc.