tag:blogger.com,1999:blog-16925311373667443082024-03-19T02:10:21.085-07:00InstruktażowoWioskaSzablonówhttp://www.blogger.com/profile/01026614369613619128noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-1692531137366744308.post-79667287949520924772015-09-15T04:49:00.000-07:002015-09-15T05:03:59.829-07:00Font Awesome<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>
<a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> jest rzeczywiście niesamowity, ponieważ pozwala dodać na bloga różne ikonki-obrazki bez użycia photoshopa. Chciałabym wam teraz pokazać, jak w bardzo szybki sposób zainstalować takie ikonki u siebie na blogu.<br />
<a name='more'></a><br />
<h3>
Dołączenie Font Awesome do bloga</h3>
Jest kilka możliwości dodania paczki z ikonkami do bloga, ale najprostszy przypomina dodawanie czcionek z Google Font. Niestety tak jak w przypadku Google Font, blogger nie akceptuje podanego w instrukcji na stronie autora linku. Poprawiony link, który będzie działał w bloggerze wygląda następująco:<br />
<kodhtml><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link></kodhtml>
Wystarczy go skopiować i wkleić w kodzie <u>nad</u> znacznikiem <b></head></b>.<br />
<br />
<h3>
Najpopularniejsze ikonki</h3>
Teraz zajmijmy się ikonkami. Najczęściej będą nam potrzebne te umieszczone przeze mnie poniżej, ale Font Awesome składa się z o wiele większej ich ilości, wystarczy zajrzeć <a href="http://fortawesome.github.io/Font-Awesome/icons/">tutaj</a>.<br />
<br />
Ikonka do <b>autora</b> <i class="fa fa-user"></i> <kodhtml><i class="fa fa-user"></i></kodhtml>
Ikonka do <b>daty </b> <i class="fa fa-calendar"></i> <kodhtml><i class="fa fa-calendar"></i></kodhtml>
Ikonka do <b>godziny</b> <i class="fa fa-clock-o"></i> <kodhtml><i class="fa fa-clock-o"></i> </kodhtml>
Ikonka do <b>etykiet</b> <i class="fa fa-tags"></i> <kodhtml><b> </b><i class="fa fa-tags"></i></kodhtml>
Ikonka do <b>komentarzy</b> <i class="fa fa-comments"></i> <kodhtml><i class="fa fa-comments"></i></kodhtml>
Ikonka do <b>strona główna</b> <i class="fa fa-home"></i> <kodhtml><i class="fa fa-home"></i></kodhtml>
Ikonka do <b>starsze posty</b> <i class="fa fa-arrow-right"></i> <kodhtml><i class="fa fa-arrow-right"></i></kodhtml>
Ikonka do <b>nowsze posty</b> <i class="fa fa-arrow-left"></i> <kodhtml><i class="fa fa-arrow-left"></i></kodhtml>
<br />
<h3>
Znaczniki bloggera</h3>
Jednak najtrudniejszym elementem jest znalezienie dla ikonek odpowiedniego miejsca w kodzie. Aby wam to ułatwić wypiszę znaczniki kodu bloggera, za które lub przed którymi należy umieścić kody ikonek. Tylko od was zależy, czy chcecie ikonkę wstawić przed znacznikiem:<br />
<i class="fa fa-user"></i> Autor: Agata<br />
czy podmienić znacznik<br />
<i class="fa fa-user"></i> Agata
<br />
<br />
Znacznik <b>etykiet </b><kodhtml><data:postLabelsLabel/></kodhtml>
Znacznik <b>autora </b>(<a href="http://instruktazowo.blogspot.com/2015/08/modyfikacja-autora-pod-postem.html">więcej tutaj</a>) <kodhtml><data:top.authorLabel/></kodhtml>
Znacznik <b>godziny</b>* (<a href="https://www.blogger.com/blogger.g?blogID=1692531137366744308#dataigodzina">więcej tutaj</a>)<kodhtml><data:top.timestampLabel/></kodhtml>
Znacznik <b>daty</b>* <kodhtml><data:post.dateHeader/></kodhtml>
Znacznik <b>komentarzy</b>* (<a href="http://instruktazowo.blogspot.com/2015/08/liczba-komentarzy-zamiast-caej-etykiety.html">więcej tutaj</a>) <kodhtml><data:post.commentLabelFull/></kodhtml>
Znacznik <b>strona główna</b> <kodhtml><data:homeMsg/></kodhtml>
Znacznik <b>starsze posty</b> <kodhtml><data:olderPageTitle/></kodhtml>
Znacznik <b>nowsze posty</b> <kodhtml><data:newerPageTitle/></kodhtml>
*W przypadkach oznaczonych gwiazdką ikonki zamieszczamy przed znacznikiem, samych znaczników <b>NIE USUWAMY</b>.
<br />
<br />
<div id="dataigodzina">
<h3>
Znacznik godziny</h3>
Ten znacznik może wyświetlać zarówno godzinę jak i datę. Zależy od ustawień poczynionych w <i>Układ / Posty w blogu Edytuj</i> w trzecim wierszu. Dlatego zależnie od ustawień pasuje do niego zarówno ikonka godziny jak i daty.
</div>
<br />
<h3>
Rozmiar ikonek</h3>
Ikonki można powiększyć przez dodanie do ich kodu krótkiego fragmentu. Niestety nie możemy sobie sprecyzować dokładnie wielkości ikonki, a jedynie powiększyć jej rozmiary o krotności.
<i class="fa fa-home fa-2x"></i> Powiększenie <b>dwukrotne</b> <kodhtml><i class="fa fa-home <b>fa-2x</b>"></i></kodhtml>
<i class="fa fa-home fa-3x"></i> Powiększenie <b>trzykrotne</b> <kodhtml><i class="fa fa-home <b>fa-3x</b>"></i></kodhtml>
<i class="fa fa-home fa-4x"></i> Powiększenie <b>czterokrotne</b> <kodhtml><i class="fa fa-home <b>fa-4x</b>"></i></kodhtml>
<i class="fa fa-home fa-5x"></i> Powiększenie <b>pięciokrotne</b> <kodhtml><i class="fa fa-home <b>fa-5x</b>"></i></kodhtml>
<br />
<h3>
Łączenie ikonek w jedną - zaawansowane</h3>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-home fa-stack-1x"></i>
</span> Takiego domku w kwadraciku zestaw Fonte Awesome nie posiada, jednak można go stworzyć przy pomocy dwóch dostępnych kształtów. Wcześniej już opisywanego domku oraz obrysu kwadratu <i class="fa fa-square-o"></i> o następującym kodzie:<br />
<kodhtml><i class="fa fa-square-o"></i></kodhtml>
Aby połączyć dwie ikonki w jedną należy je zawrzeć w wspólnym spanie o klasie <b>fa-stack fa-lg</b>. Natomiast do kolejnych ikonek dodać odpowiednie oznaczenia: <b>fa-stack-1x</b> dla ikonki głównej oraz <b>fa-stack-2x</b> dla ikonki mającej służyć za tło. Kod dla pokazanego wcześniej domku w kwadracie będzie wyglądał następująco:
<kodhtml><span class="fa-stack fa-lg"><br />
<i class="fa fa-square-o <b>fa-stack-2x</b>"></i><br />
<i class="fa fa-home <b>fa-stack-1x</b>"></i><br />
</span></kodhtml>
<span class="fa-stack fa-lg">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-bug fa-stack-1x fa-inverse"></i>
</span>
W tym przypadku do ikonki głównej musiałam dopisać <b>fa-inverse</b> aby odznaczała się na ikonce tła, której kolor jest przecież taki sam.
<kodhtml>
<span class="fa-stack fa-lg"><br />
<i class="fa fa-certificate fa-stack-2x"></i><br />
<i class="fa fa-bug fa-stack-1x <b>fa-inverse</b>"></i><br />
</span></kodhtml>
<br />
<h3>
Zmiana koloru</h3>
Zmiana koloru ikonek jest bardzo prosta. Każda ikonka ma nadaną klasę <i>.fa</i> i to do niej dopisujemy kolor, na jaki chcielibyśmy, aby nasza ikonka się wyświetlała.
<kodcss>.fa {color: wartość;} </kodcss>
<h3>
Kredyt</h3>
Poprawny kredyt Fontu Awesome wygląda następująco: "Font Awesome by Dave Gandy - http://fontawesome.io"
lub: "<a href="http://fontawesome.io">Font Awesome by Dave Gandy</a>."Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com20tag:blogger.com,1999:blog-1692531137366744308.post-4168118951310952442015-08-29T10:27:00.001-07:002015-08-29T10:27:34.164-07:00Modyfikacja autora w pościeNa prośbę Anonima spod poprzedniego postu pojawia się równie krótka instrukcja na to, jak dodać coś własnego przed swoim nickiem w podpisie postu. W kodzie szablonu szukamy<br />
<kodhtml><data:top.authorLabel/></kodhtml>
Usuwamy zaznaczony fragment i w jego miejsce wstawiamy coś własnego. Może to być tekst np.<b> post napisała</b>. Należy jednak pamiętać, że nick wyświetla się w mianowniku. Zatem dodanie napisu <b>post został napisany przez </b>nie będzie wyglądało dobrze przed nieodmienionym do właściwego przypadku nickiem.<br /><br />
W tym miejscu możemy też wstawić jakąś ikonkę (obrazek):<br />
<kodhtml><img src=""/></kodhtml>
Lub też użyć jakieś ikonki z fontu Awesome. Możliwości jest wiele, tylko od was zależy jak to wykorzystacie.Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com4tag:blogger.com,1999:blog-1692531137366744308.post-76398766692850169772015-08-22T11:06:00.000-07:002015-08-22T13:06:03.581-07:00Liczba komentarzy zamiast całej etykietyCzyli jak w bardzo prosty sposób dostosować do swoich potrzeb treść linku prowadzącego do komentarzy. Na sam początek otwieramy KOD szablonu i szukamy (ctrl + f) następującego kodu:<br />
<kodhtml><data:post.commentLabelFull/>:</kodhtml>
Tam znajduje się też ten nieszczęsny dwukropek, który zawsze wyświetla się w linku prowadzącym do komentarzy. Następnie należy zamienić powyższy kod na ten:<br />
<kodhtml><data:post.numComments/></kodhtml>
On zamiast całej komendy <b>12 komentarzy:</b> wyświetli tylko liczbę <b>12</b>. Teraz możemy zostawić to tak jak jest lub też dodać swój własny tekst. Np.<br />
<kodhtml><data:post.numComments/> | add comment</kodhtml>
Wtedy link do postu będzie miał następującą treść <b>12 | add comment</b>. Należy jednak pamiętać, że dodany przez nas tekst nie będzie się odmieniać tak jak to było w przypadku słowa <b>komentarze </b>w pełnej etykiecie.<br />
<br />
Mam nadzieję, że wszystko jest jasne.Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com7tag:blogger.com,1999:blog-1692531137366744308.post-51545260304801496132015-06-09T10:28:00.001-07:002015-06-12T11:53:43.109-07:00Minimalistyczne menu 'kwadraciki'<style>
.cont, .przyklad1{font:normal normal 8px Verdana;letter-spacing:2px; text-transform:uppercase;
padding:50px 10px 10px;text-align:center;
}
.cont a {text-decoration:none;color:#000;}
.kwadracik {
text-align:left;
display:inline-block;
position:relative;
}
.kwadracik:before, .p11:before {
content:"";
width:9px;
height:9px;
display:block;
}
.p11:before {background-color:#888;}
#k1:before {background-color:greenyellow;}
#k2:before {background-color:tomato;}
#k3:before {background-color:turquoise;}
#k4:before {background-color:plum;}
.kwadracik a {
width:140px;
display:block;
position:absolute;
top:-40px;
left:0;
transition:.3s;
opacity:0;
visibility:hidden;
padding:0 0 5px 5px;
}
#k1 a{ border-left:1px solid greenyellow;}
#k2 a{ border-left:1px solid tomato;}
#k3 a{ border-left:1px solid turquoise;}
#k4 a{ border-left:1px solid plum;}
.kwadracik:hover a {
opacity:1;
visibility:visible;
top:-15px;
}
</style>
Na głównym szablonie Wioski obok jej nazwy widnieją trzy kwadraciki, po najechaniu których wysuwa się z góry krótka informacja tekstowa. Tym razem chciałabym wam pokazać jak wykonać dokładnie w takimi stylu minimalistyczne menu, o takie jak poniżej.
<br />
<div class="cont">
<div class="kwadracik" id="k1">
<a href="http://wioskaszablonow.blogspot.com/">Strona główna</a></div>
<div class="kwadracik" id="k2">
<a href="http://wioskaszablonow.blogspot.com/">Autor</a></div>
<div class="kwadracik" id="k3">
<a href="http://wioskaszablonow.blogspot.com/">Blog</a></div>
<div class="kwadracik" id="k4">
<a href="http://wioskaszablonow.blogspot.com/">Szablon</a></div>
</div>
Całe menu należy wstawić do widgetu HTML/JavaScript.<br />
<a name='more'></a>Ale zanim do tego dojdziemy, najpierw stwórzmy div, w którym będzie się mieściło nasze menu.
<kodhtml><div class="<x>pudelko</x>"><div>
</kodhtml>
I nadamy mu odpowiedni css. Nie zapomnijmy przy tym, aby zostawić wokół menu trochę miejsca na animację oraz wyśrodkować wewnętrznych elementów.
<kodcss>
<x>.pudelko</x>{
padding:<w>50px 10px 10px</w>;<br />
text-align:<w>center</w>;<br />
font:<w>normal normal 8px Verdana</w>;<br />
letter-spacing:<w>2px</w>;<br />
text-transform:<w>uppercase</w>;<br />
}
</kodcss>
Teraz możemy się już zając tym, co jest w środku. Na początek stwórzmy kolejne divy, w których umieścimy nasze linki z menu. Nadajmy divom zarówno tę samą klasę jak i indywidualne id. Nasz kod html powinien wyglądać mniej więcej tak: <kodhtml>
<div class="<x>pudelko</x>"><br />
<div class="<x>kwadracik</x>" id="<x>k1</x>"></div><br />
<div class="<x>kwadracik</x>" id="<x>k2</x>"></div><br />
<div class="<x>kwadracik</x>" id="<x>k3</x>"></div><br />
<div class="<x>kwadracik</x>" id="<x>k4</x>"></div><br />
</div>
</kodhtml>
Teraz zajmijmy się stworzeniem naszych kolorowych kwadracików przy pomocy pseudoklasy <b>:before</b>.
<kodcss>
<x>.kwadracik:before</x>{<br />
content:"";<br />
width:<w>9px</w>;<br />
height:<w>9px</w>;<br />
display:<w>block</w>;<br />
}</kodcss>
Dodajmy już od razu koloy dla poszczególnych kwadracików. W tym pomoże nam indywidualne id, które wcześniej dopisaliśmy do każdego z divów.
<kodcss>
<x>#k1:before</x> {background-color:<w>greenyellow</w>;}<br />
<x>#k2:before</x> {background-color:<w>tomato</w>;}<br />
<x>#k3:before</x> {background-color:<w>turquoise</w>;}<br />
<x>#k4:before</x> {background-color:<w>plum</w>;}<br />
</kodcss>
Powyższy kod daje nam coś takiego jak poniżej:
<br />
<div class="przyklad1">
<div class="p11" id="k1">
</div>
<div class="p11" id="k2">
</div>
<div class="p11" id="k3">
</div>
<div class="p11" id="k4">
</div>
</div>
Aby nasze kwadraciki wyświetlały się w jednej linii musimy dodać odpowiednią wartość dla właściwości <i>display</i> w selektorze <b>.kwadracik</b>.
<kodcss>
<x>.kwadracik</x>{<br />
display:<w>inline-block</w>;<br />
position:<w>relative</w>;<br />
}
</kodcss>
<br />
<div class="cont">
<div class="kwadracik" id="k1">
</div>
<div class="kwadracik" id="k2">
</div>
<div class="kwadracik" id="k3">
</div>
<div class="kwadracik" id="k4">
</div>
</div>
Teraz włóżmy do naszych divów z kolorowymi kwadracikami linki będące naszym menu i jednocześnie elementem, który będziemy animować.
<kodhtml>
<div class="pudelko"><br />
<div class="<x>kwadracik</x>" id="<x>k1</x>"><br />
<a href="http://wioskaszablonow.blogspot.com/">Strona główna</a></div><br />
<div class="<x>kwadracik</x>" id="<x>k2</x>"><br />
<a href="http://wioskaszablonow.blogspot.com/">Autor</a></div><br />
<div class="<x>kwadracik</x>" id="<x>k3</x>"><br />
<a href="http://wioskaszablonow.blogspot.com/">Blog</a></div><br />
<div class="<x>kwadracik</x>" id="<x>k4</x>"><br />
<a href="http://wioskaszablonow.blogspot.com/">Szablon</a></div><br />
</div>
</kodhtml>
Od razu też dodajmy odpowiedni css dla elemeny <b>a</b>, gdzie najważniejszą częścią jest właściwość <i>position</i>, której musimy nadać wartość <i>absolute</i>. Ważne jest także nadanie elementowi odpowiedniej szerokości, aby nasz wiersz się nie zawijał.
<kodcss>
<x>.kwadracik a</x> {<br/>
width:<w>100px</w>;<br/>
display:<w>block</w>;<br/>
position:<w>absolute</w>;<br/>
top:<w>-40px</w>;<br/>
left:<w>0</w><br/>
transition:<w>.3s</w>;<br/>
opacity:<w>0</w>;<br/>
visibility:<w>hidden</w>;<br/>
padding:<w>0 0 5px 5px</w>;<br/>
}
</kodcss>
Właściwość <i>top</i> należy dopasować indywidualnie w zależności od zastosowanego rodzaju czcionki i jej wielkości oraz ilości tekstu.<br />
<br />
Natomiast aby zapoznać się z znaczeniem właściwości <i>visibility </i>i <i>opacity </i>w tym przykładzie zapraszam do przeczytania instrukcji odnoścnie <a href="http://instruktazowo.blogspot.com/2015/04/efekt-wypywania-elementu-po-najechaniu.html">wypływania elementu</a>. Tam cały efekt został dokładnie zaanalizowany.<br />
<br />
Powróćmy teraz do naszego menu. Jedyne co nam pozostało, to dodać właściwy kod przy pseudoklasie <b>:hover</b>, dzięki czemu po najechaniu kursorem na kwadracik, pokaże nam się nasz link.
<kodcss>
<x>.kwadracik:hover a </x>{
opacity:<w>1</w>;
visibility:<w>visible</w>;
top:<w>-15px</w>;
}
</kodcss>
Prawie zapomniałabym o dodaniu po lewej stronie naszego linku obramowania w kolorze kwadracika. Robimy to w sposób analogiczny do tego, w jaki kwadraciki otrzymały swój kolor - dzięki nadanym divom indywidualnym id.
<kodcss>
<x>#k1 a</x>{ border-left:<w>1px solid greenyellow</w>;}<br />
<x>#k2 a</x>{ border-left:<w>1px solid tomato</w>;}<br />
<x>#k3 a</x>{ border-left:<w>1px solid turquoise</w>;}<br />
<x>#k4 a</x>{ border-left:<w>1px solid plum</w>;}<br />
</kodcss>
To byłoby na tyle. Mam nadzieję, że instrukcja była dla was przydatna.Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com26tag:blogger.com,1999:blog-1692531137366744308.post-85542411914653279242015-05-23T07:47:00.000-07:002015-05-24T04:34:42.188-07:00Czarno-biały efekt w css<style>
img.czarnobiale:hover {
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition:.5s;
}
img.rozmycie:hover {
-webkit-filter: blur(3px);
filter: blur(3px);
transition:.5s;
}
</style>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img class="czarnobiale" src="http://th09.deviantart.net/fs70/200H/f/2013/148/1/4/islands_by_snowskadi-d66wh5l.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
© Islands by SnowSkadi</div>
Jak widzicie, po najechaniu kursorem na obrazek, ten staje się czarno biały. Jest to możliwe dzięki właściwości <b>filter</b>, która zastępuje proste funkcje programów graficznych, między innymi sprawianie, by obrazek (a dzięki cssowi dowolny element strony) stał się czarno-biały.<br />
<a name='more'></a>
<kodcss>
-webkit-filter: <w>grayscale(1)</w>;<br />
filter: <w>grayscale(1)</w>;<br />
</kodcss>
Niestety poza Mozillą wszystkie przeglądarki potrzebują prefiksu <b>-webkit-</b>, aby zinterpretować tę właściwość, dlatego należy stosować oprócz ogólnej wersji kodu, także tę poprzedzoną prefiksem. Wartość <b>filter</b> składa się z nazwy funkcji (w tym przypadku <i>grayscale</i>) oraz liczby w zakresie od 0 do 1, która określa intensywność funkcji. Dzięki temu możliwe jest jedynie lekkie poszarzenie obrazka przy stosowaniu następującej opcji:<br />
<kodcss>
-webkit-filter: <w>grayscale(0.5)</w>;<br />
filter: <w>grayscale(0.5)</w>;<br />
</kodcss>
Właściwość <b>filter</b> ma kilka wartości - różnego rodzaju filtrów, których intensywność również można zdefiniować. Myślę, że jeszcze wartą uwagi funkcją jest <b>blur</b>, które powoduje rozmycie się danego elementu, a intensywność tego rozmycia podaje się w pikselach.<br />
<div class="separator" style="clear: both; text-align: center;">
<img class="rozmycie" src="http://th09.deviantart.net/fs70/200H/f/2013/148/1/4/islands_by_snowskadi-d66wh5l.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
© Islands by SnowSkadi</div>
<kodcss>
-webkit-filter: <w>blur(3px)</w>;<br />
filter: <w>blur(3px)</w>;<br />
</kodcss>
Pod tym linkiem znajdziecie pozostałe wartości <b>filter</b>: <a href="http://html5-demos.appspot.com/static/css/filters/index.html">klik</a>. Życzę miłego bawienia się z suwakami i tworzenia niesamowitych efektów. Nie zapomnijcie tylko zapisać kodu css zarówno z prefiksem jak i bez niego.<br />
<br />
A oto kody na efekty użyte w tym poście. Najpierw efekt czarno-białego obrazka:
<kodcss>
<x>img:hover</x>{<br />
transition:<w>0.5s</w>;<br />
-webkit-filter: <w>grayscale(1)</w>;<br />
filter: <w>grayscale(1)</w>;<br />
}<br />
</kodcss>
A teeraz efekt rozmytego obrazka:
<kodcss>
<x>img:hover</x>{<br />
transition:<w>0.5s</w>;<br />
-webkit-filter: <w>blur(3px)</w>;<br />
filter: <w>blur(3px)</w>;<br />
}<br />
</kodcss>
Mam nadzieję, że ten wpis wam się przydał!Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com5tag:blogger.com,1999:blog-1692531137366744308.post-83435201352030833212015-05-15T09:12:00.001-07:002015-06-01T23:44:26.701-07:00Wysuwane linki w menu<style>
#r01 {
display:block;
height: 70px;
}
#r01 ul{
list-style-type:none;
padding:0;
}
#r01 li {
display: inline-block;
height:70px;
overflow:hidden;
}
#r01 li a{
width:100px;
display: block;
background-color: #444;
font-size: 12px;
text-align:center;
padding: 5px;
transition:0.5s;
}
#r01 li a.ef1:hover {
padding-bottom:40px;
}
#r01 li a.ef2:hover {
padding-top:40px;
}
#r01 li a.ef3:hover {
padding-top:20px;
padding-bottom:20px;
}
</style>
Dzisiaj chciałabym wam przedstawić trzy nieco różniące się efekty na wysuwane link w menu. Przykład poniżej.
<br />
<div id="r01">
<ul>
<li><a class="ef1" href="https://www.blogger.com/blogger.g?blogID=6358751201917579562">Efekt 1</a></li>
<li style="margin-left:-4px" ><a class="ef2" href="https://www.blogger.com/blogger.g?blogID=6358751201917579562">Efekt 2</a></li>
<li style="margin-left:-5px"><a class="ef3" href="https://www.blogger.com/blogger.g?blogID=6358751201917579562">Efekt 3</a></li>
</ul></div><a name='more'></a>
Na początek przypatrzmy się dokładniej widgetowi <b>.PageList</b>, w którym będziemy chcieli zastosować nasz trik. Jak każda ramka na blogspocie, tak i ogólny zarys <b>.PageList</b> wygląda następująco:
<kodhtml>
<div class="<x>widget PageList</x>" id="<x>PageList1</x>">
<br />
<h2></h2><br />
<div class="<x>widget-content</x>"><br />
</div><br />
</div><br />
</kodhtml>
<br />
Dodatkowo w skład <b>.widget-content</b> wchodzi lista, której składania wygląda mniej więcej tak:<br />
<kodhtml>
<ul><br />
<li><a href="">Link 1</a></li><br />
<li><a href="">Link 2</a></li><br />
<li><a href="">Link 3</a></li><br />
</ul><br />
</kodhtml>
I to właśnie listą zajmiemy się do uzyskania naszego efektu. Jednak zanim zabierzemy się do dodawania kodu, upewnijmy się, że nasze menu z stronami będzie znajdowało się nad kolumnami bloga, a nie w jednej z nich. Dzięki temu linki już na samym początku będą ustawione obok siebie, a nie jeden pod drugim. <br />
<br />
Ponownie wykorzystamy fakt, że <b>a</b> jest zagnieżdżone w <b>li </b>(pudełko włożone do pudełka). Tym razem jednak zewnętrzne pudełko <b>li </b>będzie robiło za swojego rodzaju ogrodzenie, tak aby nasz efekt nie przesuwał innych elementów. Dodajmy zatem css:
<kodcss>
<x>.PageList li</x> {<br />
height:<w>70px</w>;<br />
}<br />
</kodcss>
Dokładne ustalenie <i>height</i> sprawia, że <b>li</b> staje się ograniczeniem do jakiej wysokości może nam się zmieniać <b>a</b>. Teraz możemy już wdrażać nasz ruchomy efekt. Na początek dodajmy jakiś ładny i prosty css odpowiadający za wygląd <b>a</b>.<br />
<kodcss>
<x>.PageList li a</x>{<br />
width:100px;<br />
display: <w>block</w>;<br />
background-color: <w>#444</w>;<br />
font-size: <w>12px</w>;<br />
text-align:<w>center</w>;<br />
}<br />
</kodcss>
Jak zawsze za interakcję w cssie odpowiada nam pseudo selektor <b>:hover</b>, a właściwość, którą będziemy przy jego pomocy zmieniać to <i>padding</i>. Zapiszmy zatem odpowiednie wartości dla <i>padding</i> zarówno dla wyglądu początkowego jak i tego osiągniętego przy pomocy <b>:hover</b>.
<kodcss>
<x>.PageList li a </x>{<br />
padding: <w>5px</w>;<br />
transition:<w>0.5s</w>;<br />
}<br />
</kodcss>
Oczywiście właściwość <i>transition</i> odpowiada za efekt animacji. A teraz linijki kodu css odpowiadające za kolejne efekty:<br />
<b>Efekt 1</b><br />
<kodcss><x>.PageList li a<b>:hover</b></x> {<br />
padding-bottom:<w>40px</w>;<br />
}</kodcss>
<b>Efekt 2</b><br />
<kodcss><x>.PageList li a<b>:hover</b></x> {<br />
padding-top:<w>40px</w>;<br />
}</kodcss>
<b>Efekt 3</b><br />
<kodcss><x>.PageList li a<b>:hover</b></x> {<br />
padding-top:<w>20px</w>;<br />
padding-bottom:<w>20px</w>;<br />
}</kodcss>
Mam nadzieję, że wszystko wytłumaczyłam jasno i klarownie. Wszelakie pytania zamieszczajcie w komentarzach.Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com3tag:blogger.com,1999:blog-1692531137366744308.post-27020996310985453052015-04-20T09:29:00.001-07:002015-05-24T06:30:59.058-07:00Wypływanie elementu: zastosowanie dla widgetów<style>
#PopularPosts3 {
border-bottom:0;
}
#PopularPosts3 .widget-content {
margin-top:50px;
position:absolute;
color: #556270;
background-color: #e3e3e3;
border-bottom: 20px solid #C7F464;
transition:.3s;
opacity:0;
visibility:hidden;
}
#PopularPosts3:hover .widget-content {
margin-top:0px;
visibility:visible;
opacity:1;
}
</style>
Teraz chciałabym wam przedstawić zastosowanie wcześniejszej instrukcji do dowolnego gadżetu na blogu. Nasz przykład omówię na ramce popularne posty. A teraz przejdźmy do praktyki.<br />
<a name='more'></a><br />
Każdy gadżet na blogspocie przyjmuje mniej więcej taką formę:<br />
<kodhtml>
<div class="" id=""><br />
<h2></h2><br />
<div class="widget-content">jakaś treść</div><br />
</div></kodhtml>
Jak widzicie, mamy tu dwa divy, jeden włożony w drugi (nasze kochane pudełka), dzięki czemu uzyskanie efektu z poprzedniego postu będzie banalnie proste. Zapiszmy więc uproszczony kod html do gadżetu popularne posty:<br />
<kodhtml>
<div class="PopularPosts" id="<x>PopularPosts1</x>"><br />
<h2>Popularne</h2><br />
<div class="widget-content">jakaś treść</div><br />
</div></kodhtml>
To, na co musimy zwrócić uwagę to przede wszystkim id gadżetu, w naszym przypadku jest to <b>#PopularPosts1</b>. Więcej nazw id dla poszczególnych ramek na blogu możecie przeczytać na <a href="http://tajemniczy--ogrod.blogspot.com/">Tajemniczym Ogrodzie</a> w tym poście: <a href="http://tajemniczy--ogrod.blogspot.com/2013/08/selektory.html">klik</a>. Zauważcie, że nasz wewnętrzny div nie ma id, ale za to ma nadaną klasę, którą to się posłużymy, aby wykonać nasz efekt. Trzeba tylko dać przeglądarce do zrozumienia, że ma animować nie każdy element z tą klasą (wtedy poruszały by nam się wszystkie gadżety), a jedynie ten w popularnych postach.<br />
<kodcss>
<x>#PopularPosts1 .widget-content</x> {}</kodcss>
I mamy tę sprawę załatwioną. W naszym przypadku powyższy kod jest nazwą wewnętrznego diva-pudełka, które będziemy animować. Teraz wystarczy dodać odpowiedni kod css:<br />
<kodcss>
<x>#PopularPosts1 .widget-content</x> {<br />
<u>margin-top</u>:<w>50px</w>;<br />
<u>position</u>:<w>absolute</w>;<br />
<u>transition</u>:<w>0.3s</w>;<br />
<u>opacity</u>:<w>0</w>;<br />
<u>visibility</u>:<w>hidden</w>;<br />
}</kodcss>
A teraz nasza reakcja na najechanie kursorem na div wyższy, czyli w naszym przypadku <b>#PopularPosts1</b>.
<br />
<kodcss>
<x>#PopularPosts1:<u>hover</u> .widget-content </x>{ <u>margin-top</u>:<w>0</w>;<br />
<u>opacity</u>: <w>1</w>;<br />
<u>visibility</u>: <w>visible</w>;<br />
}</kodcss>
Zauważcie, że nie musimy definiować szerokości obu divów, ponieważ tę automatycznie narzuca nam szerokość kolumn. Mam nadzieję, że z tym wytłumaczeniem będzie wam jeszcze łatwiej wdrażać ten efekt w życie.
Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com0tag:blogger.com,1999:blog-1692531137366744308.post-73632694970036741422015-04-19T08:09:00.001-07:002015-05-16T11:29:54.505-07:00Wypływanie elementu<style>
.dd {width:200px;}
#d1{
margin:0 auto;
}
#d2 {
color:#777;
background-color:#ddd;
padding:10px;
position:absolute;
margin-top:50px;
opacity:0;
visibility:hidden;
z-index:2;
transition:0.3s;
}
#d1:hover #d2 {
margin-top:0;
opacity:1;
visibility:visible;
}
.tytul {
background-color:#777;
border-bottom:#333;
padding:10px;
text-align:center;
color:#fff;
}
#d3 {margin: 0 auto; width: 200px;}
#d4 {background-color: #dddddd; color: #777777; padding: 10px; margin-top:50px;position:absolute;width:200px;transition:0.3s}
#d3:hover #d4 {margin-top:0;}
</style>
<br />
Ostatnio bardzo popularny stał się efekt, który polega na płynnym pojawianiu się jakiegoś elementu, kiedy najedziemy myszką na inny. Obecny jest on również na głównym szablonie Wioski (kiedy najedziemy kursorem na kwadraciki wysunie się z góry tekst). A teraz chciałabym przedstawić wam, jak zrobić ten efekt.<br />
<br />
Całość opiera się głównie na pseudoselektorze <b>:hover</b> oraz poleceniu <b>transition</b>. Jeżeli mieliście już do czynienia z tymi dwiema rzeczami, zrozumienie tej instrukcji przyjdzie wam jeszcze łatwiej.<br />
<br />
A oto efekt, do którego wspólnymi siłami postaramy się dojść.<br />
<br />
<div class="dd" id="d1">
<div class="tytul">
Tytuł</div>
<div class="dd" id="d2">
Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?</div>
</div>
<br />
<br />
Na początek wygląd htmlu:<br />
<kodhtml>
<div class="dd" id="d1"><br />
<div class="tytul">Tytuł</div><br />
<div class="dd" id="d2">Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?</div><br />
</div></kodhtml>
<br />
<a name='more'></a>Co nie wygląda zbyt efektownie, a mianowicie tak:<br />
<br />
Tytuł<br />
Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?<br />
<br />
Powinniśmy się skupić na dwóch <u>divach o id <i>d1 </i>oraz <i>d2</i></u>, ponieważ to one będą tworzyć ten efekt. Istotne jest, że drugi div jest włożony do tego pierwszego. (Takie dwa pudełka, jedno w drugim.) Dzięki temu będziemy mogli wpływać na drugi div, używając pseudoelementu <b>:hover </b>dla diva pierwszego (będziemy zmieniać wewnętrzne pudełko posługując się zewnętrznym).<br />
<br />
Najlepiej powyższy opis wyjaśnią obramowania. Czerwone dla zewnętrznego pudełka, zielone dla tego w środku.<br />
<br />
<div style="border: 2px solid red;">
<div>
Tytuł</div>
<div style="border: 2px solid green;">
Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?</div>
</div>
<br />
A teraz sprawmy, żeby to ładnie wyglądało i zaserwujmy obu divom jakiś zgrabny css.<br />
<kodcss>
.dd {width:200px;box-sizing:border-box;}<br />
#d1{margin:0 auto;}<br />
.tytul {background-color:#777; padding:10px; text-align:center; color:#fff; }<br />
#d2 {color:#777; background-color:#ddd; padding:10px; }</kodcss>
Powyższy kod powinien nam wyczarować taki efekt:<br />
<br />
<div style="margin: 0 auto; width: 200px;">
<div style="background-color: #777777; color: white; padding: 10px; text-align: center;">
Tytuł</div>
<div style="background-color: #dddddd; color: #777777; padding: 10px;">
Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?</div>
</div>
<br />
Wygląd już mamy. Teraz zacznie się prawdziwa zabawa, więc skupcie się mocno. Jak już wcześniej wspomniałam, będziemy zmieniać ustawienia diva numer dwa - tego w środku - przy pomocy <b>:hover</b> dla diva zewnętrznego. Czyli nasz kod, który będzie odpowiadał za akcję (ruch), będzie zaczynał się od:<br />
<kodcss>
#d1<b>:hover</b> #d2 { <i>tu będziemy zmieniać ustawienia wewnętrznego diva</i> }</kodcss>
Zauważcie jednak, że css, który wcześniej dodaliśmy, pokazał nam sytuację, którą chcemy uzyskać właśnie przy pomocy <b>:hover</b>. To oznacza, że normalna pozycja diva wewnętrznego musi być inna. Dodajmy mu więc niezbędny css.
<br />
<kodcss>
<b>#d2</b> {<br />
<u>margin-top</u>: <i>50 px</i><u>;</u><br />
<u>position</u>: <i>absolute;</i><br />
}<br />
<b>#d1:<u>hover </u>#d2</b> {<u>margin-top</u>:<i>0</i>;}</kodcss>
<b>Te polecenia są bardzo istotne</b>. Najpierw omówmy <b>margin-top</b>, ponieważ to właśnie te dwie linijki odpowiadają za przesuwanie się naszego diva i już za chwilę sprawią efekt wypływania. Na razie jednak mamy div przesunięty o 50px w dół (możesz tu wstawić dowolną ilość pikseli, zależy jaki efekt chcesz uzyskać), który po najechaniu myszką na zewnętrzny div przesuwa się ponownie na górę.<br />
Użycie <b>position:absolute</b> sprawia, że zmiana nie wpływa na położenie pozostałej treści. Gdybyśmy tego nie zastosowali, wraz z przesunięciem diva drugiego przesunęłoby się wszystko, co było pod nim (u nas byłaby to zdecydowania większość treści tej instrukcji). Uwierzcie mi na słowo, to nie wygląda dobrze.
Zastosujmy jeszcze magiczne transition, które da nam oczekiwany przez wszystkich efekt animacji.<br />
<kodcss>
<b>#d2</b>{<u>transition</u><b>:</b><i>0.3s</i><b>;</b>}</kodcss>
Dodanie powyższych elementów powoduje nam powstanie czegoś takiego.
<br />
<div id="d3">
<div style="background-color: #777777; color: white; padding: 10px; text-align: center;">
Tytuł</div>
<div id="d4">
Tekst, który się pojawia z dołu (nieco jak widmo), ale fajnie wygląda, prawda?</div>
</div>
<br />
<br />
<br />
<br />
<br />
Nie sądzicie, że to już wygląda całkiem nieźle? Teraz nie pozostało nam nic innego, jak ukrycie naszego diva drugiego, kiedy go widzieć nie potrzebujemy. I oczywiście sprawienie, aby stawał się widoczny, gdy tego chcemy.
<br />
<kodcss>
<b>#d2</b> {<br />
<u>opacity</u><b>:</b><i>0</i>;<br />
<u>visibility</u><b>:</b><i>hidden</i>;<br />
}<br />
<b>#d1:hover #d2</b>{<br />
<u>opacity</u><b>:</b><i>1</i>;<br />
<u>visibility</u><b>:</b><i>visible</i>;<br />
}
</kodcss>
Oto i ostateczne linijki, po dodaniu których otrzymamy taki sam efekt, jak na podglądzie na samym początku posta. Pewnie część osób nieco znających się na cssie zastanowi, dlaczego użyłam zarówno <b>opacity </b>jak i <b>visibility</b>, skoro oba polecania pełnią właściwie tę samą funkcję: odsłaniają lub ukrywają element. Odpowiedź jest prosta: <b>visibility </b>nie może zostać zanimowane. <b>Opacity </b>natomiast może, ale niestety wówczas nasz tekst wyświetlałby się, kiedy kursor wskazałby miejsce pod naszym tytułem i właśnie temu ma zapobiec visibility.<br />
<br />
Obawiam się, że coś więcej na ten temat można poczytać tylko po angielsku. Jeżeli ktoś byłby chętny, zapraszam do wpisania w google <u>tooltip using css only.</u><br />
<u><br /></u>
Na koniec jeszcze cały kod css razem:<br />
<kodcss>
.dd {width:200px;box-sizing:border-box;}<br />
#d1{margin:0 auto;}<br />
#d2 {color:#777; background-color:#ddd; padding:10px; position:absolute; margin-top:50px; opacity:0; visibility:hidden; z-index:2; transition:0.3s; }<br />
#d1:hover #d2 { margin-top:0; opacity:1; visibility:visible;}<br />
.tytul { background-color:#777; border-bottom:#333; padding:10px; text-align:center; color:#fff; }</kodcss>
<a href="http://instruktazowo.blogspot.com/2015/04/efekt-wypywania-elementu-po-najechaniu_20.html">Część druga instrukcji, gdzie jest wyjaśnione, jak zastosować efekt dla ramek w blogerze: pokazana na przykładzie widgetu Popularne posty.</a>Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com6tag:blogger.com,1999:blog-1692531137366744308.post-22801292546195503162015-04-09T07:25:00.000-07:002015-04-19T07:25:57.415-07:00Jak usunąć podkreślenie w linkach?W kodzie szablonu szukamy przy pomocy ctrl + f elementu <b>a:hover</b>, a następnie dopisujemy text-decoration:none !important;. Kod powinien wyglądać tak:<br />
<blockquote class="tr_bq">
a:hover {<br />
text-decoration:none !important;<br />
}</blockquote>
Polecenie !important działa dla całego kodu. Jego zastosowanie sprawia, że polecenia z <i>text-decoration</i> dla <i>a:hover</i> będą zawsze zamieniane na te zastosowane przy !important.<br />
<br />
Uwaga! Podkreślenia linków pierwotnie miały za cel zwracać uwagę czytelnika, że dany tekst jest linkiem. Dlatego warto byłoby w zastępstwie jakoś inaczej wyróżnić link, np. kolorem.Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com0tag:blogger.com,1999:blog-1692531137366744308.post-9487805462218015012015-03-29T07:24:00.000-07:002015-05-24T05:45:14.860-07:00Łamanie się tagów pod postemPrzy projektowaniu wyglądu pojedynczych etykiet/tagów w szablonie często okazuje się, że tagi złożone z więcej niż jednego wyrazu łamią się na końcu stopki (tak jak to widać na poniższym przykładzie) i nie wygląda to zbyt estetycznie.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.iv.pl/images/93915440024378431391.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.iv.pl/images/93915440024378431391.jpg" height="51" width="400" /></a></div>
<br />
Można z tym sobie poradzić na dwa sposoby:
<br />
<ol>
<li>zadeklarować do pojedynczego linku komendę <u>display: inline-block</u></li>
<li>lub <u>white-space: nowrap</u>*, jeżeli zależy nam, aby tagi były wyświetlane <i>inline</i></li>
</ol>
<kodcss>
<x>.post-labels a</x> {<br/>
display: <w>inline-block</w>;<br/>}<br />
<x>.post-labels a</x> {<br/>
white-space: <w>nowrap</w>;<br/>}</kodcss>
Efekt w obu przypadkach powinien być następujący:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.iv.pl/images/15510797814039696177.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.iv.pl/images/15510797814039696177.jpg" height="51" width="400" /></a></div>
<br />
*Dzięki <b>white-space</b> możemy decydować, czy w danym elemencie wiersz tekstu ma zostać zawinięty i przeniesiony do następnej linii czy też nie. Większość elementów ma ustawioną w domyśle możliwość łamania tekstu.Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com0tag:blogger.com,1999:blog-1692531137366744308.post-49951154318199696082013-07-17T04:20:00.002-07:002015-04-19T07:39:21.431-07:00Jak wyłączyć weryfikację obrazkową<blockquote class="tr_bq">
<b>Weryfikacja obrazkowa</b> to pojawiające się litery i cyfry do przepisania, gdy chcemy na jakimś blogu opublikować komentarz. Ma to pomóc ograniczyć ilość spamu w komentarzach. Ta opcja jest ustawiona <b>domyślnie </b>na każdym nowo założonym blogu.</blockquote>
Aby <u>wyłączyć</u> weryfikację obrazkową wchodzimy w panel sterowania bloga, a następnie z menu po lewej wybieramy <b>Ustawienia</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img12.imageshack.us/img12/5580/tl83.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://img12.imageshack.us/img12/5580/tl83.png" width="107" /></a></div>
Po kliknięciu na ustawienia pojawi się nam podmenu, z którego wybieramy <b>Posty i komentarze</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img825.imageshack.us/img825/9747/mljv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://img825.imageshack.us/img825/9747/mljv.png" /></a></div>
Teraz, skoro znaleźliśmy się w odpowiedniej zakładce szukamy <i>Wyłącz weryfikację obrazkową.</i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img94.imageshack.us/img94/3885/2t5n.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="http://img94.imageshack.us/img94/3885/2t5n.png" width="320" /></a></div>
Z prawej strony tego podpunktu znajduje się rozwijane menu z domyślnie ustawioną opcją <b>tak. </b>Wystarczy go rozwinąć i kliknąć na drugą opcję - <b>nie.</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img545.imageshack.us/img545/5945/e5zw.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="http://img545.imageshack.us/img545/5945/e5zw.png" width="320" /></a></div>
Teraz, jeżeli w polu zamiast <b>tak</b> wyświetla się nam <b>nie</b> (tak jak na podglądzie poniżej) możemy spokojnie zapisać zmiany, klikając na pomarańczowy button w prawym górny rogu <i>Zapisz ustawienia.</i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img19.imageshack.us/img19/1006/y9gh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="241" src="http://img19.imageshack.us/img19/1006/y9gh.png" width="320" /></a></div>
I gotowe. Weryfikacja obrazkowa powinna zniknąć z naszego bloga.<br />
<blockquote class="tr_bq">
Ta instrukcja została napisana na prośbę jednego z czytelników. Jeżeli macie jakieś pomysły i propozycje, piszcie, a postaramy się wam pomóc.</blockquote>
<i>Agata</i>Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com16tag:blogger.com,1999:blog-1692531137366744308.post-3156665590711979262013-05-26T07:55:00.001-07:002015-04-19T07:40:11.646-07:00Jak dodać własną Favikonkę?Czy każdy z Was wie, co to jest 'favikonka'? Jeśli nie to już to wyjaśniam. Po wejściu na bloga w karcie naszej przeglądarki obok nazwy bloga pojawia się malutka ikonka. Jest to standardowa 'favikonka', którą ma każdy nowo założony blog. Wygląda ona tak:<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2DXJGK-OdSXJPgZEzzVsgvOK65Dqh-Zad7PCO7E6rAsuFl96088O30iqHilpd9_H1xMQpi6aQm86Ns3-OSwbV9vANImvkI210MdjPPeSat_pKgV1q_EmwItYFvz18DauPnaO0sD4Kr-3/s1600/zwykla_favikona.png" /></div>
<div>
<div>
<div>
Pewnie wielu z Was myślało nad tym, że fajnie byłoby mieć w tym miejscu własny obrazek. Można to zrobić w bardzo prosty sposób.</div>
</div>
</div>
<div>
<br /></div>
<div>
Wchodzimy na swojego bloga i jego edycję. Następnie wybieramy opcję "Układ".</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8S-yUXaw26m6qHs_PDEJpQLcL_skgO90OGXTA_ip1TkUb_HaZzH7ok4ZzVy7ARpe2ZZvJq1yJxueTuDkPEGHQE1TW4f60dt7IM9n2fGbX5JSLuJxCa24aCzSZTG5YWnXBftApVzoC2rKY/s1600/obraz_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8S-yUXaw26m6qHs_PDEJpQLcL_skgO90OGXTA_ip1TkUb_HaZzH7ok4ZzVy7ARpe2ZZvJq1yJxueTuDkPEGHQE1TW4f60dt7IM9n2fGbX5JSLuJxCa24aCzSZTG5YWnXBftApVzoC2rKY/s320/obraz_1.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Wyświetli nam się układ naszego bloga. Wszelkie widgety, które mamy zamieszczone na blogu. Na samej górze, po lewej stronie mamy widget "Favikona". Klikamy na znajdującą się przy nim opcję "Edytuj".</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipsg4PUvAh9vf2H7lqwdjY8hvS4bO7ZaJawsO684rxgwDwzbtMG_jvGf0uyEWl3Rgs5FY_1OdAfctjAAbxMJALVZsy3be0l2ISYg0OiKN-LPH8G1Fs1d-O7SXm6IHoY2G1uXF8XSye4OMh/s1600/obraz_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipsg4PUvAh9vf2H7lqwdjY8hvS4bO7ZaJawsO684rxgwDwzbtMG_jvGf0uyEWl3Rgs5FY_1OdAfctjAAbxMJALVZsy3be0l2ISYg0OiKN-LPH8G1Fs1d-O7SXm6IHoY2G1uXF8XSye4OMh/s320/obraz_2.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Otworzy nam się takie okno. Klikamy "Wybierz plik". Następnie szukamy na własnym dysku favikonę, którą chcemy dodać. Należy pamięć, że nie może ona wielkością przekraczać 100MB i najlepiej jeśli jest ona kwadratowa. Po wybraniu pliku klikamy na "Zapisz". </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjihoSWy5bmRn2xLqeF8m96lPdgKxi0SEox8_6GpzbStHe9pfV8JMSCnygHpRpxaqZJbcu7mPphgqUK3zTHQsP3aXwx2QFsZ8-iW4ERfsp5C_uOiGYNw_df9SI_zXVNLcQQodhuZ8CXWNZK/s1600/obraz_3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjihoSWy5bmRn2xLqeF8m96lPdgKxi0SEox8_6GpzbStHe9pfV8JMSCnygHpRpxaqZJbcu7mPphgqUK3zTHQsP3aXwx2QFsZ8-iW4ERfsp5C_uOiGYNw_df9SI_zXVNLcQQodhuZ8CXWNZK/s320/obraz_3.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Należy pamiętać o tym, że nowa favikonka nie zawsze pojawia się od razu po jej wstawieniu. Czasem trzeba po prostu cierpliwie na nią poczekać. W niektórych przypadkach może to trwać nawet jeden dzień.</div>
<div>
<br /></div>
<div>
Darmowe favikonki znajdziecie także na Wiosce Szablonów pod <a href="http://wioskaszablonow.blogspot.com/p/favikonki.html">TYM</a> linkiem. O każdym pobraniu należy wspomnieć w komentarzu.</div>
Shalishttp://www.blogger.com/profile/02226880936598746398noreply@blogger.com3tag:blogger.com,1999:blog-1692531137366744308.post-83051114810110195352013-05-12T03:27:00.000-07:002015-05-24T03:26:38.731-07:00Projektant - tła<blockquote class="tr_bq">
Przy pomocy projektanta możemy usunąć wszystkie lub prawie wszystkie (w zależności od wziętego za bazę szablonu) tła z naszego bloga. Na podstawie szablonu Prosty Biały pokażę jak w łatwy sposób zmienić kolory tła dla wszystkich <u>dostępnych </u>w Projektancie elementów.</blockquote>
<blockquote class="tr_bq">
<i>Jeżeli myślisz, że to do niczego ci się nie przyda, sprawdź najpierw <b><a href="http://imageshack.us/a/img515/3243/012f.png">efekt</a></b> jaki możesz przy pomocy tych wskazówek uzyskać.</i></blockquote>
Zaczynamy oczywiście od wejścia do Projektanta, następnie z panelu po lewej wybieramy zakładkę <b>Zaawansowane</b>. Na sam początek wybieramy <b>podzakładkę</b> <b>Tła</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img811/8805/012cp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img811/8805/012cp.png" height="178" width="320" /></a></div>
Na powyższym rysunku mamy już ustawione kolory. Część <b>A</b> odpowiada za tło całej strony, zarazem jest ono osadzone<i> najgłębiej</i> ze wszystkich. Wszystkie kolejne tła będę je przykrywać. Tak samo się stanie, jeżeli dodamy <b>obraz tła</b>. Część <b>B </b>jest odpowiedzialna za kolor pod główną częścią bloga, natomiast <b>C</b> to tło tylko pod nagłówkiem bloga. Mam nadzieję, że jak do tej pory wszystko jest jasne.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img35/4733/012bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img35/4733/012bf.png" height="178" width="320" /></a></div>
Teraz wybieramy <b>podzakładkę Tło kart.</b> Tak jak widać powyżej część <b>A </b>zmienia kolor tła całego paska kart, natomiast B wybranej karty. Co ważniejsze, <u>po najechaniu myszką na inną kartkę, zmieni się jej kolor tła na ten wybrany z części B.</u><br />
<u><br /></u>
Patrząc na tytuły podzakładek można by przypuszczać, że tła nam się już skończyły. Nic bardziej mylnego. Tym razem wybieramy <b>Nagłówek z datą.</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img17/2235/012cg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img17/2235/012cg.png" height="178" width="320" /></a></div>
<br />
W tej części możemy zmienić <u>kolor pod datą postu</u>. Myślę, że jest to całkiem fajnie wyglądający efekt.<br />
Jeszcze lepsze możliwości daje nam tło ukryte w części <b>Stopka posta</b>. Tło całej stopki zmieniamy w części <b>A</b>, natomiast <b>Kolor cienia - B </b>jest niczym innym ja tylko podkreśleniem całej stopki. Wygląda to bardo ładnie, także warto ustawić sobie tutaj jakiś ciekawy kolor. <b>Ważne:</b> <u> zmiana tła w stopce spowoduje także zmianę </u><b style="text-decoration: underline;">koloru pod komentarzami.</b> A to na pewno może się wam przydać. Sami zobaczcie:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img28/4808/012dr.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img28/4808/012dr.png" height="229" width="320" /></a></div>
Ciekawe możliwości daje nam też podzakładka <b>Obrazy</b>. W części <b>A</b> możemy zmienić kolor tła pod obrazem, dzięki czemu otrzymamy <u>szerokie obramowanie</u>. W części <b>B </b>zmieniamy jakby obwolutę obrazka tworząc <u>cienkie obramowanie</u>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img853/3781/012ed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img853/3781/012ed.png" height="178" width="320" /></a></div>
Więcej na temat obramowań obrazków możesz znaleźć tutaj: <a href="http://instruktazowo.blogspot.com/2013/04/obramowanie-woko-obrazkow-w-postach.html">→ Obramowanie wokół obrazków w postach.</a><br />
I oto efekt przy zmianie kolorów teł i czcionek:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img515/3243/012f.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img515/3243/012f.png" height="320" width="301" /></a></div>
Mam nadzieję, że wam pomogłam (:Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com0tag:blogger.com,1999:blog-1692531137366744308.post-56447167960886696452013-04-01T07:52:00.001-07:002015-04-19T07:41:05.459-07:00Obramowanie wokół obrazków w postachZ reguły obramowanie obrazków w postach to biała ramka i cień. Usunięcie tego to nie taka trudna sprawa. Wchodzimy w Projektanta szablonów.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img203.imageshack.us/img203/5646/projektantw.png"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUW944NIzwbrBLRbtdkMXJ8-Lb3m-eJxwrkvG3Zmr0H3xFTquWpQ5fbaux1_a8bJLJXGObakqlI3vxppwkSkJhAA7yX5HhH5hwSbyZrBOCryqtZzTvdow23um7WQo3nmLAQHrYhNmgg0pt/s320/projektant.png" width="320" /></a></div>
<br />
Z menu po lewej stronie wybieramy opcję 'Zaawansowane', a następnie 'Dodaj arkusz CSS'.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img707.imageshack.us/img707/8435/arkuszcss.png"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAYN0aN0imCE21hG1fDMFU9hyveIekA9SA6JgORSR5iv1lWiqxeU04lYa2gZ2BnM-7Wm3lu-RK6IsBVXaqN5Z0O5bKUcVHMMpGF_QI3o0iqzYkvZ2PH3tFLjHv7RvUCTleCZBRW9qfMxnB/s320/arkusz_css.png" width="320" /></a></div>
<br />
I teraz wpisujemy kod w pustym miejscu.<br />
<br />
<blockquote class="tr_bq">
.post-body img {<br />
box-shadow: <span style="color: #b168ab;">1px 1px 10px black</span>; /*cień za obrazkiem*/<br />
<span style="color: #b168ab;">border:</span> <span style="color: #b168ab;">2px solid white</span>; /*ramka wokół obrazka, jej grubość, <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HwIKcrZKWWfPmnuAoFkdsfJ5KBvLQaCdJ3lustHNzMLAwwhoc5Z5_hIZlntpodhqVk8NvusRMWk6JJ8mEJEsxFb-mt0grdO0RnktfkBAqTssYtpm-5KuQ3bSXXhbcKeV7lnrvxLQC4NI/s640/komendy001.png">styl</a> i kolor*/<br />
border-radius: <span style="color: #b168ab;">10px 10px 10px 10px</span>; /*zaokrąglenie ramki*/<br />
padding: <span style="color: #b168ab;">5px</span>; /*ogległość ramki od samego obrazka*/<br />
background: <span style="color: #b168ab;">lightblue</span>; /*tło pod obrazkiem, widoczne jeśli użyjemy opcji padding*/<br />
}</blockquote>
<div>
Ramkę można zmieniać dowolnie dla strony, wystarczy użyć odpowiednio:<br />
border-top: - ramka na górze,<br />
border-bottom: - ramka na dole,<br />
border-left: - ramka z lewej strony.<br />
border-right: - ramka z prawej strony.<br />
<br />
Kolorów nie musimy używać tylko z nazwy (white, black, red, blue). Możemy wpisywać także kod szesnastkowy (#000000, #FFFFFF, #48324B).<br />
<br />
Jeśli nie chcesz mieć danej opcji, po prostu ją zaznacz i usuń. Nie jest powiedziane, że wszystko to, co napisałam musi być zawarte w Twoim kodzie. Jeśli nie jesteś pewny/a, co się zmieni, zmień daną wartość na inną i obserwuj, co się dzieje.<br />
<br />
<i>Wartości oznaczone tym <span style="color: #b168ab;">kolorem</span> można zmieniać.</i><br />
<br />
Na koniec pokażę wam mój efekt:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img713.imageshack.us/img713/7987/efektx.png"><img border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyVfTBiWbDJhMLlyuLqs3Xmhk9tvduGKUmMvt4ZUz83Fzq9SrOaDducauqWNJCLL0T2GbTggjV4pLrBDKbnvrCk4Oa7GcRzJ0twOs9Bls_U7NUcGixE16-3WbJDOL46KbMRxI1ecTSHAJ2/s320/efekt.png" width="320" /></a></div>
<br />
W razie jakichkolwiek problemów zgłoś się w komentarzu, a postaram się pomóc.<br />
<br /></div>
Shalishttp://www.blogger.com/profile/02226880936598746398noreply@blogger.com5tag:blogger.com,1999:blog-1692531137366744308.post-86281183448063293062013-03-29T02:22:00.000-07:002015-04-19T07:41:54.925-07:00Zmiana nazwy 'Strona Główna' w PageList<blockquote class="tr_bq">
Chciałabym pokazać wam prosty trik, jedną z blogspotowych możliwości, dzięki któremu z menu stron (kart czy zakładek, jak zwał, tak zwał) <b>usunąć </b>można pozycję <b>Strona główna</b> lub <b>zmienić jej nazwę</b>, tak jak to jest obecnie na Instruktażowo. </blockquote>
Na samym początku oczywiście wchodzimy w edycję bloga i klikamy <b>Układ</b>. A następnie na <b>edycję Stron</b>. Tak jak jest to zaznaczone na poniższym rysunku.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img208/7844/011ag.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="http://imageshack.us/a/img208/7844/011ag.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Po kliknięciu wyskoczy nam nowe okno. Znajduje się w nim kilka ciekawych opcji, a my zajmiemy się trzema z nich. Po lewej stronie widnieje kolumna zatytułowana <b>Strony do pokazania</b>. W niej możemy zaznaczać strony, które chcemy pokazać i odznaczać te, które powinny się nie wyświetlać. Możemy tutaj odznaczyć Stronę Główną jak i inne karty, przez co nie będą widoczne na blogu. <u>Nie tyczy się to jednak zwykłych linków do innych stron. Jak widać odnośnik do Wioski Szablonów nie pojawia się po stronie lewej.</u><br />
<u><br /></u>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img14/42/011bd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://imageshack.us/a/img14/42/011bd.png" width="273" /></a></div>
<br />
Widzimy, że napis Strona Gówna jest w specjalnym okienku, dzięki któremu możemy edytować tę nazwę. Zmieniając ją na przykład na tytuł własnego bloga, Odśwież lub Powrót. Co tylko nam wpadnie do głowy, <u>jednak pamiętajmy, by czytelnik mógł skojarzyć nasze nazewnictwo z funkcją linku.</u><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img42/3812/011cu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://imageshack.us/a/img42/3812/011cu.png" width="273" /></a></div>
<br />
<br />
Po prawej stronie mamy kolumnę zatytułowaną <b>Kolejność stron</b>. Dokładniej rzecz biorąc, to umożliwia nam w tej kolumnie zmianę kolejności wyświetlania się stron. Czasem się zacina, ale ogólnie rzecz biorąc działa (:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img15/1199/011dc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://imageshack.us/a/img15/1199/011dc.png" width="273" /></a></div>
<br />
Teraz wystarczy wszystko zapisać i cieszyć się zmianami na własnym blogu.<br />
<br />
<div style="text-align: center;">
<b>Koniec</b></div>
<div style="text-align: center;">
<b><br /></b></div>
Napiszcie, jeżeli ta instrukcja była wam przydatna. Miło by było wiedzieć, że moja praca się komuś przydała :)Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com7tag:blogger.com,1999:blog-1692531137366744308.post-52427920560086452972012-09-24T07:00:00.001-07:002015-05-24T03:24:17.438-07:00Projektant - układ<blockquote class="tr_bq">
Naszą podróż z Projektantem rozpoczniemy od zakładki Układ i Dostosuj ustawienia szerokości. Możemy tam zdecydować z ilu kolumn będzie się składał nasz blog oraz stopka.</blockquote>
<br />
Tak, jak wspominałam w poprzednim poście, nie można tutaj przenosić poszczególnych ramek. Takich zmian dokonuje się w edycji bloga.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img600/6581/010cl.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img600/6581/010cl.png" height="136" width="320" /></a></div>
<br />
Tam możemy dowolnie zmieniać kolejność ramek (za wyjątkiem tej zatytułowanej Posty w blogu).<br />
<br />
Wracając do głównego tematu, otwieramy Projektant (jeżeli nie wiesz jak kliknij <a href="http://instruktazowo.blogspot.com/2012/09/projektant-ale-co-to-jest-i-gdzie-kilka.html">tutaj</a>) i z panelu po lewej wybieramy układ. Pojawiło nam się nowe menu. Myślę, że jest bardzo czytelne. Wybrany przez nas układ okala pomarańczowa ramka.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img13/975/010ai.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img13/975/010ai.png" height="137" width="320" /></a></div>
<br />
<u>Wskazówka!</u> Jeżeli wybierzemy nowy układ ramek/stopki i wyjdziemy z zakładki Układ do nowej np. Zaawansowane zmiana nie zniknie i będziemy mogli zobaczyć nasz blog z całą grafiką i naszym tekstem w nowym układzie kolumn. Tak jest ze wszystkimi zmianami dokonanymi w Projektancie. Ale nie są to zmiany trwałe. Dopóki nie klikniemy dużego pomarańczowego buttonu "Zastosuj do bloga" nic po wyjściu z Projektanta w wyglądzie szablonu się nie zmieni.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img585/6021/010bo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img585/6021/010bo.png" height="180" width="320" /></a></div>
<br />
Zwróćmy uwagę na podział ramek: Układ treści i Układ stopki. Daje nam to spore możliwości. Dobrze ten podział widać <b><a href="http://stupid-owl.deviantart.com/#/d5ezmkj">w tym szablonie</a></b>. <u>Wszystkie dodatkowe ramki (informacje, archiwum, menu, statystyka oraz tagi) zostały dodane w stopce i co więcej, umieszczenie ich poza nią zaszkodziłoby szablonowi!</u><br />
<br />
Innym przykładem szablów z wyraźnie zarysowaną stopką są te proponowane przez blogspot z kategorii <u>Rewelacja oraz Znak wodny</u>. Zapraszam do obejrzenia ich w Projektancie, gdy stopkę mamy zapełnioną różnymi ramkami.<br />
<br />
<hr />
<blockquote class="tr_bq">
<br />
"Dostosuj ustawienia szerokości" jest miejscem, gdzie możemy zdecydować o szerokości całego bloga i poszczególnych kolumn.</blockquote>
<br />
W zależności od tego z ilu kolumn składa się nasz blog, tyle pasków pokazuje się w tej zakładce. Do jednej do trzech. Oczywiście zmiany automatycznie są wyświetlane poniżej.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img840/3972/010dy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://imageshack.us/a/img840/3972/010dy.png" height="191" width="320" /></a></div>
<br />
Przy pomocy błękitnego napisu "Resetuj szerokości do wartości domyślnych szablonu" powrócimy do domyślnych szerokości kolumn.<br />
<br />
Mam nadzieję, że teraz obie zakładki nie mają już przed Wami żadnych tajemnic (:Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com3tag:blogger.com,1999:blog-1692531137366744308.post-59180178831903490832012-09-24T05:29:00.001-07:002015-05-24T03:09:34.227-07:00Projektant - wstęp<blockquote class="tr_bq">
Projektant jest miejscem, gdzie w bardzo łatwy sposób możemy edytować wygląd swojego bloga. Na początek jednak trzeba wiedzieć, gdzie się on znajduje i co dzięki niemu możemy zmienić w wyglądzie bloga (:</blockquote>
<br />
Wchodzimy w edycję bloga. Z panelu po lewej wybieramy zakładkę Szablon. Następnie klikamy button "Dostosuj", który znajduje się pod pomniejszonym screenem naszego bloga.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img829/9841/007ud.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" src="http://imageshack.us/a/img829/9841/007ud.png" width="320" /></a></div>
<br />
<br />
Po kliknięciu wyświetla nam się od razu Projektant! To było banalnie proste. Teraz posłuchajmy o ciekawych funkcjach projektanta.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img834/7810/008yg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="http://imageshack.us/a/img834/7810/008yg.png" width="320" /></a></div>
<br />
Główną część Menu Projektanta Szablonów zajmują proponowane przez blogspot szablony. Klikając na nie, możemy zobaczyć nasz blog z tymi samymi ramkami i zawartością postów w nowej odsłonie. Wybrany przez nas szablon okala pomarańczowa ramka.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img442/3380/008bc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="http://imageshack.us/a/img442/3380/008bc.png" width="320" /></a></div>
<br />
<br />
Istnieje możliwość schowania projektanta. Wystarczy kliknąć na wąski pasek dzielący Projektanta i nasz szablon, a Menu się zwinie do góry. Pozostanie tylko ten wąski pasek. Ponownie klikając na niego spowodujemy wyświetlenie się całego menu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://imageshack.us/a/img834/6950/009ps.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="http://imageshack.us/a/img834/6950/009ps.png" width="320" /></a></div>
<br />
<br />
W Projektancie możemy:<br />
<br />
<ul>
<li>dodać swój własny obrazek tła, <b>ale nie większy niż 300 kB! </b>Oczywiście da się to ominąć i niedługo pokażę wam, jak.</li>
<li>zmieniać szerokości kolumn.</li>
<li>zmieniać układ kolumn. <b>Ale nie możemy zmieniać położenia ramek w kolumnach!</b> To odbywa się w innym miejscu.</li>
<li>zmieniać kolor czcionek, ale wielkość już tylko <b>niektórych</b>.</li>
<li>zmieniać kolor tła, ale <b>nie mamy wpływu na żadne cienie ani półprzezroczyste tła</b>. Dlatego, jeżeli nie chcesz ich mieć w szablonie zaczynaj komponowanie swojego szablonu od wstawienia Szablonu Prosty Biały. <a href="http://instruktazowo.blogspot.com/2012/09/szablon-prosty-biay-dlaczego-nalezy.html">Więcej tutaj >></a></li>
<li>dodać kod css.</li>
</ul>
<div>
Wszystkie powyższe możliwości zostaną dogłębnie opisane w następnych częściach.</div>
<br />Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com0tag:blogger.com,1999:blog-1692531137366744308.post-57832511298685938222012-09-22T12:31:00.000-07:002015-05-24T03:09:12.669-07:00Wstawienie nagłówka<blockquote class="tr_bq">
Jak wiadome początki zawsze są najtrudniejsze. Niby zwykły nagłówek, ale czasem może sprawić trudność początkującym. Sama nie od razu wiedziałam, gdzie jest opcja, dzięki której mogę go wstawić. Także zaczynamy.</blockquote>
<br />
Wchodzimy w edycję bloga i tam z menu po lewej stronie wybieramy opcję "Układ".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4L3mbrqNt-ysngepefOh_M57YsQeMFdWLzQtS8_6DDoHXDqOmAwCR5eD0YpyXWt8mzRv1aTsbbmQQsKV_37i5Q4DqKV26nElp6UWlgL7S1PK3NEA3SsXD3kBmMQW-l1HtJEJ633xj1-gL/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4L3mbrqNt-ysngepefOh_M57YsQeMFdWLzQtS8_6DDoHXDqOmAwCR5eD0YpyXWt8mzRv1aTsbbmQQsKV_37i5Q4DqKV26nElp6UWlgL7S1PK3NEA3SsXD3kBmMQW-l1HtJEJ633xj1-gL/s320/1.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pojawi się nam układ całego bloga. Na górze będzie tytuł naszego bloga, a obok w nawiasie "nagłówek". Klikamy obok na "Edytuj".</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGMZMkDdbzLiqtV9r5LBOX4OBiYPLgAXbFiplh76mHB82drMyZVmE0RivdbzUU5xhHnGu-ZziO0iIihGHOXGQOXZvCj6XS0EC84GZrM9ZnTDkNjoSLPvrrGPEEZeRSTk5m63CdA7Xymtij/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGMZMkDdbzLiqtV9r5LBOX4OBiYPLgAXbFiplh76mHB82drMyZVmE0RivdbzUU5xhHnGu-ZziO0iIihGHOXGQOXZvCj6XS0EC84GZrM9ZnTDkNjoSLPvrrGPEEZeRSTk5m63CdA7Xymtij/s320/2.jpg" width="320" /></a></div>
<br />
<br />
Wyskoczy nam takie oto okienko. Teraz wybieramy w zaznaczonym miejscu odpowiednią opcję, czyli 1) wybranie naszego nagłówka z dysku bądź 2) wklejenie bezpośredniego linku do naszego nagłówka zalinkowanego na jakimś serwerze,np. <a href="http://imageshack.us/">imageshack.us</a> Po wybraniu nagłówka wybieramy miejsce docelowe naszego obrazu. Każda z opcji jest jasno określona, dlatego nie powinno być z tym problemu. Ze swojej strony polecam opcję "Zamiast tytułu i opisu", aby mieć sam nagłówek, który przygotowaliśmy lub pobraliśmy bez zbędnych na nim elementów. Na koniec klikamy "Zapisz".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5NzEWVUEgU_YHW4iRMbdfcTJXZ3eu66Tf1CKYU3LPe1SaQbPrdPX5VnqEoPdoN14V9bnqV9Fl-3d27M5hc8P-MwtBgR0z6m87V-F_FRGgK1pg_9iBLLrxvWsVtk4hOM3CU9HX0SqJRFZ/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5NzEWVUEgU_YHW4iRMbdfcTJXZ3eu66Tf1CKYU3LPe1SaQbPrdPX5VnqEoPdoN14V9bnqV9Fl-3d27M5hc8P-MwtBgR0z6m87V-F_FRGgK1pg_9iBLLrxvWsVtk4hOM3CU9HX0SqJRFZ/s320/3.jpg" width="320" /></a></div>
<br />
<br />
Na samym końcu zapisujemy wprowadzone zmiany, aby pojawiły się na naszym blogu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNZfuxS3KTw1tL-hr3nqT3gTqOYCcyy6-AkohzvnZ0blGkinbWXgtIXeQEy1PQM1jOqvKocb9DYeiGYlbuVN9L4LpKvYKQi-dq1DQjwrpa6uz3acBHagLo4Y9Mx3muoae_PZq1QpHMa33/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNZfuxS3KTw1tL-hr3nqT3gTqOYCcyy6-AkohzvnZ0blGkinbWXgtIXeQEy1PQM1jOqvKocb9DYeiGYlbuVN9L4LpKvYKQi-dq1DQjwrpa6uz3acBHagLo4Y9Mx3muoae_PZq1QpHMa33/s320/4.jpg" width="320" /></a></div>
<br />
Teraz możemy cieszyć się ślicznym nagłówkiem i przyciągać uwagę innych Bloggerów. Nie było aż tak źle, prawda? Cieszę się, jeśli mogłam pomóc :)Shalishttp://www.blogger.com/profile/02226880936598746398noreply@blogger.com0tag:blogger.com,1999:blog-1692531137366744308.post-23668470526787757012012-09-11T10:42:00.003-07:002015-05-24T05:03:14.216-07:00Dodaj szablon<blockquote class="tr_bq">
Przede wszystkim zapamiętaj, gdzie zapisałeś pobraną paczkę z szablonem, ponieważ to przyda ci się później. Jeżeli plik jest skompresowany, musisz go rozpakować. Sprawdź, czy znajduję się tam<b> plik o rozszerzeniu .xml.</b> Jeżeli tak, to nic nie stoi na przeszkodzie, by zaimportować ten szablon na bloga! <u>Jeśli w paczce autor zamieścił jakieś dodatkowe informacje, przeczytaj je przed wstawieniem. Na pewno jest tam coś istotnego.</u></blockquote>
<div style="text-align: center;">
<a href="http://instruktazowo.blogspot.com/2012/09/kopia-zapasowa-szablonu-jak-ja-zrobic-i.html">Utwórz też kopię zapasową obecnego szablonu. </a></div>
<br />
Wchodzimy w edycję bloga, z panelu po lewej wybieramy zakładkę szablon. Na tej stronie w prawym głównym rogu mamy przycisk z jakże dużo mówiącym napisem "Utwórz/przywróć kopię zapasową".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img407.imageshack.us/img407/8132/003ibv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="115" src="http://img407.imageshack.us/img407/8132/003ibv.png" width="320" /></a></div>
<br />
Oczywiście klikamy na ten przycisk. Następnie pojawi się nam nowe okno. Interesuje nas jego dolna część, dzięki której możemy zaimportować kod szablonu z dysku twardego na nasz blog. Klikamy "Wybierz plik" i pokazuje się nam kolejne okno.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img402.imageshack.us/img402/2861/004bx.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="http://img402.imageshack.us/img402/2861/004bx.png" width="320" /></a></div>
<br />
<br />
Teraz przyda nam się wiedza, gdzie zapisaliśmy plik, bowiem musimy odnaleźć to miejsce i wybrać ten z kodem szablonu. Jak już wspomniałam na początku, ma on rozszerzenie .xml.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img214.imageshack.us/img214/2224/005br.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="147" src="http://img214.imageshack.us/img214/2224/005br.png" width="200" /></a></div>
<br />
<br />
Kiedy już wejdziemy w odpowiedni folder i klikniemy na plik z szablonem pozostało nam tylko kliknąć "otwórz". Powrócimy do poprzedniego okna. Teraz aktywny jest button "Przekaż" i klikając na niego zatwierdzimy zaimportowanie nowego szablonu na blogu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img339.imageshack.us/img339/6964/006fu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="127" src="http://img339.imageshack.us/img339/6964/006fu.png" width="320" /></a></div>
<br />
<br />
Właśnie wstawiliśmy nowy szablon. Prawda, że proste? Teraz tylko trzeba sprawdzić, czy wszystko wyświetla się poprawnie. Gdyby nie, pisać o pomoc do autorki szablonu (;
<div class="dalej"><a href="http://instruktazowo.blogspot.com/2015/05/pobierz-szablon.html">Pobierz szablon</a><a href="http://instruktazowo.blogspot.com/2015/05/rozpakuj-szablon.html">Rozpakuj szablon</a></div>Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com14tag:blogger.com,1999:blog-1692531137366744308.post-51229603724546585312012-09-11T04:39:00.001-07:002015-05-24T05:01:34.974-07:00Rozpakuj szablonPobrany plik z szablonem z DA jest spakowany w formacie <i>.ZIP</i> zatem po pobraniu należy ową paczkę rozpakować. Należy na plik kliknąć <b>PPM</b> (prawym przyciskiem myszy). Następnie z otworzonej listy wybrać "<b>Wypakuj do...</b>"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidRM9S6IvYde2-PEF0V0k62B4hpZvLlebhiyiR_m8AKQK9nKheDeue-e4turmj_JJY8OSG9xneaYkUqYzz34gdfOjuEkQjUk3PP2MCuIun7Gnh78yYztD_ep6j2Rk6IsIJhuXbMfB8rChY/s1600/wypakowanie_szablonu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidRM9S6IvYde2-PEF0V0k62B4hpZvLlebhiyiR_m8AKQK9nKheDeue-e4turmj_JJY8OSG9xneaYkUqYzz34gdfOjuEkQjUk3PP2MCuIun7Gnh78yYztD_ep6j2Rk6IsIJhuXbMfB8rChY/s320/wypakowanie_szablonu.png" width="320" /></a></div>
<br />
I oto mamy folder ze wszystkimi potrzebnymi elementami naszego szablonu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWcr8EJhJRC-rF5KgOzxaQMKoi_F__ZjkwWb4wvAgl9v9HE25DQIV4m2vaWISxi_-7HwgqOGLjxn_dcR8vQjPpqzF3_DIBvM0XbPq61FcZOZ_j5LRPqrlQB8StYDfOEcx_9-SnT5vkeIe/s1600/rozpakowana_paczka_opis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWcr8EJhJRC-rF5KgOzxaQMKoi_F__ZjkwWb4wvAgl9v9HE25DQIV4m2vaWISxi_-7HwgqOGLjxn_dcR8vQjPpqzF3_DIBvM0XbPq61FcZOZ_j5LRPqrlQB8StYDfOEcx_9-SnT5vkeIe/s320/rozpakowana_paczka_opis.png" width="320" /></a></div>
<br />
<br />
Poszczególne pliki mogą mieć duże znaczenie w ustawieniu danego szablonu. Musisz się więc przyjrzeć dokładnie temu, co jest w paczce. Poniżej opiszę krótko elementy przykładowej paczki.<br />
<blockquote class="tr_bq">
1. <b>Plik .XML</b> - jest to plik z kodem naszego szablonu.<br />
2. <b>Plik tekstowy</b> - są w nim zawarte informacje odnośnie autora szablonu, autora wykorzystanych do niego zdjęć, tekstur, brushy itp. Znajdziecie tam także informacje np. o tym, jak należy wstawić nagłówek, czy też ważne elementy szablonu, które odpowiadają za jego oryginalny wygląd.<br />
3. <b>Instrukcja</b> - Jak zaimportować kod szablonu na bloga. Jest ona po to, by przyspieszyć dodanie szablonu.<br />
4. <b><a href="http://instruktazowo.blogspot.com/2012/09/wstawienie-nagowka.html">Nagłówek</a></b> - jest to zazwyczaj plik graficzny (.jpg, .png, .gif) z nagłówkiem szablonu.<br />
5. <b>Podgląd</b> - podgląd szablonu. Można się nim sugerować przy wstawieniu szablonu. Podgląd pokazuje, jak powinien wyglądać szablon po jego zaimportowaniu na bloga.</blockquote>
<div class="dalej"><a href="http://instruktazowo.blogspot.com/2015/05/pobierz-szablon.html">Pobierz szablon</a><a href="http://instruktazowo.blogspot.com/2012/09/jak-zaimportowac-kod-szablonu-na.html">Dodaj szablon</a></div>Shalishttp://www.blogger.com/profile/02226880936598746398noreply@blogger.com2tag:blogger.com,1999:blog-1692531137366744308.post-69965788882559762142012-09-11T04:39:00.000-07:002015-05-24T05:04:07.364-07:00Pobierz szablonPobranie paczki z szablonem jest bardzo proste. Na WS (jak i na większości szabloniarni) wszystkie szablony są do pobrania na <a href="http://www.deviantart.com/">DeviantArt</a>. Każda z naszych szabloniarek posiada tam konto i zamieszcza tam swoje prace, by ułatwić wam ich pobranie. Poniżej instrukcja, jak to zrobić.<br />
<br />
Klikając na obrazek w poście (na podgląd szablonu) przenosi nas do szablonu na DA. Tam, z prawej strony możemy znaleźć "<b>Download</b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL73tSeVEm_q837tsOTdGXjHpQZQWbO7BUrGQRmLWC0FVpVaLFyLq_GUYlbM7zxHIx_xkYBSC_1XbWXrCh3xHV_91wisOtIo7yQWqTp4cZX4qFHrozmURRO_Xlvu4tH_6_W4GnnJJKkRHS/s1600/paczka_z_szablonem_da.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL73tSeVEm_q837tsOTdGXjHpQZQWbO7BUrGQRmLWC0FVpVaLFyLq_GUYlbM7zxHIx_xkYBSC_1XbWXrCh3xHV_91wisOtIo7yQWqTp4cZX4qFHrozmURRO_Xlvu4tH_6_W4GnnJJKkRHS/s1600/paczka_z_szablonem_da.png" /></a></div>
<br />
Za pomocą tego przycisku pobierzemy paczkę z szablonem na dysk naszego komputera. I o to cały sposób.
<div class="dalej"><a href="http://instruktazowo.blogspot.com/2015/05/rozpakuj-szablon.html">Rozpakuj szablon</a><a href="http://instruktazowo.blogspot.com/2012/09/jak-zaimportowac-kod-szablonu-na.html">Dodaj szablon</a></div>Shalishttp://www.blogger.com/profile/02226880936598746398noreply@blogger.com0tag:blogger.com,1999:blog-1692531137366744308.post-88501093334613447202012-09-10T10:50:00.000-07:002015-05-24T03:06:45.441-07:00Baza szablonu<blockquote class="tr_bq">
Jeżeli wcześniej blogowałeś na onecie zapewne wiesz, dlaczego przed wstawianiem szablonu należało ustawić onetowski szablon Biel. Podobny problem pojawił się na blogspocie, a jego rozwiązanie okazało się wręcz identyczne.</blockquote>
<br />
Zanim zaczniesz wstawiać swój własny szablon, ustaw na blogu pewien specjalny proponowany przez blogspot. Mianowicie szablon biały z kategorii Proste.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://img404.imageshack.us/img404/2593/001xfv.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="133" src="http://img404.imageshack.us/img404/2593/001xfv.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
Szablon ten <b>nie zawiera żadnych cieni</b> (które już posiadają inne szablony z kategorii Proste), dzięki czemu po zmienieniu koloru wszystkich teł na przezroczyste (transparent) w projektancie nie spotkamy się z przykrą niespodzianką - półprzezroczystym tłem o kilka tonów jaśniejszym (ciemniejszym) od zamieszczonego przez nas (tła w postaci obrazka czy koloru).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img222.imageshack.us/img222/1304/002qt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="http://img222.imageshack.us/img222/1304/002qt.png" width="320" /></a></div>
<br />
<br />
Na powyższym rysunku porównane są dwa przypadki ustawienia wszystkich teł na przezroczyste i wczytania obrazkowego tła. Pierwszy na podstawie szablonu Prosty Niebieski, drugi szablon Prosty Biały. Widzicie różnicę?<br />
<br />
Oczywiście owe cienie można usunąć w kodzie html szablonu, ale nie każdy wie jak i nie każdemu się chce, skoro jest prostsze rozwiązanie?Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com4tag:blogger.com,1999:blog-1692531137366744308.post-259431938907168632012-09-10T00:42:00.001-07:002015-05-24T03:06:03.282-07:00Kopia zapasowa<blockquote class="tr_bq">
Blogspot daje nam dużo możliwości, z których szkoda byłoby nie skorzystać. Kopia zapasowa jest czymś, co może nam zaoszczędzić wiele czasu i rozlanych łez, gdyby coś poszło nie tak.</blockquote>
Dzięki kopii zapasowej w każdej chwili możesz wrócić do poprzedniego wyglądu bloga praktycznie bez wysiłku. <b>I nie ma tu znaczenia czy wygląd bloga zostanie zmieniony przy pomocy Projektanta, grzebania w kodzie czy zaimportowania gotowego szablonu z jakiejś szablononiarni czy innej strony internetowej.</b> Zawsze istnieje możliwość, że efekt końcowy cię nie zadowoli i co wtedy, kiedy nie wiemy jak cofnąć zmiany? Wtedy własnie najlepiej posłużyć się kopi zapasową i zacząć wszystko od nowa.<br />
<div>
<br /></div>
<div>
Zrobienie kopii zapasowej jest naprawdę proste. Najpierw oczywiście wchodzimy w edycję bloga. Z panelu po lewej wybieramy zakładkę Szablon. Na tej stronie w prawym głównym rogu mamy przycisk z jakże dużo mówiącym napisem "Utwórz/przywróć kopię zapasową".</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img407.imageshack.us/img407/8132/003ibv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="115" src="http://img407.imageshack.us/img407/8132/003ibv.png" width="320" /></a></div>
<div>
<br /></div>
<div>
Oczywiście klikamy na ten przycisk. Następnie pojawi się nam nowe okno. Klikamy tam na duży pomarańczowy przycisk "Pobierz pełny szablon".<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img801.imageshack.us/img801/4518/004lb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="http://img801.imageshack.us/img801/4518/004lb.png" width="320" /></a></div>
<div>
<br />
Znów pojawi się nam nowe okno. Tym razem musimy wybrać miejsce na swoim komputerze, gdzie zapiszemy ową kopię zapasową. Dobrze jest nadać taką nazwę temu plikowi, by później z łatwością odgadnąć jaki szablon i z jakiego bloga jest w tym pliku zapisany.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://img171.imageshack.us/img171/2076/005mv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="147" src="http://img171.imageshack.us/img171/2076/005mv.png" width="200" /></a></div>
<div>
<br />
Na samym końcu klikamy "Zapisz" i jest po wszystkim. Mamy kopię zapasową. Teraz możemy zająć się zmienianiem wyglądu naszego bloga.</div>
<div>
<br /></div>
Agatahttp://www.blogger.com/profile/16488106556998635316noreply@blogger.com1