Szablon dla Bloggera - Profesjonalny

przez - kwietnia 17, 2015


Demo Pobierz

Jak zainstalować szablon?

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

Jak włączyć szablon mobilny?

Jak dodać stylową wyszukiwarkę?

W menu Układ => Dodaj gadżet HTML/JavaScript, do którego treści wklej poniższy kod:
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Wpisz szukaną frazę' type='text'/>
<button id='search-button' type='submit'>
<span>
Szukaj
</span>
</button>
</form>
</div>

Jak dodać widżet z informacją o autorze?

W menu Układ => Dodaj gadżet HTML/JavaScript, do którego treści wklej poniższy kod:
<div class='author'>
<img src='http://3.bp.blogspot.com/-iMcOMzSMreU/VNODr7iaylI/AAAAAAAAI5Y/K_7fmjgq1oY/s1600/girl-flowers.jpg' style='border-radius:50%;width:200px'/>
<h2>Agata</h2>
Miłośniczka podróży, rękodzieła oraz literatury z epoki Romantyzmu. Uwielbia styl Vintage, na którym wzoruje wykonywaną własnoręcznie biżuterię oraz przedmioty codziennego użytku.
<ul class='socials'>
<li><a href='http://www.facebook.com/blokotek'><i class='fa fa-facebook-official'></i></a></li>
<li><a href='http://twitter.com/Blokotek'><i class='fa fa-twitter'></i></a></li>
<li><a href='https://plus.google.com/+BlokotekPlDodatki'><i class='fa fa-google-plus'></i></a></li>
<li><a href='http://www.pinterest.com/blokotek/'><i class='fa fa-pinterest'></i></a></li>
<li><a href='http://instagram.com/Blokotek.pl'><i class='fa fa-instagram'></i></a></li>
<li><a href='http://www.bloglovin.com/blog/13115087'><i class='fa fa-heart'></i></a></li>
<li><a href='http://feeds.feedburner.com/blokotek'><i class='fa fa-rss'></i></a>
</ul>
</div>
  • Link zaznaczony na pomarańczowo zamień na bezpośredni adres do swojego zdjęcia.
  • Tekst zaznaczony na żółto zamień na swoje imię.
  • Tekst zaznaczony na zielono zamień na swój opis.
  • Link zaznaczony na granatowo zamień na adres swojego profilu/strony na Facebooku.
  • Link zaznaczony na turkusowo zamień na adres swojego profilu na Twitterze.
  • Link zaznaczony na czerwono zamień na adres swojego profilu/strony na Google+.
  • Link zaznaczony na różowo zamień na adres swojego profilu na Pinterest.
  • Link zaznaczony na fioletowo zamień na adres swojego profilu na Instagramie.
  • Link zaznaczony na limonkowo zamień na adres swojego profilu na Bloglovin'.
  • Link zaznaczony na cytrynowo zamień na adres swojego kanału Rss.

Jak dostosować górne rozwijane menu?

W menu Szablon => Edytuj kod HTML, 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 class='homer' href='#'>
          <i class='fa fa-home'/>
          START
        </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='#'>
          <i class='fa fa-user'/>
          O AUTORZE
        </a>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-camera'/>
          PORTFOLIO
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-bullhorn'/>
          BLOG
        </a>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-tags'/>
          KATEGORIE
        </a>
        <ul class='sub-menu'>
          <li>
            <a href='#'>
              Sub-Menu 1
            </a>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 2
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'>
              Sub-Menu 3
            </a>
            <ul>
              <li>
                <a href='#'>
                  Sub Sub-Menu 1
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 2
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 3
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 4
                </a>
              </li>
              <li>
                <a href='#'>
                  Sub Sub-Menu 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-envelope'/>
          KONTAKT
        </a>
      </li>
      <li>
        <a href='#'>
          <i class='fa fa-sitemap'/>
          MAPA BLOGA
        </a>
      </li>
    </ul>
  </nav>
Kody ikon Font Awesome znajdziesz TU.

Jak dodać dolne menu?

Dolne menu dodasz w menu Układ => Dodaj gadżet => Strony.

Zobacz również

0 komentarzy