Jak zrobić paseczki z postępem prac?

Aby zrobić w bocznym panelu swojego bloga paseczki z procentowym postępem Waszych prac musicie zacząć od utworzenia nowego gadżetu typu HTL/JavaScript. Wystarczy wejść w ustawienia swojego bloga, w menu po lewej kliknąć Układ i gdy pojawi się schematuczny szkic układu bloga, dodać gadżet w odpowiednim miejscu. Wyświetli się wtedy osobne okienko z pustą ramką. W górną rubrykę wpisujemy tytuł, na przykład Dziergotki, Praca w toku czy cokolwiek chcecie, a w dolnej najpierw wklejamy pierwszą część kodu - tak jak jest, bez żadnych zmian. Uwaga, ponieważ początkowa część kodu skopała się przez wstawienie do ramki, usunęłam ją i musicie kopiować z treści bloga:

<style type="text/css">
      div.smallish-progress-wrapper
      {
        /* Don't change the following lines. */
        position: relative;
        border: 1px solid black;
      }

      div.smallish-progress-bar
      {
        /* Don't change the following lines. */
        position: absolute;
        top: 0; left: 0;
        height: 100%;
      }

      div.smallish-progress-text
      {
        /* Don't change the following lines. */
        text-align: center;
        position: relative;
        /* Add your customizations after this line. */
      }
    </style> 
<script type="text/javascript"> 
      function drawProgressBar(color, width, percent) 
      { 
        var pixels = width * (percent / 100); 
     
        document.write('<div style="width: ' + width + 'px" class="smallish-progress-wrapper">'); 
        document.write('<div style="width: ' + pixels + 'px; background-color: ' + color + ';" class="smallish-progress-bar"></div>'); 
        document.write('<div style="width: ' + width + 'px" class="smallish-progress-text">' + percent + '%</div>'); 
        document.write('</div>'); 
      } 
    </script>

Nie zamykajcie jeszcze ani nie zapisujcie gadżetu. Teraz pora na część, którą można dowolnie zmieniać i dopasowywać do siebie.


Czerwoną czcionką oznaczyłam tytuł, nazwę projektu.
Oznaczony na fioletowo układ znaków to "enter" - przejście do nowej linijki.
Granatowe literki to kod koloru paseczka. Jeśli chcecie go zmienić, znajdźcie w google "kolory HTML" i wybierzcie, co Wam pasuje. Ważne, żeby numer koloru miał na poczatku krzyżyk - kopiujcie kod dokładnie.
Turkus oznacza szerokość paseczka. Jeśli ten z podanego kodu wam pasuje, nie zmieniajcie - jeśli jednak się nie mieści, można go dowolnie zmieniać.
Pomarańczowa liczba to procenty - czyli postęp danej robótki.
Tak wygląda podstawowy kod paseczka. Ale...



Taki kod umożliwia dodawanie linka (skrótu) do danego schematu. W moim przypadku jest to adres bloga. Adres wstawiamy w miejsce niebieskiego tekstu. Czerwony - to znowu tytuł.

Tu pokazuję, jak wstawić miniaturkę zdjęcia danego projektu. W tym wypadku po tytule jest "enter" czyli BR i kod wstawiania obrazków. Wystarczy zmienić zaznaczony na niebiesko link na adres zdjęcia gdzieś w sieci (fotosik, imgshack, picasa, facebook). Pamiętajcie tylko, żeby adres obrazka kończył się na .jpg, .png, .gif czy .bmp.

Żółty tekst to kod plakietki pobrany z Ravelry. Znajdziecie go a stronie każdego projektu, w zakładce "projects", na samym dole - obok plakietki jest napis "get HTML button". Wystarczy wkleić go po enterze :)

Mam nadzieję, że kursik jest przydatny i wkrótce gdzie nie spojrzeć będą rozkwitać wasze suwaczki :)
Dziękuję za pochwały torby, muszę powiedzieć, że nieźle się sprawuje :)
Cieszę się też, że kolejne osoby dołączają do akcji walentynkowej! Przypominam, że na publikację został jeszcze tydzień. Potem do 20 lutego potrwa głosowanie  i 21 lutego postaram się powysyłać maile z kodami rabatowymi - ale musicie do mnie napisać wiadomość, dając adres mailowy, nr gg albo jakąkolwiek inną drogę prywatnej komunikacji. Przypominam, że kod dostaje każdy, kto bierze udział w zabawie, a zwyciężczyni - rabat podwójny :)