How to hack dynamic template

Jak w tytule - niemożliwe a jednak --> http://www.mihdesign.com.pl/ więcej jutro bo męczące to iście zajęcie :)
Wstrzelenie bannera nie jest niemożliwe. dodanie własnych styli CSS - czemu nie... 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Własne strony błędów - nie tylko 404

Dawno nie widziano tu wpisu... cóż ostatnio zajęty jestem... nawet bardzo... ale wygospodarowałem troszku czasu by coś z moich wypocin wystawić na światło dzienne :)

Ostatni projekt serwisu www zmusił mnie do niecodziennego podejścia do stron błędów w bloggerze.
To iż można zmienić 404 na własną już chyba kogoś nie dziwi :) ale dla mnie jak wiecie to za mało.

Tak więc pokopałem w API i powstał taki bobol z indywidualnymi kodami do wszystkich możliwych do pokazania w blogu errorami - głównie wyszukiwania. Live demo poniżej:

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Kategorie i strona startowa w Blogerze dla opornych na wiedzę

Problem przerabiany tysiące razy nadal aktualny - jeśli tego nie załapiesz po obejrzeniu tego tutorialu to zostaw to i zajmij się czymś innym... i błagam nie pytaj jak dodać posty do nowej strony - bo Ci odpowiem Q**A!!! NIE DA SIĘ

Baza wiedzy w ww. temacie poniżej filmu, dodatkowe opisy w adnotacjach.



10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Edytor szablonów - wyszukiwanie i obsługa

rys.1

Nowy interface Bloggera zmienił zupełnie sposób edycji szablonów.
W stosunku do poprzedniego jest skierowany bardziej w stronę mniej zaawansowanych użytkowników.
Wbudowane algorytmy sprawdzające wręcz uniemożliwiają uszkodzenie kodu.

Doszło sporo nowych rozwiązań jak miedzy innymi kolorowanie i zwijanie kodu, nawigacja po dodanych widgetach oraz automatyczny podgląd niezapisanych jeszcze zmian.
Zupełnie odmienny sposób wyszukiwania w kodzie.
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Intro xHTML5 przed załadowaniem strony głównej

witam ponownie ;)
Loadery stron nadal maja wzięcie. Jak osadzić animacje widoczną tylko przed załadowaniem strony [intro] do bloggera. Można to uczynić na dwa sposoby.
Zagnieździć kod flash w odpowiednio spreparowanym szablonie lub lepiej zamiast animacji Flash kod xHtlm. Pisanie animacji pod HTML5 jest dość skomplikowane jednak większość programów ma już odpowiednie eksportery do tego języka. Jeśli nie masz lub nie znasz się zupełnie na kodowaniu, a posiadasz gotowego flasha to możesz konwertować jego kod przy pomocy narzędzia swiffy

Na prośbę jednej z moich koleżanek napisałem taki oto dość śmieszny kodzik intra którego efekt można podziwiać tutaj.

Jeśli jesteście zainteresowani jak przerobić szablon by tak zagnieździć intro piszcie w komentarzach.

Pozdrawiam.
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Przenosimy formularz kontaktowy na dowolną stronę

rys.1

Piszę tego posta bo nie chcecie się odczepić tego tematu :) zalewając moją skrzynkę nieustannymi prośbami...

Do rzeczy...
Na początek przenosimy nasz formularz najniżej na stronie jak się da. Czyli pędzimy do układu strony i przeciągamy go gdzieś w wolne miejsce np. do stopki strony. pozycja zupełnie nieważna i tak go nie będzie widać więc nie stresujcie się, wolność i liberalizm po całej linii...
Chodzi tylko o to by był załadowany po wczytaniu zawartości posta asynchronicznie przez Api naszego bloga, i nie powodował "kolizji".

Umieszczanie w lewym sidebarze też działa - pod pewnymi warunkami.
Nie będę się tu o nich rozpisywał, bo nie o tym mowa, zatem jeśli masz formularzyk w sidebarze i coś ci nie działa, to nie lamentuj tylko spróbuj go przenieść poniżej postów. [rys.1]
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Dziwne kolory grafik na blogu

W dniu dzisiejszym blogger ma problem techniczny objawiający się zmianą kolorystyki grafik zamieszczanych na blogu.
Przyczyną tego zjawiska jest problem techniczny w systemach Picassy - czyli tam gdzie zamieszczamy nasze grafiki.
Zalecam przeczekanie wysyłania jakichkolwiek grafik szablonu nawet tych z transparentnym tłem - Picassa zmienia je dodając filtr przez co stają się nieco ciemniejsze, lub odmiennego kolory niż przygotowane wcześniej tło, powodując tym samym iż nasze szablony wyglądają dość dziwnie.

Dla niecierpliwych polecam hostowanie tymczasowe na innym serwerze.

pozdr... 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Własny gadzet Candy

Candy na bloga - co to jest i jak to zrobić...
Candy to nic innego jak kod odsyłacza który umieszcza na własnym blogu osoba promująca nasz blog. /i wyszło masło maślane masłem smarowane/ Jednym słowem jeśli chcecie by ktoś dodał waszą reklamę u siebie to albo musi on wkleić kod HTML tej reklamy do gadżetu Html/JavaScript lub przygotować odpowiednio guzik dodaj do bloga jako widget.


