Gmail style hack - czyli pozbywamy się uciążliwych reklam z poczty

Polityka reklamowa Google odbiegła znacząco od moich oczekiwań wobec produktu poczty gMail. Natrętne reklamy prawie wszędzie, Nawet adblock nie radzi sobie z ich ukrywaniem grrr...

Miarka się przebrała !!! - Nie nie oznacza to iż zaprzestaje używać tej skrzynki - ba nic mylnego wypowiadam reklamom wojnę i pousuwam je wszystkie przy pomocy prostej sztuczki z stylami css.
Przeglądarka Mozilla Firefox obsługuje od dawien dawna plik personalizacji interfejsu userContent.css Na jego bazie przebudujemy nieco nasza skrzynkę pocztową dodając jej zupełnie odmiennego wyglądu i pozbędziemy się reklam, a co...
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

Strony - gadzet w googlowskim stylu

Ostatnio moda na chwytanie obiektów podczas przewijania strony.
Prawie każda www dziwnym trafem przytrzymuje na górze pasek nawigacji. Trend zapoczątkowany w Google+ przyjął się na dobre nawet Allegro.pl podchwyciło ten pomysł :)
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Witam po przerwie...

Ponownie on-line... Dość długo mnie nie było ale już jestem i służę wsparciem technicznym ;)
wszystkich od których nie odbierałem prywatnych wiadomości z prośbami pomocy przepraszam, ale nie odbieram ww maili są one automatycznie kierowane do spamu. Gdzieś już o tym pisałem :) chyba nieco powyżej w nagłówku...
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Centrowanie gadzetu strony

Aby wycentrować gadżet strony wystarczy dodać np z projektanta kod CSS

Centrowanie zawartości widgetu do środka:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

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

Dostosowujemy szablon - Projektant szablonów

Dziś mały tutorial oraz opis możliwości projektanta szablonów. W sieci jest mnóstwo szablonów do blogera - w rzeczywistości nie różnią się one niczym poza grafiką.

Rys.1

Wszystko pozostałe jest na jedno kopyto pisane, ale projektom tym brakuje wielu funkcji i możliwości jakie daje nam projektant szablonów.  Dziś dodamy je do dowolnego szablonu z sieci, a raczej odwrotnie ;) szablon projektanta zmienimy na wzór tego z sieci...
Pisałem już o tym na forum że to nie takie trudne - szablon do dostosowania był banalnie prosty, a samo dostosowanie zajęło mi kilka minut dosłownie - wiec może coś bardziej skomplikowanego.

Zatem... Google: blogger tempalates search i pierwszy wynik z brzegu Tutaj jest DEMO niezbyt skomplikowany ale ciekawy, w sam raz na przykład :)

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Edytujemy szablon - opis dostępnych edytorów

Jak bezpiecznie edytować szablon aby w razie wynikłych problemów nie stracić całej naszej pracy z blogiem? oraz czego potrzebujemy, czyli słów kilaka o narzędziach przydatnych podczas edycji.

Wszelkie próby edycji należy przeprowadzać za pomocą projektanta szablonów, problem pojawienia się błędu prawie nie występuje, a dostępne opcje w stopniu zadowalającym pozwalają nam na zmianę prawie wszystkich ustawień wizualnych w blogu. Aby jednak z nich korzystać musimy posiadać szablon kompatybilny z projektantem szablonów, a że takowych jest mało w sieci więc wybrać dowolny z projektanta i dostosować.


1. Dodajemy własny arkusz CSS przy pomocy projektanta szablonów.

Opcji projektanta chyba nie ma sensy tutaj opisywać bo interface nie jest bardzo skomplikowany, a praca z nim odbywa się intuicyjnie. Jednak wszystkie jego opcje działają tylko z szablonami przystosowanymi do projektanta.
Opisze więc tylko sposób na dodawanie własnych arkuszy CSS za pomocą opcji Dodaj arkusz CSS

rys.1

Przechodzimy do Projektanta szablonów [rys.1] i klikamy na zakładkę zaawansowane następnie Dodaj arkusz CSS w polu z prawej wklejamy kod stylu oczywiście pomijając tagi <style></style>
w taki sposób dodany styl jest umieszczany automatycznie we właściwym miejscu i zachowuje się podobnie jak umieszczony w gadżecie HTML/JavaScript.
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Stylizowanie tytułu posta

