czwartek, 26 maja 2011

Jak ustawić przezroczystość elementów w css


Przezroczystość elementów na stronie w css najlepiej pokazać na przykładzie.
Oczywiście jest to zależne od przeglądarki.

Test bez użycia przezroczystość

Test z użyciem przezroczystość


<style type="text/css">
  .test1 { opacity: .5; }  //firefox, mozilla,etc.
  .test2 { filter: alpha(opacity=50); } //IE 6-7
  .test3 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } //IE8-9
</style>


Do ustawienie działania w różnych wersjach IE zachowujemy kolejność

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

piątek, 20 maja 2011

Dynamiczna, alfabetyczna lista postów blogu jako oddzielna strona

Aby utworzyć dynamiczną, alfabetyczną listę postów na blogu należy (krok po kroku):
  1. dodać widget stron do bloggera
  2. utworzyć na blogerze oddzielną stronę np: Spis alfabetyczny
  3. wprowadzić odpowiedni kod funkcji javascript, korzystający z formatu JSON
  4. wstawić skrypt pobierający posty z bloga.
  5. wykonać skrypt wyświetlający listę
A więc do dzieła. Krok 1,2 pominę gdyż chyba zrozumiałe i pokaże krok 3 i 4

Krok 3
Tworzymy skrypt js jako treść postu, w tym wypadku strony

<script style="text/javascript"> 


Definiujemy tablicę, do której będziemy dodawać posty
 var tabentry = new Array();

Teraz funkcję zwrotną odczytującą posty w formacie JSON i zapisującą posty do tablicy
   function ListaPostow(json) {     
     i=0;
     while (entry = json.feed.entry[i++])
     {
        tabentry.length++;
        tabentry[tabentry.length-1] = entry;
     }    
   }  


Dodajemy funkcję sortującą tablicę postów po tytułach postów
function SortByTitle(a,b)
   {
     if (b.title.$t==a.title.$t) return 0;
     if (a.title.$t>b.title.$t) { return 1; }
     else return -1;
   }


Na koniec funkcję, która wyświetli nam posortowaną listę postów na stronie.
   function ShowListEntry() {
     tabentry.sort(SortByTitle); //sortuj tablicę
     document.write('<table>');
     document.write('<tr><td colspan="2"><ul><h1>Lista alfabetyczna</h1></td></tr>');
    
     for (var i = 0 ; i<tabentry.length ; i++)
     {
       document.write('<tr><td style="padding-right:10px;"><li>');
       var posturl;   
       for (var k = 0; k < tabentry[i].link.length; k++) {
          if (tabentry[i].link[k].rel == 'alternate') {
            posturl = tabentry[i].link[k].href;
             break;
         }
       }
       document.write('<a href="'+posturl+'">');
       document.write(tabentry[i].title.$t);
       document.write('</a></li></td>');
       document.write('<td>(<i>'+ tabentry[i].category[0].term+')</i></td></tr>');
     }
     document.write('</ul></table>');


W tej funkcji wyświetlam listę w postaci tabeli wraz z nazwami przypisanych etykiet do postów.

Zamykamy znacznik skryptu
</script>

Krok 4
Wykonujemy skrypt pobierający listę postów oraz wyświetlamy ją na stronie:

<script src="http://progbis.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=500&callback=ListaPostow"></script>

Pamiętając o podmianie adresu swojego bloga.

Skrypt ten działa do 500 postów, gdyż tyle jednorazowo można pobrać. Jeśli macie więcej to należy odpowiednio dopisać.

<script src="http://progbis.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=501&max-results=500&callback=ListaPostow"></script>


i więcej...
<script src="http://progbis.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1001&max-results=500&callback=ListaPostow"></script><script>ShowListEntry();</script>

Krok 5
Wykonujemy funkcję, która wyświetli nam posortowaną listę postów
<script>ShowListEntry();</script>

Jak to działa? Sprawdźcie listę wg kategorii na moim blogu
Więcej informacji o formacie JSON i postów bloga znajdziesz pod adresem http://beautifulbeta.wikidot.com/json-feeds

czwartek, 19 maja 2011

Jak wyświetlić ilość postów i komentarzy na blogu

Jeśli chcesz aby na twoim blogu pojawiła się informacja o tym ile zmieściłeś postów oraz ile dodano komentarzy, należy posłużyć się javascipt-em i formatem JSON.
Skrypt najlepiej umieścić w widgecie, w którym informacji o ilości postów czy komentarzy będzie wyświetlana.

<script style="text/javascript">
function numposts(json) {
document.write('Ten blog opublikował ' + json.feed.openSearch$totalResults.$t + ' postów');
}
function numcomments(json) {
document.write(' oraz ' + json.feed.openSearch$totalResults.$t + ' komentarzy');
}</script>


Po czym umieścić w miejscu w którym wyświetlić informację wywołanie skryptu

<script src="http://progbis.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numposts"></script><script src="http://progbis.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numcomments"></script>

pamiętając o podmianie adresu twojego bloga.