Szablony Bloggera

Dodane przez Unknown | sobota, października 30, 2010
Blogger jako jeden z niewielu produktów Google posiada dziwnie rozsianą dokumentację. To co znajduje się na stronach code.blogger.com, często nie posiada kompletnych informacji (np. co jest wymagane) ani przykładów. Dodatkowo polska część dokumentacji obejmuje tylko stare szablony (Classic Templates), więc jeśli chcemy dotrzeć do dokumentacji w nowszej wersji czasem trzeba w linku zamienić z hl=pl na hl=en. Jak w takim razie zacząć?

Przygotowałem na tą okazję kilka podstawowych szablonów (działających :) ) z krótkim przedstawieniem wymaganych elementów oraz zbiór zasobów, które mogą się przydać w dalszej przygodzie z Bloggerem.

Pierwszy szablon

Blogger wymaga, aby wśród tagów naszego szablonu znalazły się:
  • sekcja ze stylami 
    <b:skin>
  • sekcja z sidebar'em
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  • sekcja z widgetem attributions
    <b:section class='foot' id='footer-1' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
Pozostałe elementy są opcjonalne natomiast warto wykorzystać Bloggera do generowania znaczników w sekcji nagłówka (czyli <head>)
<b:include data='blog' name='all-head-content' />
<title>
   <data:blog.pageTitle />
</title>

Korzystając z wzorów składniowych stosowanych w nowych szablonach wygenerowanych przez Template Designer'a, minimalny szablon wygląda mniej więcej tak:

<!DOCTYPE html>
<html b:version="2" class="v2" expr:dir="data:blog.languageDirection"
 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'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible' />
  <b:if cond='data:blog.isMobile'>
   <meta content='width=device-width,minimum-scale=1.0,maximum-scale=3.0'
    name='viewport' />
   <b:else />
   <meta content='width=1100' name='viewport' />
  </b:if>
  <b:include data='blog' name='all-head-content' />
  <title>
   <data:blog.pageTitle />
  </title>
  <b:skin>
   /*
   -----------------------------------------------
   Blogger Template Style
   Name: Michał Biniek
   Designer: Michał Biniek
   URL: michal.biniek.pl
  ----------------------------------------------- */
  </b:skin>
 </head>
 <body>
  <header>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='testowy (Header)' type='Header' />
   </b:section>
  </header>

  <aside>
   <b:section class='sidebar' id='sidebar' preferred='yes' />
  </aside>

  <footer>
   <b:section class='foot' id='footer-3' showaddelement='no'>
    <b:widget id='Attribution1' locked='true' title='' type='Attribution' />
   </b:section>
  </footer>
 </body>
</html>

Dodawanie sekcji z postami

Widżet z boksami może być zasadniczo dodany w każdym miejscu - nawet nie wymaga użycia <b:section>. W przykładach wygenerowanych przez Google lista wpisów nie jest też umieszczona bezpośrednio w jakimś znaczniku HTML5. Jednak najlepiej jest umieścić wpis w jakimś znaczniku <div>, który będziemy mogli następnie łatwo ostylować, w celu dodania kolumny z prawej strony.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
Dodając jeszcze widżet z popularnymi postami do sekcji sidebar, a do nagłówka CSS Reset otrzymamy następujący szablon:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version="2" class="v2" expr:dir="data:blog.languageDirection"
   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'>
   <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible' />
    
    <b:if cond='data:blog.isMobile'>
     <meta content='width=device-width,minimum-scale=1.0,maximum-scale=3.0' name='viewport' />
     <b:else />
     <meta content='width=1100' name='viewport' />
    </b:if>
    <b:include data='blog' name='all-head-content' />
    <title>
     <data:blog.pageTitle />
    </title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
    <b:skin>
    /*
-----------------------------------------------
Blogger Template Style
Name:     Michał Biniek
Designer: Michał Biniek
URL:      michal.biniek.pl
----------------------------------------------- */
    </b:skin>
    
   </head>
   <body>
    <header>
     <div id="header">
     <b:section class='header' id='header-1' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='testowy (Header)' type='Header'/>
     </b:section>
     </div>
    </header>
    
    <div class="article">
    <b:section class='main' id='main' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
    </div>
    
    <aside>
     <div id="sidebar">
     <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
     </b:section>
     </div>
    </aside>
     
    <footer>
     <div id="footer">
      <b:section class='foot' id='footer-1' showaddelement='no'>
       <b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
      </b:section>
     </div>
    </footer>
    
   </body>
</html>

Tworzenie kolumn

Dodawanie kolumn jest jednoznaczne z ostylowaniem poszczególnych box'ów. Do sekcji <b:skin> dodajemy definicje szerokości poszczególnych sekcji - w ten sposób także aktualizuje nam się podgląd w Bloggerze.

W naszym wypadku .article i #sidebar dostaną atrybut float z wartością left oraz określoną szerokość.
html body {
  min-width:900px;
  max-width:1100px;
}

.article {
  float:left;
  min-width:700px;
  max-width:900px;
}

#sidebar {
  float:left;
  width:200px;
}
A oto porównanie widoków w dziale Page Elements
Widok przed nadaniem stylów
Widok po nadaniu stylów

Zasoby


Dodatkowo jeśli chcemy zapoznać się z metodami, które stosują developerzy od Google'a - warto wygenerować sobie jakiś przykładowy blog używając Template Designer i próbować zagłębić się w kod.

Na koniec warto wspomnieć o naprawdę dużych możliwościach Bloggera i wsparcia dla niektórych funkcji, jak np. skórek dla poszczególnych szablonów. Wprowadzenie tagów warunkowych to jest także duży ukłon w stronę programistów, ponieważ starsze szablony miały wydzielone sekcje, co było mniej intuicyjne. Metody "include'owania" fragmentów szablonów z przekazywaniem parametrów to kolejne możliwości silnika Blogger'a.

Mam nadzieję, że sprawa szablonów została nieco rozjaśniona - więc zapraszam do tworzenia własnych szablonów.

Prześlij dalej:

Tagi: ,

Brak komentarzy:

Prześlij komentarz