Typowym Candy jest grafika z odsyłaczem /obrazek/ czyli:

<a href="http://adres.naszego.bloga.blogspot.com">
<img src="http://adres.do.grafiki.jpg" /></a>

rys.1

Zacznijmy od wysłania grafiki do internetu. Polecam Imgur.com na darmowy hosting bannerów. Jest lepszy od Picassy bo wszelkie animowane grafiki z niego będą działać. Pomimo iż tego typu u pstrokaceń nie popieram, ale niech wam będzie kochane blogowiczki... W końcu Dzień Kobiet... 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Warunki w szablonie

Tagi warunkowe pozwalają na modyfikowanie składni szablonu Bloggera tak by jej zawartość pojawiała się tylko pod pewnymi warunkami. Tagi możemy podzielić na lokalne oraz globalne.
Pierwsze działają w obrębie TYLKO szablonu posta/strony, globalne można w zasadzie używać w dowolnym miejscu w kodzie szablonu.
Składnia warunkowa może mieć następującą postać:

<b:if cond= 'NASZ WARUNEK'>
   zawartość która ma być wykonana np kod HTML
</b:if>

lub postać bardziej złożoną

<b:if cond= 'NASZ WARUNEK'>
   zawartość która ma być wykonana TYLKO jeśli spełnia warunek
<b:else/>
   zawartość która ma być wykonana w pozostałych przypadkach
</b:if>

Jak zauważyliście tag warunkowy ma zasadniczą postać <b:if cond=... </b:if>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Plakietka Google plus

Wszystkim którym nie działają Gadżety Plakietka Google+ oraz Przycisk +1 proszę o dodanie do sekcji <HEAD> szablonu poniższego kodu

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>

Gadżety te korzystają z meta-tagów - możemy je jednak spersonalizować nie zmieniając istniejących tagów przeznaczonych dla wyszukiwarki. 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Prosty szablon na ramkowanie skasowanego bloga

Usuwamy bloga lub zmieniamy jego adres, a wyszukiwarki nie zaskakują momentalnie na efekty trzeba czekać. pojawiają się błędy, brak usuniętych blogów, niewłaściwy adres, oraz komunikaty odbiegające zasadniczo od stylu naszego bloga.
Jak temu zaradzić - wystarczy przekierowanie lub ramkowanie.

Przywracamy usunięty blog i usuwamy z niego wszystkie wpisy lub tworzymy ponownie pusty blog pod takim samym adresem. Jako szablon użyjemy poniższego: (kompatybilny z szablonami projektanta)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:skin><![CDATA[]]></b:skin>
<link href='http://adres.do.naszej.faviconki.gif' rel='shortcut icon' type='image/x-icon'/>
  </head>
<b:if cond='data:blog.pageType == "error_page"'>
<frameset>
  <frame frameborder='0' name='strona' src='http://www.adres.do.nowego.bloga/404.html'/>
  <noframes>
  <body>
    <div>
    Twoja przeglądarka nie obsługuje ramek.<br/>
        Przejdź na adres: <a href='http://www.adres.do.nowego.bloga/404.html'> http://www.adres.do.nowego.bloga</a>
    </div>
  </body>
  </noframes>
</frameset>
    <b:else/>
<frameset>
  <frame frameborder='0' name='strona' src='http://adres.do.nowego.bloga/'/>
  <noframes>
  <body>
    <div>
    Twoja przeglądarka nie obsługuje ramek.<br/>
        Przejdź na adres: <a href='http://adres.do.nowego.bloga/'> http://www.adres.do.nowego.bloga</a>
    </div>
  </body>
  </noframes>
</frameset>
</b:if>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Wyłączamy Lightboxa w Blogerze

Nowy LightBox w Bloggerze nie pasuje do twojego bloga - pozbądź się go wyłączając jego interpretacje w Nowym Pulpicie nawigacyjnym Bloggera.

Rys.1

Po długo oczekiwanym czasie wprowadzono poprawkę umożliwiającą wyłączenie tego dodatku w blogu. [rys.1]

Przechodzimy zatem do zakładki Ustawienia - rozwijamy Posty i komentarze wybieramy stosowną opcje przy funkcji Lightboxa i zapisujemy ustawienia

By przywrócić interpretowanie grafiki w widoku Lightbox zmieniamy ustawienia na TAK



10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Usuwamy ramki obrazów w szablonach projektanta

Nowe szablony projektanta mają nieco inaczej ustawione obramowanie aniżeli opisywane wcześniej szablony podstawowe. Aby zmienić lub usunąć całkowicie obramowanie grafik zamieszczonych w poście w kodzie szablonu wyszukujemy .post-body img  za kolor tła (background) obramowanie (border) i cienie (shadow) odpowiada poniższy fragment kodu

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Komentarze - emoticony

Ciąg dalszy tuningu komentarzy - dziś będzie o emotkach. [rys.1]

