1 czerwca 2015

Szablon dla Bloggera - Czarna Perła


Demo Pobierz

Szablon ten inspirowany jest designem bloga Charlize Mystery i możesz go pobrać zupełnie za darmo.

Jak zainstalować szablon?

Co zrobić, gdy wyskakuje błąd podczas instalacji szablonu?

Jak włączyć szablon mobilny?

Jak edytować górne menu?

W menu Szablon => Edytuj kod HTML szablonu wyszukaj i edytuj poniższy kod:
<nav>
    <a class='responsive-menu' href='#' id='resp-menu'>
      <i class='fa fa-reorder'/>
      Menu
    </a>
    <ul class='menu'>
      <li>
        <a expr:href='data:blog.homepageUrl'>
          <i class='fa fa-home'/>
          Start
        </a>
      </li>
      <li>
        <a href='http://blokotek.blogspot.com/'>
          <i class='fa fa-desktop'/>
          Szablony
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 4
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 5
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href='http://www.blokotek.pl/p/bank-z.html'>
          <i class='fa fa-university'/>
          Bank zdjęć
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 4
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 5
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href='http://blokotek.forumpolish.com/'>
          <i class='fa fa-comments'/>
          Forum
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 4
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 5
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href='http://www.blokotek.pl/p/zostan-redaktorem_25.html'>
          <i class='fa fa-user-plus'/>
          Współpraca
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 4
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 5
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href='http://www.blokotek.pl/p/kontakt_11.html'>
          <i class='fa fa-envelope'/>
          Kontakt
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 4
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 5
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href='http://www.blokotek.pl/p/mapa-bloga.html'>
          <i class='fa fa-sitemap'/>
          Mapa
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 4
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 5
            </a>
          </li>
        </ul>
      </li>
      <div class='social-links'>
        <li class='facebook'>
          <a href='http://www.facebook.com/blokotek'>
            <i class='fa fa-facebook'/>
          </a>
        </li>
        <li class='twitter'>
          <a href='http://twitter.com/Blokotek'>
            <i class='fa fa-twitter'/>
          </a>
        </li>
        <li class='gplus'>
          <a href='https://plus.google.com/+BlokotekPlDodatki'>
            <i class='fa fa-google-plus'/>
          </a>
        </li>
        <li class='youtube'>
          <a href='http://www.youtube.com/user/Blokotek'>
            <i class='fa fa-youtube'/>
          </a>
        </li>
        <li class='instagram'>
          <a href='http://instagram.com/Blokotek.pl'>
            <i class='fa fa-instagram'/>
          </a>
        </li>
        <li class='flickr'>
          <a href='https://www.flickr.com/people/blokotek/'>
            <i class='fa fa-flickr'/>
          </a>
        </li>
        <li class='bloglovin'>
          <a href='http://www.bloglovin.com/blog/13115087'>
            <i class='fa fa-heart-o'/>
          </a>
        </li>
        <li class='pinterest'>
          <a href='http://www.pinterest.com/blokotek'>
            <i class='fa fa-pinterest-p'/>
          </a>
        </li>
        <li class='heart'>
          <a href='http://weheartit.com/blokotek'>
            <i class='fa fa-heart'/>
          </a>
        </li>
        <li class='rss'>
          <a href='http://feeds.feedburner.com/blokotek'>
            <i class='fa fa-rss'/>
          </a>
        </li>
      </div>
    </ul>
  </nav>
Kody ikon Font Awesome znajdziesz TU.

Jak dodać widżet kalendarz archiwum?

W menu Układ, edytuj gadżet o nazwie Archiwum bloga. Zastosuj poniższe ustawienia:
  • Styl: Lista 
  • Opcje: Pokaż tytuły postów 
  • Częstotliwość archiwizowania: Co miesiąc 
  • Na koniec Zapisz

