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 :)