Grafiki i zdjęcia wykorzystane w podglądzie są przykładowe i nie są one częścią szablonu.
- szablon lewokolumnowy;
- Poszczególne ustawienia gadżetów:
- Etykiety(Label1): ustawione jako Lista
- Archiwum(BlogArchive1): ustawione jako menu
tutoriale, szablony, web design
| Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. | Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje | Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge |
Grafiki i zdjęcia wykorzystane w podglądzie są przykładowe i nie są one częścią szablonu.
#Header1 {height:200px;overflow:hidden;margin-left:-10px;margin-right:-50px;}
#Header1 {background:url(adres url obrazka/zdjęcia );}
<center><div class='photo1'><img src='http://31.media.tumblr.com/9b9a51b4ccaaee57e4b2a0f33822070e/tumblr_mezr0oN8Qb1rtqkgno1_500.jpg'/></div></center>Powyżej widzicie kod w gadżecie HTML/JavaScript. Poleca się utworzenie podobnego gadżetu na Waszym blogu, jednak nie jest to konieczne. Jednak jak ktoś się zdecyduje to:
Morbi viverra justo sit amet magna viverra quis mattis massa aliquet. Suspendisse dapibus dictum nulla, sit amet cursus odio accumsan vel. Duis id dui ante, ut volutpat enim. <br/>
<a class="nav" href="http://graphical-thoughts.blogspot.com/">Link 1</a>
<a class="nav" href="http://graphical-thoughts.blogspot.com/">Link 2</a>
<a class="nav" href="http://graphical-thoughts.blogspot.com/">Link 3</a>
<a class="nav" href="http://graphical-thoughts.blogspot.com/">Obserwuj</a>
<a class="friends" href="http://graphical-thoughts.blogspot.com/">Link 1<br />Opis linku 1</a> <a class="friends" href="http://graphical-thoughts.blogspot.com/">Link 2<br />Opis linku 2</a> <a class="friends" href="http://graphical-thoughts.blogspot.com/">Link 3<br />Opis linku 3</a> <a class="friends" href="http://graphical-thoughts.blogspot.com/">Link 4<br />Opis linku 4</a> <a class="friends" href="http://graphical-thoughts.blogspot.com/">Link 5<br />Opis linku 5</a> <a class="friends" href="http://graphical-thoughts.blogspot.com/">Link 6<br />Opis linku 6</a> <br /><br />friends - czyli klasa linku. Nie wolno tego zmieniać, bo tak jest zakodowana ta ramka w CSS. http://graphical-thoughts.blogspot.com/ zmieniamy na interesujący nas link docelowy. Link 1 (2,3, 4, itp.) - zmieniamy na nazwę, która ma się wyświetlać. Opis linku 1 (2,3,4, itp.) - analogicznie. Możemy to ewentualnie usunąć.
<a class='labels' href='http://graphical-thoughts.blogspot.com/'>Label 1</a>Tak, jak poprzednio były friends, tak tutaj są labels i tego też nie wolno zmieniać. http://graphical-thoughts.blogspot.com/ usuwamy i w miejsce tego wstawiamy link do konkretnej etykiety naszego bloga. Jak to zrobić? Najlepiej ustawić na chwilę regularną ramkę z etykietami i pobrać adresy tych, które nas interesują, a potem po prostu podstawić. Label 1 (2, 3, itp) to nazwa naszej etykietki.
<a class='labels' href='http://graphical-thoughts.blogspot.com/'>Label 2</a>
<a class='labels' href='http://graphical-thoughts.blogspot.com/'>Label 3</a>
<a class='labels' href='http://graphical-thoughts.blogspot.com/'>Label 4</a>
<a class='labels' href='http://graphical-thoughts.blogspot.com/'>Label 5</a>
<a class='labels' href='http://graphical-thoughts.blogspot.com/'>Label 6</a>
<a class="menuu" href="http://graphical-thoughts.blogspot.com">Home</a>menuu podobnie jak friends i labels, nietykalne. Czerwone zamieniamy na adresy naszych podstron, pomarańczowe na wyświetlane nazwy.
<a class="menuu" href="link do strony">Strona 1</a>
<a class="menuu" href="link do strony">Strona 2</a>
<a class="menuu" href="link do strony">Strona 3</a>
<a class="menuu" href="link do strony">Strona 4</a>
<center><img src='http://37.media.tumblr.com/9de313625e0dcad98896f05f7f285566/tumblr_n4m4etcRsE1swtbemo1_500.gif'/>Tekst czerwony to link do obrazka, który miałby się znaleźć w gadżecie. Jego parametry są uprzednio ustawione, dlatego nie ma żadnych dodatkowych kodów.
</center><br/>
<div style='text-align:justify'>
Morbi sed consequat quam. Donec ligula libero, tempor at porttitor eu, feugiat et elit. Maecenas ut quam magna, sed consectetur nunc.
</div><br/>
Fiolet to adres url naszego znajomego, a tekst zielony to jego nazwa.<a class="nav" href="http://graphical-thoughts.blogspot.com/">Friend</a>
brak możliwości pobrania
Pobierz (hostuje.net)
Pobierz (pastebin.com)
<a class="navi" href="http://graphical-thoughts.blogspot.com/">Propozycje</a><a class="navi" href="http://ask.fm/sleepingtyler">Ask.fm</a><a class="navi" href="http://graphical-thoughts.blogspot.com/search/label/szablon">Szablony</a><a class="navi" href="http://graphical-thoughts.blogspot.com/search/label/tutorial">Tutoriale</a>
<a class="friend" href="http://graphical-thoughts.blogspot.com/" >Friend</a><a class="friend" href="http://graphical-thoughts.blogspot.com/" >Friend</a><a class="friend" href="http://graphical-thoughts.blogspot.com/" >Friend</a><a class="friend" href="http://graphical-thoughts.blogspot.com/" >Friend</a><a class="friend" href="http://graphical-thoughts.blogspot.com/" >Friend</a><a class="friend" href="http://graphical-thoughts.blogspot.com/" >Friend</a>
<img src="http://data1.whicdn.com/images/61739999/large.jpg" style="width: 230px;" />
<center><div id="sidebarimage"><img src="http://25.media.tumblr.com/3fb1158ff6fc92fca0dae0bde182f7a0/tumblr_mnxkzhnDC61qlo8bho1_500.jpg" /></div></center>W miejsce tekstu czerwonego oczywiście wklejamy adres obrazka. Wielkość jest nieważna, gdyż zdjęcie powinno się samo zmniejszyć do odpowiednich wymiarów.
<center><div id="menu" >
<a href="http://graphical-thoughts.blogspot.com/">Home</a>+
<a href="http://graphical-thoughts.blogspot.com/">About</a>+
<a href="http://graphical-thoughts.blogspot.com/">Friends</a>+
<a href="http://graphical-thoughts.blogspot.com/">Archive</a>+
<a href="http://graphical-thoughts.blogspot.com">Follow+</a>
</div></center>
<div style="text-align:justify" > Aenean ac sem orci, ac faucibus orci. Mauris condimentum, ligula eget suscipit feugiat, enim massa tempus risus, et rhoncus mi ligula sagittis dui. Nunc laoreet, nisi at luctus rhoncus, enim turpis auctor sapien, in facilisis est massa a mi. Cras malesuada gravida metus, et blandit velit blandit vel.</div>
<div class="title2">As the days go</div>Tekst wyżej zaznaczony na niebiesko zamieniamy na własny opis, tekst piosenki lub co Wam się tam tylko podoba.
<div class="title3">by the night's on fire</div>
Ach, mało "potterowy" ten, jakby nie było, "potterowy" szablon. Kto zna film, ten mam nadzieję, będzie wiedzieć o co chodzi, a dla miłośników grafiki zostawiam możliwość zmiany tła. ;)
<div style="text-align: justify;">
<a href="http://s49.radikal.ru/i125/1103/3d/e81485d61d3c.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 0px; margin-right: 4px;"><img border="0" height="50" src="http://s49.radikal.ru/i125/1103/3d/e81485d61d3c.png" width="50" /></a>o ligula, eget bibendum nisi. Donec ante felis, aliquam quis venenatis sed, semper in urna. Fusce massa diam, pharetra sed porttitor non, dictum ac tellus. Aliquam fringilla malesuada magna ut auctor. Duis com
</div>