czwartek, 7 lutego 2013

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.

Color affection <br/> <script type="text/javascript">drawProgressBar('#EB9F9F', 130, 20);</script> 

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...


<a href="http://milczenie-nitek.blogspot.com/2012/02/tutorial-jak-zrobic-serwete-na-drutach.html">Serwetka na drutach od Patrycji</a>
<script type="text/javascript">drawProgressBar('#993434', 130, 0);</script><br/>

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ł.

Pokrowce na taborety<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWzMRKGX3O3-ZbeACY_m3lDzUwJP7aBi5CDipP8Y86Wcu1vkEuH636hy2mgcqpc1rZuoH4YVz747qJK1eLiI36IBbDhSOkuIV2XrXHOu3wVn-F29Yyow9ecTMljTwHNO1RXrooXOqzU0/s1600/pokrowiec.png" width="130px" />
<script type="text/javascript">drawProgressBar('#B08686', 130, 60);</script>

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.

Haruni<br/><a href="http://www.ravelry.com/badges/redirect?p=haruni"><img src="http://api.ravelry.com/badges/projects?p=haruni&t=.gif" style="border: none;" /></a>
<script type="text/javascript">drawProgressBar('#f5c9c9', 130, 100);</script>

Żół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 :)

20 komentarzy :

Gabriela Gorgoń pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję raz jeszcze!!!! Może w końcu uda mi się to zrobić u siebie.

minimysz pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Ja poszłam kiedyś na łatwiznę i ravelrowy skrypcik do progress barsów umieściłam, ale zastanawiam się czy tego nie zmienić.

woalka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Kiedyś już prosiłam Cię o pomoc i przysłałaś mi info mailem.
Jednak nie skumałam i nie chciało mi się z tym walczyć.
Ale i tak jestem Ci wdzięczna za pomoc, czas i życzliwość! :*
Teraz zmieniłam układ na dynamiczny, więc umieszczanie pasków postępu ma mały sens.
Ale może podejmę próbę choćby dla siebie, żeby się czegoś nauczyć...?
Uczyć się zawsze warto.
A uczyć kogoś, to naprawdę wielka rzecz, dlatego raz jeszcze bardzo serdeczne dzięki!

Patrycja pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dzięki Ci dobra kobieto za ten instruktaż !!! Kiedyś próbowałam sobie dodać paski postępu, ale poległam niestety :) Z przyjemnością skorzystam ze wskazówek :)

krzycha pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Chyba zrobiłam coś nie tak. Przekopiowałam cały tekst z ramki, dopisałam linijkę z konkretnym wzorem, zmieniłam wartości na takie, które chcę i ... nic. Wyskakuje mi tylko nazwa projektu, który robię i żadnej ramki z postępem. co spaprałam?

krzycha pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Jeeeeessssst!!! :D Udało się!
Dziękuję Ci bardzo za pomoc! Jesteś nieoceniona :D

ana pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Jesteś WIELKA!...ja zawsze chciałam te paski mieć ale cierpliwości mi nie starczało by się w to zgłębiać, dzięki Tobie mam i ja! Wielkie, w i e l k i e dzięki! Pozdrawiam;)

drutosfera pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

HA! A myślałam dziś o tym! nawet jutro z rana miałam zamiar Cie o to molestować :P

dorkamikrus pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Ja niestety też nie mam w całości tylko nazwa mi sie pojawiła

dorkamikrus pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Już jest ok,dziękuję bardzo!!!

Iwona pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Jesteś wielka, długo zastanawiałam sie jak to zrobić.

Anonimowy pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

To jest to, czego szukałam! dzięki wielkie!!
A może będziesz wiedziała, czemu pod obrazkami LinkWithin umieszczonymi pod postem nie pojawiają mi się podpisy?
Pozdrawiam cieplutko!

MaAd pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję bardzo bardzo ... za instrukcję

dom za końcem świata pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo, bardzo, bardzo dziękuję :) Marzyły mi się takie paski postępu już od jakiegoś czasu, ale nigdzie nie mogłam znaleźć, jak to zrobić. Za jakiś czas na pewno wrzucę do siebie. Poza tym dodałam Twój blog do ulubionych, bardzo mi się tu u Ciebie podoba!

jolaWu pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

A ja tak czytam i czytam i czytam .... i nic nie kumam :(((. Mimo wszystko fajnie,że zamieściłaś ten kursik. Bardziej inteligentne technicznie na pewno skorzystają :)))

dom za końcem świata pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Baaardzo Ci dziękuję. Nie do wiary, że to było takie proste (oczywiście z gotowym kodem od Ciebie)!!

Sznurki Ani pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

ja nic nie rozumiem z tego opisu mogła bym prosic o bardziej łopatologoczny?

urbasia pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo dziękuję za kurs - właśnie sobie wstawiłam paski postepu robótek na bloga.

april79 pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

właśnie skorzystałam, bardzo, bardzo dziękuję:)

Chichi Sama pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Nie za dużo zrozumiałam z tego kodu, ale działa :) dziękuję. A jakbym chciała wstawić takie dwa czy trzy paseczki w jednym gadżecie to pozostaje mi znów kopiować cały długi kod czy tylko jego ostatnią część? prosiłabym o odpowiedz na bulinska@wp.pl lub na moim blogu. Pozdrawiam

Step 7: Then click on the save template.