Szablon dla Bloggera - Elitarny

przez - kwietnia 25, 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-container">
  <div class="profile-box">
    <div class="profile-cover-image">
      <img src="http://3.bp.blogspot.com/-iMcOMzSMreU/VNODr7iaylI/AAAAAAAAI5Y/K_7fmjgq1oY/s1600/girl-flowers.jpg" />
    </div>
    <div class="profile-picture">
      <img src="http://3.bp.blogspot.com/-iMcOMzSMreU/VNODr7iaylI/AAAAAAAAI5Y/K_7fmjgq1oY/s1600/girl-flowers.jpg" />
    </div>
    <div class="profile-content">
      <h1>
        Agata
      </h1>
      <p>
        Miłośniczka podróży, rękodzieła oraz literatury z epoki Romantyzmu.
      </p>
      <div class="socials">
        <a href='http://www.facebook.com/blokotek'>
          <i class='fa fa-facebook'>
          </i>
        </a>
        <a href='http://twitter.com/Blokotek'>
          <i class='fa fa-twitter'>
          </i>
        </a>
        <a href='https://plus.google.com/+BlokotekPlDodatki'>
          <i class='fa fa-google-plus'>
          </i>
        </a>
        <a href='http://www.pinterest.com/blokotek'>
          <i class='fa fa-pinterest-p'>
          </i>
        </a>
        <a href='http://instagram.com/Blokotek.pl'>
          <i class='fa fa-instagram'>
          </i>
        </a>
        <a href='http://www.bloglovin.com/blog/13115087'>
          <i class='fa fa-heart'>
          </i>
        </a>
      </div>
    </div>
  </div>
</div>
  • Linki zaznaczone na pomarańczowo zamień na bezpośrednie adresy do swojego zdjęcia.
  • Tekst zaznaczony na żółto zamień na swoje imię.
  • Tekst zaznaczony na zielono zamień na swój opis.
  • Linki zaznaczone na turkusowo zamień na adresy swoich profili społecznościowych.

Jak dostosować górne menu z linkami społecznościowymi?

W menu Szablon => Edytuj kod HTML, wyszukaj i edytuj poniższy kod:
<nav>
    <ul class='menu'>
      <li class='facebook'>
        <a href='http://www.facebook.com/blokotek' title='Facebook'>
          <span class='fa fa-facebook'/>
          Facebook
        </a>
      </li>
      <li class='twitter'>
        <a href='http://twitter.com/Blokotek' title='Twitter'>
          <span class='fa fa-twitter'/>
          Twitter
        </a>
      </li>
      <li class='gplus'>
        <a href='https://plus.google.com/+BlokotekPlDodatki' title='Google+'>
          <span class='fa fa-google-plus'/>
          Google+
        </a>
      </li>
      <li class='youtube'>
        <a href='http://www.youtube.com/user/Blokotek' title='You Tube'>
          <span class='fa fa-youtube-play'/>
          YouTube
        </a>
      </li>
      <li class='instagram'>
        <a href='http://instagram.com/Blokotek.pl' title='Instagram'>
          <span class='fa fa-instagram'/>
          Instagram
        </a>
      </li>
      <li class='flickr'>
        <a href='https://www.flickr.com/people/blokotek/' title='Flickr'>
          <span class='fa fa-flickr'/>
          Flickr
        </a>
      </li>
      <li class='bloglovin'>
        <a href='http://www.bloglovin.com/blog/13115087' title='Bloglovin'>
          <span class='fa fa-heart-o'/>
          Bloglovin'
        </a>
      </li>
      <li class='pinterest'>
        <a href='http://www.pinterest.com/blokotek' title='Pinterest'>
          <span class='fa fa-pinterest-p'/>
          Pinterest
        </a>
      </li>
      <li class='heart'>
        <a href='http://weheartit.com/blokotek' title='We Heart It'>
          <span class='fa fa-heart'/>
          WeHeartIt
        </a>
      </li>
      <li class='rss'>
        <a href='http://feeds.feedburner.com/blokotek' title='Kanał RSS'>
          <span class='fa fa-rss'/>
          RSS
        </a>
      </li>
    </ul>
  </nav>

Jak dostosować dolne, 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.

Zobacz również

0 komentarzy