Ostatnio umieściłem poradnik w jaki sposób umieścić statusy z Twittera we własnym szablonie. Dzisiaj przedstawię jak to zrobić w przypadku blipa. W sumie jest to prawie to samo, a różni się jedynie kodem odpowiedzialnym za pobieranie statusów. Przygotowałem też na tą okazję drugi szablon z logiem blipa.

1. Projekt szablonu

Pierwszą rzeczą jaką musicie zrobić jest zaprojektowanie szablonu dla statusów Blpa. Ja do tego celu użyłem programu Adobe Photoshop CS4. Mój szablon wygląda tak:

Na końcu poradnika zamieszczam paczkę, w której jest plik PSD. Pozwoli on wam na własną edycję tego szablonu. Pozwoli to dostosować go do kolorystyki własnej strony.

2. HTML + CSS

Skoro mamy już zaprojektowany szablon teraz musimy go pociąć i zakodować. Pomińmy same czynności związane ze strukturą szablonu, a przenieśmy się do momentu, w którym musimy wpisać odpowiedni kod, który odpowiedzialny będzie za pobieranie statusów z Blipa.

Po kod, który będzie pobierał nasze statusy musimy udać się na stronę www.blip.pl. Po zalogowaniu z menu wybieramy “Wklejki”.  I kopiujemy kod (ostatni na stronie) odpowiedzialny za pobieranie ostatniego statusu. Mój wygląda tak:

<script type=”text/javascript”>

var blip_widget = {

username: ‘dzg’

}

</script>

<script type=”text/javascript” src=”http://blip.pl/javascripts/widget.js” charset=”utf-8″></script>

W moim szablonie znajduje się on w divie:

<div class=”content”>

(tutaj powinien znaleźć się kod z blipa)

</div>

Jeśli prawidłowo zakodowaliśmy szablon i dobrze użyliśmy kodu odpowiedzialnego za wyświetlanie statusów z naszego Blipa to wszystko powinno już dobrze działać.  Poniżej zamieszczam wszystkie pliki (html, css, psd, obrazki). W paczce znajduje się już gotowy szablon, który możecie użyć na swojej stronie.

3. Instalacja szablonu na własnej stronie

Jeśli nie chce się wam robić tego wszystkiego samemu to możecie skorzystać z paczki, która przygotowałem dla was. Wystarczy skopiować odpowiednie pliki do szablonu własnego bloga bądź strony. Znajdują się one w folderze “box na stronę” w paczce, która znajduje się niżej do pobrania.

Instalacja szablonu:

1. Kopiujemy zawartość pliku index.hmtl do skórki własnego bloga w miejsce, w którym chcemy by wyświetlił się box ze statusami z Blipa.

2. Kopiujemy zawartość pliku style.css do pliku style.css własnej skórki.

3. Kopiujemy grafiki z folderu images do folderu images własnej skórki.

4. Materiały do pobrania