Responsywny szablon na blogspotcie od zera

W tej instrukcji dowiecie się jak stworzyć własny, responsywny szablon na blogspocie całkowicie od zera. Instrukcja przeznaczona jest dla trochę bardziej zaawansowanych osób, które potrafią posługiwać się HTMLem.

Pobierz czysty szablon z tej instrukcji

Krok 1.

Stwórzcie sobie blog próbny, wejdźcie w HTML i usuńcie wszystko, prócz tego fragmentu:

<b:widget id='Blog1' locked='true' title='Posty na blogu' type='Blog'>
dużo rzeczy w środku
</b:widget>

Krok 2.

Na samej górze dodajcie:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>   
   <head>
  <b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title>

 <b:skin><![CDATA[

]]></b:skin>

       </head>
       <body>

Pod </b:widget> dodajcie:

</body>
</html>

Krok 3.

Teraz musimy utworzyć sekcje, w której będą się znajdować nasze widgety. Wszystko działa na podobnej zasadzie co <div>. Możecie utworzyć ich ile tylko chcecie, ale pamiętajcie o zmianie nazwy id=”nazwa”

<b:section id='kolumna-1'>

nasz widget, czyli np. cały kod Blog1 

</b:section>

Krok 4.

Zapiszcie szablon i zobaczcie czy wszystko działa. Otwórzcie swój blog w nowej karcie, czyż nie wygląda pięknie? ^o^ Teraz możecie wejść w układ, dodać więcej widetów, dodać nowe sekcje. Po tym trzeba wejść w CSS, albo w projektancie, albo w HTML:

<b:skin><![CDATA[

tutaj daj swój kod CSS

]]></b:skin>

Krok 5.

Podstawowy kod, od którego powinniście zacząć wygląda tak:

body {
margin: 0px;  
padding: 0;
font-family: open sans;
font-size: 13px;
color: #ddd;
background: #0e0e18;
}

a { text-decoration: none;  color: #ddd; list-style-type: none; list-style-image: none; }
a:visited { color: #666; }
a:hover { color: #fff; }

Krok 6.

Teraz należy przejść do edycji sekcji w CSS. Jak stworzyć responsywny szablon, czyli taki, który na każdej rozdzielczość będzie wyglądać dobrze? Zasada jest prosta: width: %; i position: relative;.

#kolumna-1 {
width: 50%;
margin-left: 25%;
position: relative;
}

Rada 1

Jeżeli macie dużo widetów bez tytułów, polecam i tak je nazywać, a następnie jedynie usunąć ich tytuł w CSS [ selektor h2 { display: none; } ]. To bardzo ułatwia pracę, gdy potrzebujesz coś znaleźć lub gdy chcesz coś edytować, a nie możesz tego zrobić na blogu i musisz przez układ. Ja wiele razy miałam tak, że nie mogłam znaleźć odpowiedniego widgetu HTML/JS, a z tą prostą metodą życie stało się łatwiejsze. W HTML widgety wyglądają tak:

<b:widget id='LinkList1' locked='false' title='Tytuł danego widgetu' type='LinkList'>

więc łatwo możecie znaleźć dany selektor.
Dodatkowo jest to zapewne duże ułatwienie dla ludzi, którzy będą używać stworzonego przez ciebie szablonu.

Rada 2

Żeby szablon prezentował się dobrze, nie zapominajcie o edycji ciasteczek!

div#cookieChoiceInfo {
z-index:999999999999999999999999999999999999999999999999999999999;
background: #0c0c0c;
color:#fff;
font-size: 10px !important;
font-family: open sans;
}
#cookieChoiceInfo &gt; div &gt; span.cookie-choices-text { font-size: 10px;}
#cookieChoiceInfo &gt; a:nth-child(2),a#cookieChoiceDismiss {
color:#ddd;
font-size:10px;
font-weight:bold;
}

#cookieChoiceInfo &gt; a:nth-child(2):hover, a#cookieChoiceDismiss:hover {
color:#666;
}

Zobacz Wszystkie Posty!