Edytujemy szablon więc kopia zapasowa szablony powinna być wykonana, a opcja rozszerz szablony widżetów obowiązkowo zaznaczona ;)

Na początek wyszukujemy takiego ciągu w naszym szablonie: name='comment-editor' powinniśmy zobaczyć kod odpowiadający za ramkę dodawania komentarzy. W moim przypadku wygląda on tak:

<iframe allowtransparency='true' class='Blogger-iframe-colorize Blogger-comment-from-post' frameborder='0' height='400' id='comment-editor' name='comment-editor' src='' width='760'>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Komentarze - Top Komentator Script CSS

Z braku czasu ostatnio nie publikowałem nic na blogu ale dziś rekompensata Top Komentator Script CSS - czyli jak wynagrodzić naszych najlepszych komentatorów w blogu...

Niniejszy kod będzie działać tylko po wcześniejszym dodaniu kolorowania wpisów komentatorów

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Komentarze - kolorowanie wpisów komentatorów

Tuningu komentarzy ciąg dalszy - dziś kwestia widocznych już co prawda wczoraj indywidualnych teł dla komentujących.
Tak więc oprócz grzebania w kodzie samego szablonu będzie sporo o stylach CSS. Temat rzeka więc podam tylko podstawowe informacje - resztę doszukacie sami na różnorakich kursach w sieci.

Na początek edytujemy nasz szablonik rozszerzamy szablony widżetów i szukamy: <b:loop values='data:post.comments' var='comment'> ta część odpowiada za pętle komentarzy więc tuż pod nią doklejamy nasz nowy kawałek kodu:

<div expr:class='&quot;comment-div comment-&quot; + data:comment.author +  &quot; comment-&quot; + data:comment.authorClass'>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Komentarze - Licznik

Komentarze, Licznik komentarzy - wersja poprawiona. W przeciwieństwie do tej którą znajdziecie w sieci ta wersja numeratora komentarzy działa poprawnie z pagerem.
Jeśli wasza liczba komentarzy do posta przekroczy magiczne 200 to ten licznik liczy nadal poprawnie

Na początek do naszego szablonu doklejamy poniższy fragment kodu - gdzie go dokleić? W poprzednim poście opisałem jak dodać dynamiczne linki zachęty tak więc nasz pierwszy dzisiejszy kod wkleimy tuż pod tym czyli po </h4> dodajemy:

<b:if cond='data:post.commentPagingRequired'>
<script type='text/javascript'>
var ms=&#39;<data:post.commentRangeText/>&#39;;
Counter = ms.match(/[0-9]+/);
CommentsCounter = Math.round(Counter -1);
</script>
<b:else/>
<script type='text/javascript'>var CommentsCounter=0;</script>
</b:if>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Komentarze - Dynamiczne linki zachęty

Komentarze, Dynamicznie zmienne linki do formularza komentarzy...

Standardowo nasz szablon oferuje nam prosty tekst zachęty do komentowania podający ilość już napisanych komentarzy. Rozbudujmy zatem nasz fragment kodu tak aby automatycznie ze wzrostem liczby komentarzy zmieniał nam link zachęty.
Przechodzimy do edycji kodu HTML szablonu i rozszerzamy szablony widżetów. W kodzie szablonu wyszukujemy <data:commentLabelPlural/> zobaczymy taki fragment kodu:

<div class='comments' id='comments'>

<a name='comments'/>
<b:if cond="data:post.allowComments">

<h4>

<b:if cond='data:post.numComments == 1'>
   1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>

</h4>

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Lista linków - otwiernie w nowym oknie

Jak sprawić by w gadżecie lista linków odsyłacze otwierały się w nowym oknie?
Bardzo prosto - wystarczy niewielka korekta kodu ww gadżetu i po problemie.

W kodzie szablonu wyszukujemy: type='LinkList' jeśli nie możesz znaleźć ww frazy na bank zapomniałeś/aś zaznaczyć Rozszerz szablony widżetów.  Pełny kod widżetu poniżej:
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Usuwanie z indeksów google

Było już o pozycjonowaniu dodawaniu tagów meta aby pojawić się w wyszukiwarce Google, jednak czasem zachodzi potrzeba aby czynność tą odwrócić.
Większość z was blogowicze pisząc o swoich dzieciakach nie zdaje sobie sprawy że ich pociechy są publikowane na forach pedofili i podobnych zboczóchów. Dlaczego? Ot dlatego że zdjęcia jakie zamieszczacie na blogach są ogólnodostępne, jak zresztą cała reszta bloga. Przykładów bezliku nawet nie będę się na ten temat rozwodził.
Najprostszym i najbezpieczniejszym rozwiązaniem jest ustawienie bloga jako prywatny. Mamy pewność że do fotek kąpanych dzieciaków nikt się nam nie dobierze. Swoją drogą jeśli już publikujesz takie zdjęcia publicznie, to zastanów się troszkę i pomyśl do czego mogą zostać wykorzystane. Wszak blogger to domena publiczna i obowiązują ją zasady licencji CC.

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110