Następnie w menu Szablon => Edytuj kod HTML szablonu, z rozwijanej listy Przejdź do widżetu wybierz BlogArchive1.
Kliknij w miejsce, w którym powinna znajdować się strzałka, tuż przy kodzie widżetu Archiwum. Kod zwinie się tak, że będzie łatwiej go zaznaczyć.
Teraz zaznacz cały kod, który oznaczony jest czerwoną pętlą na ilustracji poniżej:
<b:widget id='BlogArchive1' locked='false' title='Archiwum' type='BlogArchive'>...</b:widget>
Następnie zamień cały zaznaczony kod na:
  <b:widget id='BlogArchive1' locked='false' title='Archiwum bloga' type='BlogArchive'>
    <b:includable id='main'> 
  <b:if cond='data:title'> 
    <h2><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
  <div id='ArchiveList'> 
  <div expr:id='data:widget.instanceId + "_ArchiveList"'> 
    <b:if cond='data:style == "HIERARCHY"'> 
     <b:include data='data' name='interval'/> 
    </b:if> 
    <b:if cond='data:style == "FLAT"'> 
      <b:include data='data' name='flat'/> 
    </b:if> 
    <b:if cond='data:style == "MENU"'> 
      <b:include data='data' name='menu'/> 
    </b:if> 
  </div> 
  </div> 
  <b:include name='quickedit'/> 
  </div> 
</b:includable>
    <b:includable id='flat' var='data'> 
<div id='bloggerCalendarList'> 
  <ul> 
    <b:loop values='data:data' var='i'> 
      <li class='archivedate'> 
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) 
      </li> 
    </b:loop> 
  </ul> 
</div> 
<div id='blogger_calendar' style='display:none'> 
<table id='bcalendar'><caption id='bcaption'> 
</caption> 
<!-- Table Header --> 
<thead id='bcHead'/> 
<!-- Table Footer --> 
<!-- Table Body --> 
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr> 
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr> 
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr> 
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr> 
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr> 
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr> 
</tbody> 
</table> 
<table id='bcNavigation'><tr> 
<td id='bcFootPrev'/> 
<td id='bcFootAll'/> 
<td id='bcFootNext'/> 
</tr></table>   
<div id='calLoadingStatus' style='display:none; text-align:center;'> 
<script type='text/javascript'>bcLoadStatus();</script> 
</div> 
<div id='calendarDisplay'/> 
</div> 
<script type='text/javascript'> initCal();</script> 
</b:includable>
    <b:includable id='interval' var='intervalData'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable>
    <b:includable id='menu' var='data'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable>
    <b:includable id='posts' var='posts'> 
<!-- posts not needed for Calendar --> 
</b:includable>
    <b:includable id='toggle' var='interval'> 
  <!-- Toggle not needed for Calendar --> 
</b:includable>
  </b:widget>
Na koniec Zapisz szablon.

Jak umieścić okienko z obserwatorami Facebooka?

Przeczytaj artykuł Koniec wtyczki LikeBox.

Jak zmienić motywy kolorystyczne szablonu?

W menu Szablon => Edytuj kod HTML szablonu wyszukaj i edytuj poniższy kod:
<Variable name="keycolor" description="Main Color" type="color" default="#000000" value="#000000"/> /* kolor czarny */
<Variable name="keycolor2" description="Main Color2" type="color" default="#e67e22" value="#e67e22"/> /* kolor bursztynowy */

Jak zmienić liczbę postów wyświetlaną na stronie?

Domyślna ilość postów wyświetlana na stronie głównej i dalszych podstronach to 7. Jeśli chcesz ją zmienić wejdź do menu Układ =>Posty w blogu => Edytuj => Opcje strony głównej => Liczba postów na stronie głównej.
Następnie wejdź do menu Szablon => Edytuj kod HTML.
I w kodzie szablonu zmień wartość z 7 na wartość wpisaną w menu Układ.
Jeśli obydwie wymieniane wartości będą różne, prawdopodobnie ich różnica będzie ukryta i niewidoczna. Np. 7 - 4 = 3, więc trzy posty, pomiędzy stroną główną, a drugą - będą niewidoczne.
Designed by Blokotek. All rights reserved.