Mały myk odnośnie zmiany koloru tytułu posta, czcionki itp... - czasami trzeba zaszaleć w jednym z postów, niekoniecznie zmieniając cały szablon. Przepis jak tego dokonać poniżej...
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Tuning komentarzy

Na prośbę znajomego mi administratora /z tego miejsca pozdro dla h00p'a/ w jednym z jego blogów przeprowadziłem kompleksowy tuning sekcji komentarzy. Tak więc zostały dodane nowe elementy oraz poprawki:

• Reklama kontekstowa pomiędzy komentarzami [rys.1]
• Wskaźnik popularności tematu oraz dodatkowe info o blokadzie komentowania w tytule posta [rys.8]
• Licznik komentarzy - działa poprawnie z comments Pagerem / stronicowanie powyżej 200 / [rys.2]
• Odrębne style dla komentujących wg uprawnień / administrator - autor - anonim / [rys.7]
• Dynamicznie zmienne linki do pola komentarzy [rys.6] oraz comments pager [rys.2]
• Informacja o zablokowanej możliwości komentowania w miejscu formularza [rys.2]
• Informacja o polityce prywatności [rys.9]
• Emotikony animowane [rys.5 - rys.2]
• Cenzor - gwiazdkowanie znaków * [rys.3]
•  Bloker wybranych komentatorów
•  Top komentator - Script automatycznie wyróżniający najlepszych komentatorów [CSS]
• Nowy styl usuniętych komentarzy [rys.4]
• Kilkanaście drobnych poprawek i ujednoliceń w stylu CSS komentarzy

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Interaktywne ramki obrazów w CSS

Dzisiaj przepis na interaktywne rameczki do zdjęć w blogerze
Takie ot cuda przygotowałem dla jednej z blogowiczek





Ładne zaokrąglone rogi w FF interaktywne tło i cienie :)
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

moj profil - sztuczki

Poniżej kilka sposobów do zabawy z wyświetlaniem informacji w profilu:

Jak ukryć profil tylko na wybranym blogu? - użyjmy stylu CSS w szablonie.
Przechodzimy do edycji szablonu i dodajemy nasz styl np z pod projektanta szablonów

.Profile {display: none !important;}

10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

ukrywanie paska nawigacji

Aby usunąć pasek nawigacji dodawany przez blogera musimy w naszym szablonie dodać taki oto kod stylu CSS:

#navbar-iframe {display: none !important; visibility:hidden;}

Szukając w sieci sposobu ukrycia paska nawigacji w Bloggerze natrafimy na powyższy kod. Jednak po tym kodzie pojawia się nam pusta przestrzeń. Można jej się pozbyć podnosząc cały blog do góry o szerokość paska nawigacji.

W sumie, jeśli chcemy usunąć całkowicie pasek nawigacji wraz jego polem musimy użyć poniższego stylu:

body {margin-top:-30px !important;} 

Jak dodać te kody do szablonu? Klikamy Projekt - i dodajemy styl za pomocą projektanta szablonów

Przykład działania widać w tym poście :), osobiści mi nie przeszkadza ten pasek więc go nie ukrywam...
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

post bez daty? bardzo proszę...

Jak to zrobić? To proste użyć stylu CSS osadzonego.
W danym poście w którym chcesz usunąć datę wklejasz taki oto tekst na samym początku zawartości HTML posta:

<style>h2.date-header, .article-header .date {display: none;}</style>

Tak dla przykładu zwykły post z wyświetlaną datą.
Uwagi: jeżeli na stronie głównej bloga masz więcej niż jeden post a użyjesz powyższej sztuczki wszystkie wyświetlone wpisy będą na stronie głównej wyświetlane bez daty, problem niniejszy nie występuje na podstronach. /przykład/


Kod css działa również z dynamicznymi szablonami. 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Własna wiadomość wyszukiwania CSS

To jest przykład ukrywania paska wiadomości za pomocą CSS.
Post ten jest częścią artykułu: Własna wiadomość wyszukiwania szerzej opisanego tutaj.



10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110